React Tutorial

Learning by Examples

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 />);

Learning by Exercises

ReactDOM.(myElement, document.getElementById('root'));

React Quiz

Test your React skills with a quiz.

React Quiz

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:

create-react-app will set up everything you need to run a React application.

Run the React Application

Run this command to move to the my-react-app directory:

Run this command to execute the React application my-react-app:

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:

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.