React is a JavaScript library that aims to simplify the development of visual interfaces.

Developed at Facebook and released to the world in 2013, it drives some of the most widely used code in the world. It powers Facebook and Instagram among many, many other software companies.

Its primary goal is to make it easy to reason about an interface and its state at any point in time by dividing the UI into a collection of components.

React is used to build single-page web applications, along with many other libraries and frameworks that were available before React came to life.

Why is React so popular?

React has taken the frontend web development world by storm. Why?

Less complex than the alternatives

At the time when React was announced, Ember.js and Angular 1.x were the predominant choices for frameworks. Both of these imposed too many conventions on the code so that porting an existing app was not convenient at all.

React was created to be very easy to integrate into an existing project. That’s how they had to do it at Facebook in order to introduce it to the existing codebase. Also, those two frameworks brought too much to the table, while React only chose to implement the View layer instead of the full MVC stack.

Perfect timing

At that same time, Angular 2.x was announced by Google, along with the backwards incompatibility and major changes it was going to bring. Moving from Angular 1 to 2 was like moving to a different framework. And so this fact, along with the execution speed improvements that React promised, made React something developers were eager to try.

Backed by Facebook

Being backed by Facebook benefits a project if it turns out to be successful. But it’s not a guarantee, and there are many failed open source projects by both Facebook and Google (among others).

Is React really that simple?

Even though I said that React is simpler than alternative frameworks, diving into React is still complex. This is mostly because of the corollary technologies that can be integrated with React, like Redux, Relay or GraphQL.

React in itself has a very small API.

There isn’t much more in React other than these concepts:

• Components
• JSX
• State
• Props

We’ll see each one of them in my next articles.

JSX

Many developers, including myself, at first sight thought that JSX was horrible, and quickly dismissed React.

Even though they said JSX was not required, using React without JSX was painful.

It took me a couple years of occasionally looking at it to start digesting JSX, and now I largely prefer it over the alternative (that is, using templates).

The major benefit of using JSX is that you’re only interacting with JavaScript objects, not template strings.

JSX is not embedded HTML.

Many tutorials for React beginners like to postpone the introduction of JSX for later, because they assume the reader would be better off without it. Since I am now a JSX fan, however, I’ll immediately jump into it.

Here is how you define a h1 tag containing a string:

const element = <h1>Hello, world!</h1>

It looks like a strange mix of JavaScript and HTML, but in reality it’s all JavaScript.

What looks like HTML is actually a sugar syntax for defining components and their positioning inside the markup.

Inside a JSX expression, attributes can be inserted very easily:

const myId = 'test' 
const element = <h1 id={myId}>Hello, world!</h1>

You just need to pay attention to when an attribute has a dash (-), which is converted to camelCase syntax instead, as well as to these two special cases:

• class becomes className
• for becomes htmlFor

because they are reserved words in JavaScript.

Here’s a JSX snippet that wraps two components into a div tag:

<div> 
  <BlogPostsList />
  <Sidebar /> 
</div>

A tag always needs to be closed, because this is more XML than HTML (if you remember the XHTML days, this will be familiar, but since then the HTML5 loose syntax won). In this case, a self-closing tag is used.

JSX, when introduced with React, is no longer a React-only technology.