matrixcloud
3/18/2018 - 2:00 PM

react quick-start

/*
 * Copyright (C) 2017 Shanghai YongXiao Intelligence Co., Ltd.
 */

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
import { createEpicMiddleware } from 'redux-observable'
import createHistory from 'history/createHashHistory'

import router from './router'
import reducers from './reducers'
import epics from './epics'

import './main.less'
import Root from './components/Root'

const epicMiddleware = createEpicMiddleware(epics)

const history = createHistory()
  , store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  applyMiddleware(epicMiddleware, routerMiddleware(history)),
)

const App = (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Root>
        {router}
      </Root>
    </ConnectedRouter>
  </Provider>
)

ReactDOM.render(App, document.getElementById('app'))
npm install react react-dom redux react-redux react-router react-router-dom react-router-redux redux-observable rxjs --save
{
  "name": "console",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "history": "^4.7.2",
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "^3.7.2",
    "redux-observable": "^0.18.0",
    "rxjs": "^5.5.7"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.2",
    "babel-loader": "^7.1.4",
    "babel-plugin-import": "^1.6.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^0.28.10",
    "eslint": "^4.18.2",
    "eslint-loader": "^1.9.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --open",
    "build": "wepack"
  },
  "author": "atom",
  "license": "ISC"
}