React Project collation-data analysis project-build

first, the application framework:

The front end React+ant-d+react-router+react-redux+webpack Two, the project constructs:

Install Create-react-app scaffold, build up the react development environment based on Webpack, and construct the catalogue structure of the first project

Four, the project configuration introduction:

The scripts of the Package.json file,

"Scripts": {

"Start": "Node Scripts/start.js",

"Build": "Node Scripts/build.js",

"Test": "Node Scripts/test.js--env=jsdom"

},

Where *start.js* is the development environment, *BUILD.JS* is the packaged script. v. Framework React+react-redux+react-router2+immutability-helper

The project uses React+antd as the UI library, React-redux as a component communication data processing, React-router Route jump, Immutability-helper create immutable data for updating component data. vi. Framework Construction

1, the first reference react.js,redux,react-router and other basic documents.

2, from the React.js,redux,react-router to introduce the required objects and methods.

Import React from ' react ';
Import Reactdom from ' react-dom ';
Import {Router, Route, Link, Indexroute, browserhistory} from ' react-router ';
Import {Provider} from ' React-redux ';
Import Store from './redux/store/store ';
import registerserviceworker from './registerserviceworker ';
import routeconfig from './routes/index '
Import {Apphistory} from './config/tool '

3. Create store, actions and reducers, and combine all reducer into a large reduer with combinereducers. Use CreateStore to create a store and introduce Combinereducers and Applymiddleware

Import {createstore, combinereducers, Applymiddleware} from ' redux ';
Import * as reducer from '. /reducer/index ';
import thunk from ' redux-thunk ';

Create a redux store to store all the state in the application and have only one store in the application.

var store = CreateStore (
Combinereducers (Reducer),
Applymiddleware (thunk)
);

export default store;

4. Create top-level UI components on demand, each top-level UI component corresponding to one page.

5, connect the Action,reducer and the top-level UI components and return a new component, the container component.

const Mapstatetoprops = (state) => {
Const {Story,currentuser} = state;
return {
StoryDefine:story.storyDefine,
OldStoryDefine:story.oldStoryDefine,
CurrentUserSessionid:currentUser.userMeta,
ShowStoryFullScreen:story.showStoryFullScreen,
ShowGridLine:story.showGridLine
};
};
Export Default (Connect (
Mapstatetoprops,
Mapdispatchtoprops
) (Storyindexcomp));

6, with the new components returned by connect with React-router for the deployment of routing, return a routing component router.

7, the router into the topmost component provider, the introduction of the store as a provider properties.

8, call render render provider component and put in the label of the page

Reactdom.render (
<provider store={store}>
<router History={apphistory} routes={routeconfig}>
</Router>
</Provider>
, document.getElementById (' root '));

Registerserviceworker ();

You can see that the top-level UI components are actually trapped in four-tier components, Provider,router,route,connect, and these four don't make any changes in the view, they're just functional.