React is a JavaScript library for building user interfaces.
React is used to build single-page applications.
React allows us to create reusable UI components.
Example:
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hello(props) {
return <h1>Hello World!</h1>;
}
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Hello />);
Create React App:-
To learn and test React, you should set up a React Environment on your computer.
This tutorial uses the create-react-app.
The create-react-app tool is an officially supported way to create React applications.
Node.js is required to use create-react-app.
Step 1- Open your terminal in the directory you would like to create your application.
Step 2- Run this command to create a React application named my-react-app:
npx create-react-app my-react-app
create-react-app will set up everything you need to run a React application.
Note: If you've previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app. To uninstall, run this command: npm uninstall -g create-react-app.
Run the React Application:-
Run this command to move to the my-react-app directory:
cd my-react-app
Run this command to execute the React application my-react-app:
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:
You will learn more about the create-react-app in the React Get Started chapter.
What You Should Already Know:-
Before starting with React.JS, you should have intermediate experience in:
- HTML
- CSS
- JavaScript
You should also have some experience with the new JavaScript features introduced in ECMAScript 6 (ES6), you will learn about them in the React ES6 chapter.