React JS Tutorial

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.