React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality.

Download and install Node.js from https://nodejs.org/en

node -v

npm -v

npm install --global create-react-app

Download and install from https://git-scm.com/downloads

sudo apt-get install git

git -v

• Sublime Text
• Atom
• Brackets
• Visual Studio Code
• Visual Studio

• Chrome, react-devtools extension
• Firefox, react-devtools extension

npx create-react-app myprojectname

myproject
    ┗╸.git
    ┗╸node_module
    ┗╸public
         favicon.ico
         index.html
         manifest.json
    ┗╸src
         App.css
         App.js
         App.test.js
         index.css
         index.js
         logo.svg
         registerServiceWorker.js
    .gitignore
    package.json
    package-lock.json
    README.md

• public/index.html
  This is the HTML file that is loaded by the browser. It contains an element in which the application is displayed and a script element that loads the application's JavaScript files.
• src/index.js
  This is the JavaScript file that is responsible for configuring and starting the React application. The file is used to add the Bootstrap CSS framework to the application in the next section.
• src/App.js
  This is the React component, which contains the HTML content that will be displayed to the user and the JavaSctipt code required by the HTML. Components are the main building blocks in a React application, and you will see them used throughout this book.

cd myproject
npm install bootstrap

...
import 'bootstrap/dist/css/bootstrap.css';
...

npm start

http://localhost:3000

import "./App.css";
function App() {
    return (
        <div>
            <h4 className="bg-primary text-white text-center p-2">
                To-Do List
            </h4>
        </div>
    );
}
export default App;

The App.js file contains a React component, which is named App. Components are the main building block for React applications, and they are written using JSX, which is a superset of JavaScript that allows HTML to be included in code files without requiring any special quoting.

All web applications need to display dynamic content to the user, and React makes this easy by supporting the expressions feature. An expression is a fragment of JavaScript that is evaluated when a component's render method is called and provides the means to display data to the user. Many expressions are used to display data values defined by the component to keep track of the state of the application, known as state data.

import React, { Component } from "react";
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: "Adam",
        };
    }
    render() {
        return (
            <div>
                <h4 className="bg-primary text-white text-center p-2">
                    {this.state.userName}'s To-Do List.
                </h4>
            </div>
        );
    }
}

The constructor is a special method that is invoked when the component is initialized, and calling the super method within the constructor is required to ensure that the component is set up properly.
The props parameter defined by the constructor is important in React development because it allows one component to configure another. The term props is short for properties, and it reflects the way React creates the HTML content that is displayed in the browser.
React components have a special property named state, which is used to define state date:

...
this.data = {
   userName: "Adam"
}
...

The this keyword refers to the current object and is used to access its properties and methods.

...
<h4 className="bg-primary text-white text-center p-2">
    {this.state.userName}'s To-Do List.
</h4>
...

Expressions are denoted with curl braces { }. When render method is invoked, the expression is evaluated, and its result is included in the content presented to the user. The expression reads the value of the userName state data property, producing the result.

The dynamic nature of a React application is based on changes to state data, which React respond to by invoking the component's render method again, which causes the expressions to be re-evaluated using the new state data value.

import React, { Component } from "react";
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: "Adam",
        };
    }

    changeStateData = () => {
        this.setState({
            userName: this.state.userName === "Adam" ? "Bob" : "Adam",
        });
    };

    render() {
        return (
            <div>
                <h4 className="bg-primary text-white text-center p-2">
                    {this.state.userName}'s To-Do List.
                </h4>
                <button
                    className="btn btn-primary m-2"
                    onClick={this.changeStateData}
                >
                    Change
                </button>
            </div>
        );
    }
}

The onClick attribute is assigned an expression that React evaluates when the button is clicked. Clicking a button triggers an event, and onClick is an example of an event-handler prop. The function or method that is specified by onClick will be invoked each time the button is clicked. The expression specifies the changeStateData method, which is defined using the fat arrow syntax, which allows functions to be expressed concisely.
this.setState() set a new value for the variable and React invokes the render method to update the component.