Setup React - Redux app (part 1)

Create structure

mkdir react-redux && cd react-redux
mkdir "src" "public"
mkdir src/constants
mkdir src/components
mkdir src/reducers
mkdir src/containers
mkdir src/actions

touch src/index.js
touch public/index.html
touch public/index.js

Init app & extensions
This will generate package.json

yarn add react react-dom redux react-redux react-router-dom react-router-redux@next redux-thunk react-scripts

public/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello world</title>
  </head>
  <body>
    <div id="page-wrap"></div>
  </body>
</html>

src/index.js

import React from 'react';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory'
import reducers from './reducers';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router'
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerReducer, routerMiddleware } from 'react-router-redux'

import Home from './containers/Home';
import About from './containers/About';

export const history = createHistory()

const middleware = [thunk, routerMiddleware(history)];

const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(...middleware)
)

render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/about-us" component={About} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('page-wrap')
);

src/containers/Home.js

import React, { Component } from 'react'
import { connect } from 'react-redux';

class Home extends Component {
  render() {
    return (
      <div>
        <h2>Welcome!, Something <a href='/about-us'>about us</a></h2>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

export default connect(mapStateToProps)(Home)

src/containers/About.js

import React, { Component } from 'react'
import { connect } from 'react-redux';

class About extends Component {
  render() {
    return (
      <div>
        <h2>About Us page</h2>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

export default connect(mapStateToProps)(About)

Add "Scripts" to package.json
It should look like this

{
  "dependencies": {
    "history": "^4.7.2",
    "npm-run-all": "^4.1.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "^1.1.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start-dev": "react-scripts start"
  }
}

src/reducers/index.js

const reducers = {
}

export default reducers

From terminal, run command to start server

yarn start-dev

Then access http://localhost:3000 and enjoy