In this lesson, we look at what React is, using a simple visual example.
It was created by Facebook and released back in 2013. All the code and the documentation is available at https://reactjs.org
Since its release, React has grown to be one of the most popular front-end libraries in use, both for web and mobile apps.
Let’s look at an example. This is Eventbrite, the app we are going to clone in this course:
Here, we can look at how we would build this in React.
Each of the coloured boxes can be considered as React components, and React has this idea of nesting components.
So the red box here could be a container component, which contains all of the other components inside the app. The blue box would be a component for the gallery of events, and the green one would be a component for each event card. And inside that we could have further smaller components for displaying the event image, details and interactive buttons.
Now notice the green event card component, for example, would be reusable, because the same component could be used for each event on the page.
Similarly, the event image component would be reusable because the same component can be used for each event card.
We could also reuse these components on any other page of the app.
Now before we jump into looking at the code, let’s quickly look at why React is a good idea.