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:
In order to learn and test React, you should set up a React Environment on your computer and run:
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
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
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:
To execute the React application run this command:
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.
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.
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 means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component:
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:
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:
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.
You add a form with React like any other element.
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
<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 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
<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
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.
Thanks for reading!