React 教程

透過示例學習

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 container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Hello />);

在練習中學習

Many chapters in this tutorial end with an exercise where you can check you level of knowledge.

See all React Exercises

React 測驗

Test your React skills with a quiz.

React 測驗

我的學習

在 W3Schools 使用免費的“我的學習”計劃來跟蹤你的進度。

登入你的賬戶，開始賺取積分！

這是一個可選功能。你可以在 W3Schools 學習，而無需使用“我的學習”。

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.

結果

您應該已經瞭解的內容

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.