從零開始創建一個react項目

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

create-react-app myapp

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

cd myapp //進入創建的項目文件夾

yarn start   //啟動項目，或者

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  動畫

使用命令進行安裝

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文件，寫入

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>  
    )
}
19 export default BasicRoute
20 

//在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頁面

//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