What is React?

In this lesson, we look at what React is, using a simple visual example.

React is an open-source JavaScript library for building user interfaces.

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.

The key concept behind React is the idea of replacing front-end view templates with simple, reusable building blocks called components written in JavaScript.

For example, in Rails, instead of writing all your UI code in ERB or HAML templates, you would create JavaScript components, which build up your app’s UI.

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.

What’s interesting about React is that instead of each of these bits of UI being a simple HTML or template markup code, it turns them into simple JavaScript objects. Each component is a JavaScript function which returns markup as its value.

What this allows us to do is that, because it’s JavaScript code - JavaScript functions essentially - it allows us to reason about the UI and reuse code in a much more efficient manner. This will be much clearer when we actually look at specific code examples, later in this module.

Now before we jump into looking at the code, let’s quickly look at why React is a good idea.