安装脚手架步骤
按这个步骤走下去:
-
npm install -g create-react-app
-
create-react-app my-app
使用命令创建应用,myapp为项目名称
-
cd my-app
进入目录,然后就启动
-
npm start
配置文件
npm run eject 导出配置文件 //将所有的配置文件和 package.json 依赖库解压到应用所在的路径方便我们进行一些小改动 (执行完文件中会多了一个config文件,在里面的webpack.config.dev.js文件配置我们平时所需的一些用到的功能,例如:less、sass等)
依赖包文件 (package.json)
使用命令 npm i 可以下载 文件里面依赖所有对应的包
下载新的包时,可以 可以加上 --save--dev 下载相关的依赖到 这个文件
下一步,除了src里面的index.js 其他的删除,再建好文件夹,开始配路由。
路由配置
模板参考:
在src里面新建一个router文件里面里面建一个index.js 来管理所要配置的路由。 如下:
import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import login from "../login/login";
import home from "../home/home";
export default class RouteConfig extends Component{
render(){
return(
<HashRouter>
<Switch>
<Route path="/" exact component={login} />
<Route path='/home' component={home}/>
<Redirect to="/" />
</Switch>
</HashRouter>
)
}
}
再在外层的index.js 引用配置好的路由文件导入index.html。如下:
import React from 'react';
import ReactDOM from 'react-dom';
import Fff from "./router"; (注意,会默认取router文件夹下面的index.js)
ReactDOM.render(< Fff />, document.getElementById('root'));