本人部分内容已过时,详见:https://zh-hans.reactjs.org/docs/create-a-new-react-app.html
1. 安装 Node.js
Windows 用户推荐安装 LTS 版本的 node,使用最新版在安装工具时可能会不成功,这可能是 npm 的版本问题导致的
2. 使用 npm 安装 React
$ npm i -g create-react-app@1.5.2
i
表示安装,-g
表示全局,@
后面是指定安装版本号。
3. 创建第一个 app
$ create-react-app react-app
注意,react-app
是创建的 app 的名字
4. 运行 app
进入到刚才创建的 app 根目录
$ cd react-app
运行:
$ npm start
这将会在本机的 3000 端口运行 React 程序,我们在浏览器打开:http://localhost:3000/ ,将会看到初始化的 React 页面。
5. Hello World
我们看看新建的 React app 文档结构,有三个文件夹:node-modules
,public
,src
。
我们把 src
文件夹里面的文件全部删除,新建一个 index.js
文件,写入以下代码:
import React from 'react';
import ReactDom from 'react-dom';
const element = <h1>Hello world!</h1>;
ReactDom.render(element, document.getElementById('root'))
刷新页面,就能看到 Hello World! 页面了。