码农教程 - 一技在手,衣食无忧! tools

React教程

❮ 主页 下一节 ❯
[+:

React 是一个用于构建用户界面的 JavaScript 库。

React 用于构建单页应用程序。

React 允许我们创建可重用的 UI 组件。

立即开始学习 React ❯

通过实例学习

我们的"Show 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练习

练习:

输入正确的 ReactDOM 方法以将 React 元素渲染到 DOM。

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

开始练习

React测验

通过测验测试您的 React 技能。

React测验

创建React应用程序

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

本教程使用create-react-app。

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

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

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

运行此命令来创建一个名为的 React 应用程序my-react-app：

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在地址栏中。

结果：


您将了解更多关于create-react-app在里面React开始章节。

你应该已经知道什么

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

  • HTML
  • CSS
  • JavaScript

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

❮ 主页 下一节 ❯