搭建一个react项目

搭建一个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