1. 程式人生 > >react 搭建一個專案 (高版本)

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,它們只是功能性的。