從零開始建立一個react項目

1、首先建立一個文件夾，打開終端輸入

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