搭建一个React项目
一、首先创建一个文件夹,打开终端输入
create-react-app myapp
等待项目的生成,项目生成后
cd myapp //进入创建的项目文件夹
yarn start //启动项目,或者
npm start
删除不必要的文件后梳理需要安装那些依赖
1.react-router-dom路由
2.axios
3.js-cookie
4.redux、react-redux状态管理
使用命令进行安装
npm install react-router-dom axios js-cookie redux react-redux -save
安装完成后在index.js逐个引入
import {Provider} from 'react-redux';
import axios from 'axios';
import jsCookie from 'js-cookie';
import store from './store/store.js' //redux需要一个仓库进行存储
React.Component.prototype.$axios = axios;
React.Component.prototype.$cookie = jsCookie;
ReactDOM.render(<Provider store={store}></Provider> ,document.getElementById('root'));
稍后创建store仓库,首先创建路由文件
在src下创建Router.js文件,写入
import React from 'react';
import { BrowserRouter,Route,Switch } from 'react-router-dom'; //BrowserRouter 用来保持UI和URL的同步 Route负责匹配url的ui Switch只渲染一个路由
import Header from ./components/Header //引入一个普通页面
import Page from './pages/page' //引入一个需要路由的页面
const BasicRoute = (props)=>{
return (
<BrowserRouter>
<div className="box">
<Header></Header>
<Switch>
<Route path='/' component={page}></Route>
</Switch>
</div>
</BrowserRouter>
)
}
export default BasicRoute
//在main.js引入Router.js文件
import BasicRoute from './Router.js'
ReactDOM.render(<Provider stoer={store}> <BasicRoute></BasicRoute> </Provider>, document.getElementById('root'));
接着我们创建store仓库,首先在src下创建一个store的文件夹,创建store.js文件写入
import { createStore } from 'redux';
import reducers from './reducers.js'; //用来存放store仓库的逻辑代码和state数据
const store = createStore(reducers);
export defualt store;
创建reducers.js文件
const stateDefualt = {
} //存放数据
const reducers = function(state=stateDefualt,action){
} //用来存放逻辑代码
export defualt reducers;
创建两个文件夹components用来存放主要的组件,pages用来存放路由组件或者子组件,一般创建组件可以创建一个文件夹,里面存放两个文件Index.js和Header.js UI页面
//index.js 用来和redux进行联动
import { connect } from 'react-redux';
import Header from 'Header.js' //引入UI页面
//用来获取redux的state的数据
const mapStateToProps = (state,props)=>({
})
//用来绑定时间修改state数据
const mapDispatchToProps = (dispatch)=>({
})
export default connect(mapStateToProps,mapDispatchToProps)(Header)
//Header.js用来写入UI代码
import React,{Component} from 'react';
class Header extends Component{
constructor(){
super();
this.state = { //定义数据
}
}
render(){
return (
<div>
</div>
)
}
}
export default Header