HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # 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. Start learning React now ❯
Our "Show React" tool makes it easy to demonstrate React. It shows both the code and the result.
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hello(props) {
return <h1>Hello World!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);
Enter the correct ReactDOM method to render the React element to the DOM.
ReactDOM.(myElement, document.getElementById('root'));
Test your React skills with a quiz.
#img_mylearning { max-width:100%; }
Track your progress with the free "My Learning" program here at w3resource.
Log into your account, and start earning points!
This is an optional feature, you can study w3resource without using My Learning.
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.
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 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.
Before starting with React.JS, you should have intermediate experience in:
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.