Creating forms in React ⚛️ 
Tags: react, javascript, tutorial, webdev
Published: 2020-12-27 01:11:43

# React

[React](https://reactjs.org/) 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](https://angularjs.org/), [Vue](https://vuejs.org/), 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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kqfly5vn58vxa1mn7sr6.png)

### React popularity (downloads per day):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/392suo7asmpeicsw4u2g.png)

[More statistics can be found here.](https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190)

### 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1frivrc3fbw2ykxbous8.png)

### 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8kgy2afaf9oah7kmfzbw.png)


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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ksnbsd959yabzxnmjrqw.png)

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: 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/54jv6o1mwf5dyccia16d.png)

# 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.] (https://reactjs.org/docs/forms.html)

To connect with me please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) and follow me on [Twitter](https://twitter.com/LloydPile). 

Thanks for reading!