According to Facebook, 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 basic building blocks of React. When you start to develop a user interface with React, it is good to start by creating  a mock interfaces. That way, it is easy to identify what kind of components you have to create and how they interact.

From the following diagram of the mock, we can see how the user interface 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 for selective re-rendering of the user interface, which makes it more cost effective. The Virtual DOM is a lightweight copy of the DOM and manipulation of the virtual DOM is much faster than the real DOM. After the virtual DOM is updated, React compares it to a snapshot that has been taken from the virtual DOM before updates have been run. After the comparison, React knows which parts have been changed and only these parts are 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>;
}

And this one is 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 a add new header element into it:

class 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:

// 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 the previous chapter using create-react-app. The source code of the Index.js file in the root folder looks as follows: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

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 (the App.js file in the root folder) component. 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 where 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. See the following index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
     shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <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 applies also 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 is 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, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </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

And the exports looks like the following:

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