Getting Started with React

React is a popular JavaScript library for bringing complex pages and Web applications under control. It saves developers from working directly with the DOM, so they can focus on the application’s logic rather than trying to optimize the handling of every element. It can seem intimidating at first, but once you understand some key concepts, it’s not too bad.

This piece assumes that you know JavaScript and HTML fairly well and understand what the Document Object Model (DOM) is all about.

What is React?

In brief, React.js is a JavaScript library which aids in building user interfaces. Facebook developed it, but it’s freely available to everyone. Developers build components which are part of a virtual DOM. React takes care of keeping them in sync with the page’s DOM, updating only where there is a difference.

It’s possible to work with React in pure JavaScript, but many developers find using JSX convenient. It’s an extension to JavaScript which allows mixing of HTML elements with JavaScript code. The need to learn a new language is intimidating to some people, but it’s just a combination of two familiar kinds of syntax. Very little of it is new.

React doesn’t depend on any other stack components. It’s often used together with a Node.js backend, but it doesn’t have to be. It can even be used in the backend, but we’ll focus here on its front-end use.

First steps

To include it in a page, you can put a copy on your own site or include it from a standard source. Putting the following lines near the end of your page is a simple way to do it:

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

That will get you the development version of React, which keeps the code in a readable form that’s easier for debugging. For live pages, replace both occurrences of “development” with “production.” Put any code that uses React after those lines.

If you want to use JSX, you can’t just drop it into a JavaScript file. That will get you syntax errors. There are two ways to deal with this. One is to add the Babel preprocessor to your scripts:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Then you have to give any script which uses JSX the attribute “text/babel”. This approach is great for debugging, but interpreting JSX at runtime gives poor performance. For a production site, you’ll want to use a JSX to JavaScript precompiler.

Elements and components

To get started with React coding, you need to understand elements and components. An element is like a DOM object but isn’t part of the DOM. JSX makes it easy to create an element:

const elem = <div>Some text<div>;

You can do the same thing with straight JavaScript. The following is exactly equivalent:

const elem = React.createElement (
	'div',
	null,
	'some text'
);

When you create one either of those ways, it doesn’t have any connection to the page. To get it into the DOM, you need to render it:

React.render(elem, document.getElementById('root');

You might think you can do all kinds of interesting things with elem now, but there’s a catch. Elements are immutable. You can’t change its style or content. To be able to make changes, you need a component. A component is a function which takes one argument, a properties object, and returns an element.

Function MyComponent(props) {
	return <div>(props.text)</div>;
}

The props argument can be anything you like, but standard practice is for it to be an object with some named properties.

You can use a component anywhere you could use an element, but it’s far more versatile. You can use it as many times as you like, with different properties each time. Components preserve immutability; every time you call a component function, you return a new element.

Rendering

Let’s look more closely at rendering. The React.render function takes two arguments. The first is an element or component. The second is the container which will accept it. There’s a third optional argument, a callback, but we’ll ignore that here.

Rendering does two things. First, it replaces the contents of the container with the first argument in the virtual DOM. Nothing happens to the actual DOM at this point. Then React reconciles the virtual DOM with the actual DOM, updating the latter. It does the least amount of work necessary. If the new content is the same as the old content except for one attribute, it will just replace that attribute. That saves you the work of drilling down into the DOM to change a single attribute.

This seems to have a serious problem. You can only put one element into a container with React. How do you manage something like a list, then?

You can mostly get around the problem by choosing the right components. Render a whole list as a component, not each element. React is smart about reconciliation, so it’s OK if you’ve only changed one item in the list. You can have as many createElement calls as you need in a component function.

But starting in React version 16, there’s a more thorough solution. A component function can now return an array of elements, called a “fragment.” It can also return a string without wrapping it in an element.

Still, fragments have their limits. You can’t replace one item in a list or append to it. If your fragment is an array of list items, you have to replace them all each time. You can’t append to a list except by generating a new array of items. That’s just the way React works. Remember that you aren’t actually replacing the whole list in the DOM, and it becomes less frightening.

Further study

This is the barest beginning, but now you can use React to modify any part of a page. You can write functions that will add or change the elements in any part of a page. There’s still a lot to learn. State lets a component retain information about itself from one invocation to the next. Events let React handle user input. Here are a few resources for learning more: