react 腳手架 及路由和 redux

　　前提是咱們須要下載 nodejs 

　　使用 npm 下載 react 的腳手架，react-router-dom，redux

　　　　全局下載 react 的腳手架：npm i create-react-app -g

　　　　使用 react 腳手架建立一個 app 的項目：create-react-app app   

　　　　根據指令進入 app 項目： cd app

　　　　下載 react 的路由插件：npm i react-router-dom -S

　　　　組件通訊的優化： npm i redux -S

　　以上即是把咱們的 react 的腳手架配置完了

　　接下來咱們來看看他的結構：

　　　　src 下面的目錄，並且若是咱們向引入本地圖片的話，只能放在 src 下面的目錄，經過 import 來引入圖片到組件，而後使用 src={} 的方法引用

　　　　咱們的組件都是 .js 的文件

　　　　src 下面的目錄介紹

　　　　　　App.css：是全部組件的樣式 （咱們也能夠專門寫 組件的 css 文件，經過 import 來引入到組件裏面就能夠了）

　　　　　　Index.css：是整個網頁的全局樣式 

　　　　　　App.js：是最大的組件

　　　　　　Index.js：是出口文件

　　　　　　每一個組件都須要使用 import React from 'react'; （必須的）

　　react-router-dom 的使用

　　　　他裏面提供了不少的組件標籤，供咱們使用

　　　　咱們是在 App.js 中寫了一個 小demo ，基本實現了 路由的跳轉，剩下的思想也差不了不少

　　　　由於咱們 react-router-dom 裏面有不少的組件，因此咱們只能經過這中方法引入

　　　　

　　　　使用

　　　　　

　　下面是每一個組件對應的功能

　　　　<BrowserRouter> history
　　　　<HashRouter> hash
　　　　<Route> 路由
　　　　<Redirect> 重定向
　　　　<Link> 鏈接
　　　　<NavLink> 導航鏈接
　　　　<Switch> 切換
　　　　history 的 push
　　　　match 函數
　　　　withRouter 函數

　　redux 的使用

　　　　因爲這個比較繞，但願你們能夠多看幾遍

　　　　app.js

　　　　

 

 　　index.js

　　　　

 

 　　store 的邏輯

　　　　

 

 　　actions.js

　　　　

 

 　　actions-type.js

　　　　

 

 　　reducer.js

　　　　

 

 　　store.js

　　　　

 

 　　這樣 redux 的功能就能夠初步使用了