Skip to content

yuzhouisme/react-antd-redux-router-starter

Repository files navigation

react-antd-redux-router-starter

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

NPM version

Ant Design

Screenshot

Screenshot

Getting started

1.Clone this repo.

2.Modify something in package.json like name to "your-project-name".

3.Run npm install.

$ npm install

4.Run development server.

$ npm run dev

5.Open your browser to http://localhost:8001/

Explanation (I think it's important to beginner)

1.To know the directory structure.

$ tree . -L 2
.
├── README.md
├── index.html
├── node_modules
├── package.json
├── src
│   ├── actions // for redux action
│   ├── common
│   ├── component // dumb component
│   ├── constants // for constants
│   ├── container // smart component
│   ├── data
│   ├── entry // root entrance, a lot of config in it
│   ├── reducers // for redux reducer
│   └── store
├── static
│   ├── assets
│   ├── css
│   ├── img
│   └── js
└── webpack.config.js // add config brfs

2.The whole entrance is index.jsx. I try to describe clearly why import that.

// redux-devtools
import { createDevTools, persistState } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
// react
import React from 'react';
import { render } from 'react-dom';
// router
import { Router, Route, hashHistory, browserHistory, IndexRoute } from 'react-router';
// redux
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
const loggerMiddleware = createLogger()

import { Provider } from 'react-redux';
import { syncHistory } from 'react-router-redux';
// reducers
import reducer from '../reducers';

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
);
// top entry
import App from '../component/App';
import Admin from '../component/Admin';

// Sync dispatched route actions to the history
const reduxRouterMiddleware = syncHistory(browserHistory);
const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore);


const enhancer = compose(
  applyMiddleware(
    thunkMiddleware,
    loggerMiddleware
  ),
  DevTools.instrument(),
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&]+)\b/
    )
  )
);

const store = createStore(
  reducer,
  enhancer
)
// Required for replaying actions from devtools to work
reduxRouterMiddleware.listenForReplays(store)

const routes = {
  path: '/',
  component: App,
  childRoutes: [
    {
      path: 'admin',
      component: Admin
    },
    {
      path: '*',
      component: App
    }
  ]
};

3.Redux, read doc more and clear the connection between actions-reducers-container-component.

More Redux:

Install environment and test (important)

1.Make sure you have install nodejs.

$ npm -v
3.5.2

2.Then install antd-init in the global.

$ npm i antd-init -g
...
$ antd-init -v
0.6.3

3.New your project.

$ mkdir <your-project-name> && cd <your-project-name>
$ antd-init
...

4.Run development server.

$ npm run dev

More usage: http://ant-tool.github.io/

Inspiration

Thanks to ant-design group for providing the UI components for developers. And I began to learn react in December last year, in work I am a mobile application developer as android/iOS platform, so I am a freshman. I sent many emails to yiming he who in ant-design group, thanks to him once again.

Write in react and antd I used

My Blog yuzhouisme.com.

Tome, help students to remember words tome.yuzhouisme.com.

About

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published