Getting to Know React

In the past few years, React has become one of the most popular JavaScript libraries. Several aspects make React a powerful tool for creating interactive user interfaces. This article describes some of the key concepts that every beginner should understand.

ES6

The first thing to know about React is that it uses ES6, a version of JavaScript released between 2015 and 2016. Unfortunately, not all browsers have ES6 compatibility. When working with React we must translate ES6 into an older version of JavaScript with a compiler. One of the most recommended compilers is Babel.

ES6 has slightly different syntax from old versions of JavaScript. If you do not know ES6 but want to learn React, CodeSchool, Wes Bos and Code Academy have ES6 tutorials.

Components

Probably the most important aspect to remember about React is that it is components based. The idea is to have a parent component that contains children components. With this structure, you can pass information from the parent to the child and vice versa.

Assume you are creating a news page. At its most basic level the components of the site may consist of the following:

1. Parent: News Page

i. Child: Header

ii. Child: News Article

iii. Child: Footer

However, as the app grows, these four components can be divided further. The News Article component may contain title, author, and body components. What if we added a comments component above the footer? This section would itself contain multiple components. Although components help establish a pattern for developing the app, they can also become difficult to keep track of when beginning to use React.

HTML inside the JavaScript?

This React component displays “Hello World!”:

ReactDOM.render(<h1> Hello World! </h1>,document.getElementById(‘root’););

The <h1> element shown in the example above is not HTML. React uses a syntax extension of JavaScript, which looks like HTML, to describe how user interfaces look. This syntax is called JSX.

The Virtual DOM

A way to create interactive websites with JavaScript is by adding and removing properties to the DOM. However, if a user adds an item to a to-do list, most JavaScript libraries tell the browser to figure out how to display the entire list again, making the updates slow.

JSX allows React to create a copy of the DOM. When a change is made, the whole virtual DOM reloads, but because it does not change anything on the screen, it reloads quickly. The real DOM is then compared to the virtual DOM. Because React has already specified where everything goes, the DOM does not need to figure everything out — it only needs to change the updated elements. In other words, if the user adds one item to a to-do list, the virtual DOM rethinks the layout quickly, so that the actual DOM only has to add the new item.

Although these are only a few of React’s characteristics, grasping the concepts above will help you make wise decisions while developing React applications.