一、安装node
确认电脑上已安装node.js，可以在终端输入命令$ node -v 按回车键若有返回版本号说明已安装。
二、安装npm
验证方法同一$ npm -v
三、安装全局create-react-app
$ sudo npm install -g create-react-app
其中sudo表示mac系统特有的授权，windows上无需加上这个。
创建成功提示图
其中还需要特别注意的是，这里的代码输入过程中，若了的Tab空格，会报如下错误，重新输入正确的即可。（错误提示：Display all 1376 possibilities?(y or n)）
报错的情况
四、使用create-react-app 快速构建React开发环境
$ create-react-app project_name
create-react-app自动创建的项目是基于webpack+ES6；搭建完成后会生成一个名为project_name的文件夹，其文件目录如下
五、安装React
使用npm来安装 React：
npm init
npm install --save react react-dom
六、开启ES6和JSX
Babel安装
进入Babel安装说明，https://babeljs.io/en/setup/#installation，说明了如何在多种不同环境中配置Babel。因为我用的是webstorm编辑器，所以选择wenstorm。
babel安装
根据提示安装即可
npm install --save-dev babel-cli
npm install @babel/preset-env --save-dev
安装完后，项目跟目录新建一个.babelrc文件 ，并进行配置，如下
{
"presets": ["@babel/preset-env"]
}
七、运行项目
进入上一步生成的项目 $ cd project_name ；然后再执行$ npm start
在浏览器中打开http://localhost:3000/，就可以访问了，结果图如下
八、安装路由
因为React Router DOM已经被发布到npm上去了，所以可以通过npm和yarn来安装它。
npm install react-router-dom
示例：基本路由
- 在src下新建一个文件夹router — Router.js 用来进行路由配置。
-
在src下新建一个文件夹component用来存放组件。
目录
Router.js
import React from 'react'
import { BrowserRouter as Router , Route , Link } from 'react-router-dom';
import One from '../component/one'
import Two from '../component/two'
function Index() {
return <h2>Home</h2>
}
function About() {
return <h2>About</h2>
}
function Users() {
return <h2>Users</h2>
}
function AppRouter() {
return(
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about/">About</Link>
</li>
<li>
<Link to="/users/">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
<Route path="/one/" component={One} />
<Route path="/two/" component={Two} />
</Router>
)
}
export default AppRouter;
App.js
import React, { Component } from 'react';
import './App.css';
import Router from './router/Router'
class App extends Component {
render() {
return (
<div className="App">
<Router />
</div>
);
}
}
export default App;
one.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class One extends Component {
render() {
return (
<div className="App">
<Link to="/two/">oneoneoneone</Link>
</div>
);
}
}
export default One;
two.js
import React, { Component } from 'react';
class Two extends Component {
render() {
return (
<div className="App">
就是这里，开心
</div>
);
}
}
export default Two;
根目录
根目录
url为 /one/ :
one组件
点击one组件跳转到two组件
two组件
网友评论