Skip to content
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.
JavaScript HTML
Branch: master
Clone or download
Latest commit ca02c43 Mar 25, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example modify index and screenshot.png Mar 24, 2016
src modify index and screenshot.png Mar 24, 2016
static modify index and screenshot.png Mar 24, 2016
.babelrc update project Mar 24, 2016
.editorconfig init project Mar 24, 2016
.eslintrc init project Mar 24, 2016
.gitignore Confirm that the environment there is no problem, install antd and ru… Mar 24, 2016
README.md Update README.md Mar 25, 2016
index.html update project Mar 24, 2016
package.json
webpack.config.js update project Mar 24, 2016

README.md

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.

You can’t perform that action at this time.