React

React is a JavaScript library for building user interfaces and by far the most popular front-end framework. React is used to build single-page applications and it allows us to create reusable UI components.

In the world of web development, there are a number of front-end frameworks such as Angular, Vue, and React that have gained popularity over the last few years. In the last few years, React has surpassed other frameworks in popularity and demand:

React popularity (downloads per day):

More statistics can be found here.

Create React App

In order to learn and test React, you should set up a React Environment on your computer and run:
create-react-app

The create-react-app is an officially supported way to create React applications. With NPM and Node.js already installed, you can create a React application by first installing the create-react-app.

Install create-react-app by running this command in your terminal:

npm install -g create-react-app

You are now ready to create your first React application!

Run this command to create a React application named myreactapp:
npx create-react-app myreactapp

Run the React Application

If you followed the commands above, you are ready to run your first real React application!

Run this command to move to the myreactapp directory:
cd myreactapp

To execute the React application run this command:
npm start

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

The result will be:

How does React Work?

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed!

React finds out what changes have been made, and changes only what needs to be changed.

Lifecycle of Components

Each component in React has a lifecycle that you can monitor and manipulate during its three main phases. The three phases are Mounting, Updating, and Unmounting.

Mounting

Mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Updating

The next phase in the lifecycle is when a component is updated. A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Unmounting

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

1. componentWillUnmount()

React Forms

Almost every application needs to accept user input at some point, and this is usually achieved with the venerable HTML form and its collection of input controls. Just like in HTML, React uses forms to allow users to interact with the web page.

Adding Forms in React

You add a form with React like any other element.

To begin, open App.js and add a form that allows users to enter their name

by adding the following code:

   <form>
        <h1>Hello</h1>
        <p>Enter your name:</p>
        <input
          type="text"
        />
      </form>

Save and close the file and the browser will reload and you’ll see a basic form:

Add a submit <button>:

<div className="App">
      <form>
        <h1>Hello</h1>
        <label>
          <p>Enter your name: </p>
          <input name="name" />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>

Save and close the file and you’ll see a basic form:

Handling Forms

Handling forms is about how you handle the data when it changes the value or gets submitted.
In React, form data is usually handled by the components, and all the data is stored in the component state. In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

Conclusion

The difference between controlled and uncontrolled inputs and the pros and cons of each as well as more about Controlled Component can be found in documentation click here.

To connect with me please check my Github, LinkedIn and follow me on Twitter.

Thanks for reading!