React Tutorial
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.
Start learning React now ❯Learning by Examples
Our "Show React" tool makes it easy to demonstrate React. It shows both the code and the result.
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 />);
Learning by Exercises
Many chapters in this tutorial end with an exercise where you can check you level of knowledge.
Exercise?What is this?
Test your skills by answering a few questions about the topics of this page
What is a correct command to create a React application
React Quiz
Test your React skills with a quiz.
Login to Track Your Progress
Create a free W3Schools account and get access to more features and learning materials:
View your completed chapters, quizzes, and exercises- Keep an eye on your progress and daily streaks
- Jump back in exactly where you left off
- Create your own personal website
Note: This is an optional feature. You can study at W3Schools without creating an account.
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:
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.
