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 的 React 应用程序:

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

运行 React 应用程序

运行此命令移动到 my-react-app 目录:

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

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

结果:

阅读本教程前，您需要了解的知识

在开始使用 React.JS 之前，您需要具备以下基础知识:

• HTML
• CSS
• JavaScript

您还应该对 ECMAScript 6 (ES6) 中引入的新 JavaScript 功能有一定的经验，您将在 React ES6 章节中了解它们。