React 教程

通过示例学习

我们的“Show React”工具可以轻松演示 React。它同时显示代码和结果。

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

通过练习学习

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

React 测验

通过测验来测试你的 React 技能。

React 测验

创建 React 应用

要学习和测试 React，您应该在计算机上设置一个 React 环境。

本教程使用 create-react-app.

这 create-react-app 工具是官方支持的创建 React 应用程序的方式。

Node.js 需要使用create-react-app.

在您想要创建应用程序的目录中打开终端。

运行此命令创建名为 my-react-app:

create-react-app 将设置运行 React 应用程序所需的一切。

运行 React 应用程序

运行此命令以移至 my-react-app 目录：

运行此命令来执行 React 应用程序 my-react-app:

一个新的浏览器窗口将会弹出，其中包含您新创建的 React App！如果没有，请打开浏览器并输入 localhost:3000 在地址栏中。

结果：

你应该已经知道的内容

在开始使用 React.JS 之前，你应该具有以下方面的中级经验：

• HTML
• CSS
• JavaScript

你还应该对 ECMAScript 6 (ES6) 中引入的新 JavaScript 功能有一些了解，你将在 React ES6 章节。