从零开始创建一个react项目

一、首先创建一个文件夹，打开终端输入

1 create-react-app myapp

等待项目的生成，项目生成后

1 cd myapp //进入创建的项目文件夹
2 
3 yarn start   //启动项目，或者
4 
5 npm start

删除不必要的文件后梳理需要安装那些依赖

1.react-router-dom路由

2.axios

3.js-cookie

4.redux、react-redux状态管理

5.swiper 轮播图插件

6.node-sass sass-loader sass编译

7.react-transition-group 动画

使用命令进行安装

1 cnpm i react-router-dom axios js-cookie redux react-redux swiper node-sass sass-loader react-transition-group -D

安装完成后在main.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文件，写入

 1 import React from 'react';
 2 import { BrowserRouter,Route,Switch } from 'react-router-dom'; //BrowserRouter 用来保持UI和URL的同步   Route负责匹配url的ui Switch只渲染一个路由
 3 
 4 import Header from ./components/Header     //引入一个普通页面
 5 import Page from './pages/page'    //引入一个需要路由的页面
 6 
 7 const BasicRoute = (props)=>{
 8     return (
 9        <BrowserRouter>
10             <div className="box">
11             <Header></Header>
12                  <Switch>
13                      <Route path='/' component={page}></Route>
14                  </Switch>
15             </div>  
16        </BrowserRouter>  
17     )
18 }
19 export default BasicRoute
20 

21//在main.js引入Router.js文件
22 import BasicRoute from './Router.js'
23 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页面

 1 //index.js  用来和redux进行联动
 2 import { connect } from 'react-redux';
 3 import Header from 'Header.js'   //引入UI页面
 4 
 5 //用来获取redux的state的数据
 6 const mapStateToProps = (state,props)=>({
 7     
 8 })
 9 
10 //用来绑定时间修改state数据
11 const mapDispatchToProps = (dispatch)=>({
12 
13 })
14 
15 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