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.
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/
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:
- In English, http://redux.js.org
- In Chinese, https://github.com/sorrycc/redux-in-chinese
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/
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.
My Blog yuzhouisme.com.
Tome, help students to remember words tome.yuzhouisme.com.