React 教程
通过示例学习
我们的“显示 React”工具使演示 React 变得容易。它同时显示代码和结果。
示例
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 />);
通过练习学习
本教程中的许多章节都以一个练习结束，您可以在其中检查自己的知识水平。
React 测验
通过测验测试你的 React 技能。
我的学习
使用 W3Schools 上的免费“我的学习”程序跟踪您的进度。
登录您的帐户，并开始赚取积分！
这是一个可选功能。您可以在 W3Schools 上学习而无需使用“我的学习”。
创建 React 应用程序
要学习和测试 React，您应该在您的计算机上设置一个 React 环境。
本教程使用 create-react-app。
create-react-app 工具是创建 React 应用程序的官方支持方式。
使用 create-react-app 需要 Node.js。
在您想要创建应用程序的目录中打开您的终端。
运行此命令以创建一个名为 my-react-app 的 React 应用程序
npx create-react-app my-react-app
create-react-app 将设置运行 React 应用程序所需的一切。
注意：如果您之前已全局安装 create-react-app，建议您卸载该软件包以确保 npx 始终使用最新版本的 create-react-app。要卸载，请运行此命令：npm uninstall -g create-react-app。
运行 React 应用程序
运行此命令以移动到 my-react-app 目录
cd my-react-app
运行此命令以执行 React 应用程序 my-react-app
npm start
一个新的浏览器窗口将弹出，显示您新创建的 React 应用程序！如果没有，请打开您的浏览器并在地址栏中键入 localhost:3000。
结果
您将在 React 入门 章节中了解有关 create-react-app 的更多信息。
您应该已经了解的内容
在开始使用 React.JS 之前，您应该具备以下方面的中等经验
- HTML
- CSS
- JavaScript
您还应该对 ECMAScript 6 (ES6) 中引入的新 JavaScript 功能有一些了解，您将在 React ES6 章节中了解它们。
