React 教程

React

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

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

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

现在开始学习 React »

现在通过实例来学习

通过使用我们的在线工具(Show React),您可以编辑 React,然后单击运行按钮来查看结果。

实例

import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));

运行实例 »


创建 React 应用程序

为了学习和测试 React,您应该在计算机上配置 React 环境。

本教程使 create-react-app

create-react-app 是一种官方支持的创建 react 应用程序的方法。

如果安装已 NPM 和 Node.js 后,您可以通过首先安装 create-react-app 来创建 React 应用程序。

通过在终端中运行以下命令来安装 create-react-app by running:

C:\Users\Your Name>npm install -g create-react-app

现在,您可以创建第一个 React 应用程序了!

运行此命令以创建名为 myfirstreact的 React 应用程序:

C:\Users\Your Name>npx create-react-app myfirstreact

create-react-app 将设置运行 react 应用程序所需的所有内容。

注释: 本教程使用 create-react-app 演示 react 示例。如果未安装 create-react-app 环境,则无法在计算机上运行相同的示例。


运行 React 应用程序

如果您遵循上面的两个命令,就可以运行第一个真正的 React 应用程序了!

运行此命令转移到 myfirstreact 目录:

C:\Users\Your Name>cd myfirstreact

运行此命令以执行 React 应用程序 myfirstreact:

C:\Users\Your Name\myfirstreact>npm start

浏览器将弹出一个新窗口显示您新创建的 React 应用程序!如果没有,请打开浏览器并在地址栏中键入localhost:3000

结果是:


您将在 react 入门 一章中了解有关 create-react-app 的更多信息。


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

在开始学习 React.JS 之前,您需要具备以下基础知识:

  • HTML
  • CSS
  • JavaScript

您还应该对 ECMAScript 6(ES6) 中引入的新 JavaScript 特性有一些了解,将在 React ES6 一章中介绍它们。