React

Learn React
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.

THON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING BASH RUST

React Introduction
What is React?
React is a front-end JavaScript library.

React was developed by the Facebook Software Engineer Jordan Walke.

React is also known as React.js or ReactJS.

React is a tool for building UI components.

How does React Work?
React creates a VIRTUAL DOM in memory.

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.

You will learn the various aspects of how React does this in the rest of this tutorial.

What You Should Already Know
Before you continue you should have a basic understanding of the following:

HTML
CSS
JavaScript
If you want to study these subjects first, find the tutorials on our Home page.

React.JS History
Latest version of React.JS is 19.0.0 (December 2024).

Initial release to the Public (version 0.3.0) was in July 2013.

React.JS was first used in 2011 for Facebook's Newsfeed feature.

Facebook Software Engineer, Jordan Walke

Example:
import React from 'react';
import ReactDOM from 'react-dom/client';

function Hello(props) {
return

Hello World!

;
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render();

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.

Open your terminal in the directory you would like to create your application.

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 you continue you should have a basic understanding of the following:

HTML
CSS
JavaScript
If you want to study these subjects first, find the tutorials on our Home page.

In addition, 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.