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