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 一章中介绍它们。