create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6
执行命令如下:
npm install create-react-app -g // 全局安装create-react-app,如果不想全局安装,则不要-g。可能会很慢,可以使用cnpm来安装 create-react-app my-app // my-app是项目名 cd my-app npm start // 启动项目
这里按部就班来执行就行了,没啥可说的。
接下来要说的是react-router 4.x路由配置。
之前是按照react-router 4.x以下版本来配置,结果发现老报错,死活运行不出来,网上查资料一看,坑爹的,原来3.x与4.x路由配置是完全不一样的。
4.x的版本需要安装react-router-dom
准备工作:安装react-router-dom
npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖
(1)、在src文件夹下创建components文件夹,用来存放组件。例如我的是这样的:
其中index.js是路由配置文件。
(2)、在路由配置文件index.js中依次导入要使用的组件以及路由需要使用的组件。如我的配置是这样的:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Link
}from 'react-router-dom';
import './index.css';
import App from './components/App'; // 导入App组件
import About from './components/About'; // 导入About组件
import Inbox from './components/Inbox'; // 导入Inbox组件
import registerServiceWorker from './registerServiceWorker'; export default class Hello extends Component{
render(){
return (
<Router>
<div>
<ul className="nav">
<li><Link to="/">App</Link></li>
<li><Link to="/About">About</Link></li>
<li><Link to="/Inbox">Inbox</Link></li>
</ul>
<hr />
<Route exact path="/" component={App} />
<Route path="/About" component={About} />
<Route path="/Inbox" component={Inbox} />
</div>
</Router>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
registerServiceWorker();
其中exact是用来”/”做唯一的匹配。如果没有这个的话,在匹配其他的同时也会匹配到当前
运行效果如下: