react 搭建一個專案 (高版本)
1、先引用 react.js,redux,react-router 等基本檔案,建議用npm安裝,直接在檔案中引用。
npm install -g create-react-app 全域性安裝(只要不換電腦只安裝一次)
create-react-app 專案名 建立專案
cd 專案 進入專案
npm start 啟動專案
以下是要安裝的所有環境
npm i react react-dom -D
npm i react-router -D
npm i jquery -D
npm i react-router-dom --save-dev (高版本引用)
npm i antd --save 注意一定不要忘了在全域性中匯入css樣式 (引用螞蟻UI, 建議開啟antd官網一步一步進行操作)
2、從 react.js,redux,react-router 中引入所需要的物件和方法。
import React, {Component, PropTypes} from 'react'; import ReactDOM, {render} from 'react-dom'; import {Provider, connect} from 'react-redux'; import {createStore, combineReducers, applyMiddleware} from 'redux'; import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router';
import { BrowserRouter as Router, Router, Link, Redirect ,Switch } from 'react-router-dom'
3、根據需求建立頂層ui元件,每個頂層ui元件對應一個頁面。
4、建立actionCreators和reducers,並用combineReducers將所有的reducer合併成一個大的reduer。利用createStore建立store並引入combineReducers和applyMiddleware。
5、利用connect將actionCreator,reuder和頂層的ui元件進行關聯並返回一個新的元件。
6、利用connect返回的新的元件配合react-router進行路由的部署,返回一個路由元件Router。
7、將Router放入最頂層元件Provider,引入store作為Provider的屬性。
8、呼叫render渲染Provider元件且放入頁面的標籤中。
可以看到頂層的ui元件其實被套了四層元件,Provider,Router,Route,Connect,這四個元件並不會在檢視上改變react,它們只是功能性的。