According to Facebook, Inc., React is a JavaScript library for user interfaces. Since version 15, React has been developed under the MIT license. React is component-based and the components are independent and reusable. The components are the basic building blocks of React. When you start to develop a UI with React, it is good to start by creating mock interfaces. That way, it will be easy to identify what kind of components you have to create and how they interact.

From the following screenshot of the mock, we can see how the UI can be split into components. In this case, there will be an application root component, a search bar component, a table component, and a table row component:

The components can then be arranged in the following tree hierarchy. The important thing to understand with React is that the dataflow is going from the parent component to the child:

React uses the virtual DOM (VDOM) for selective re-rendering of the UI, which makes it more cost effective. The VDOM is a lightweight copy of the DOM, and manipulation of the VDOM is much faster than it is with the real DOM. After the VDOM is updated, React compares it to a snapshot that was taken from the VDOM before updates were run. After the comparison, React will know which parts have been changed, and only these parts will be updated to the real DOM.

The React component can be defined by using a JavaScript function or the ES6 JavaScript class. We will go more deeply into ES6 in the next section. The following is a simple component source code that renders the Hello World text. The first code block uses the JavaScript function:

// Using JavaScript function
function Hello() {
  return <h1>Hello World</h1>;
}

The following code block uses the ES6 function to create a component:

// Using ES6 arrow function
const Hello = () => {
  return <h1>Hello World</h1>;
}

The following code uses the class to create a component:

// Using ES6 class
class Hello extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

The component that was implemented using the class contains the required render() method. This method shows and updates the rendered output of the component. The name of the user-defined component should start with a capital letter.

Let's make changes to our component's render method and add a new header element to it, as follows:

function App extends Component {
  render() {
    return (
      <h1>Hello World!</h1>
      <h2>From my first React app</h2>
    );
  }
}

When you run the app, you get the Adjacent JSX elements must be wrapped in an enclosing tag error. To fix this error, we have to wrap the headers in one element, such as div; since React version 16.2, we can also use Fragments, which look like empty JSX tags, as shown in the following code:

// Wrap headers in div
class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <h2>From my first React app</h2>
      </div>
    );
  }
}

// Or using fragments
class App extends Component {
  render() {
    return (
      <>
        <h1>Hello World!</h1>
        <h2>From my first React app</h2>
      </>
    );
  }
}

Let's look more carefully at the first React app that we created in Chapter 6, Setting Up the Environment and Tools – Frontend, using create-react-app. The source code of the index.js file in the root folder appears as follows: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

At the beginning of the file, there are import statements that load components or assets to our file. For example, the second line imports the react-dom package from the node_modules folder, and the fourth line imports the App component (the App.js file in the root folder).  The third line imports the index.css style sheet that is in the same folder as the index.js file.  The react-dom package provides DOM-specific methods for us. To render the React component to the DOM, we can use the render method from the react-dom package.

The first argument is the component that will be rendered, and the second argument is the element or container in which the component will be rendered. In this case, the root element is <div id="root"></div>, which can be found in the index.html file inside the public folder. Look at the following index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

The following source code shows the App.js component from our first React app. You can see that import also applies to assets, such as images and style sheets. At the end of the source code, there is an export statement that exports the component, and it can be made available to other components by using import. There can be only one default export per file, but there can be multiple named exports:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

The following example shows how to import default and named exports:

import React from 'react' // Import default value
import { Component } from 'react' // Import named value

The exports look like the following:

export default React // Default export
export {Component} // Named export

Now that we have covered the basic React components, let's take a look at the basic features of ES6.