git clone https://github.com/xphong/simple-react-redux-starter.git

Dependencies

Install Node: https://nodejs.org/en/

Install required dependencies:

npm install yarn -g
yarn

Current versions at time of creation:

• Node v6.9.1
• NPM v4.0.2

Scripts

• Run development server (localhost:3000): npm run dev
• Run production server (localhost:3000): npm run prod
• Deploy production build (into /dist folder): npm run build
  • Creates a bundle.js and bundle.js.mapfile
  • Copy the /index.html into the root directory on the server and the bundle.js and bundle.js.map file into /static directory on the server

├── README.md
├── index.html
├── package.json
├── server.js
├── webpack.config.dev.js
├── webpack.config.prod.js
├── yarn.lock
├── src/
|   ├── actions
|   |   ├── CountriesActions.js
|   ├── components
|   |   ├── Countries.js
|   |   ├── Country.js
|   |   ├── Navbar.js
|   |   └── Spinner.js
|   ├── constants
|   |   └── ActionTypes.js
|   ├── containers
|   |   ├── About.js
|   |   ├── App.js
|   |   ├── Countries.js
|   |   └── DevTools.js
|   ├── reducers
|   |   ├── countries.js
|   |   └── index.js
|   ├── store
|   |   ├── configureStore.dev.js
|   |   ├── configureStore.prod.js
|   |   └── configureStore.js
|   ├── styles
|   |   └── main.scss
|   ├── index.js
|   ├── routes.js
├── .babelrc
├── .eslintignore
├── .eslintrc
└── .gitignore

Technologies

• Babel ES2015/ES6 v6.3.15
• React v15.3.1
  • Redux v4.1.1
  • React Router v3.0.0
  • React Router Redux v4.0.6
  • Redux Thunk Middleware v2.1.0
  • Redux Logger v2.4.0
  • Redux Dev Tools v3.01
• Webpack v1.2.12
• Axios v0.14.0
• Bootstrap w/ Sass
• Yarn

Technologies Overview

React

React is a a JavaScript library for building user interfaces.

More information: https://facebook.github.io/react

Redux

Redux is a predictable state container for JavaScript apps. Redux architecture evolves the ideas of Flux and revolves around a strict unidirectional data flow.

More information: http://redux.js.org/

Flux data flow:

Redux data flow:

ECMAScript 2015 / ES6

ECMAScript 2015 is an ECMAScript standard that was ratified in June 2015. Babel is a compiler that transforms your ES2015 code into JavaScript so that the browser can read it.

More information: http://babeljs.io/

Webpack

Webpack is a module bundler which compacts your JavaScript files into separate modules allowing module loading throughout your application.

More information: http://webpack.github.io/docs/what-is-webpack.html

Yarn

Yarn is a dependency manager built on top of npm allowing for consistent and reliable versioning using a lockfile.

More information: https://yarnpkg.com/

React Router

React Router handles the routing, keeping your UI in sync with the URL.

More information: https://github.com/ReactTraining/react-router

This starter currently uses hashHistory to bypass configuring a server to get the application up and running. However, if you do have a server, it is recommended to use browserHistory for cleaner URLs and support for server-side rendering.

More information on React Router’s history: https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md

Redux Dev Tools

Redux Dev Tools is a development environment tool that aids in helping with the Redux workflow. Redux dev tools allows developers to inspect every state and action, in addition to “time-traveling” by going back and cancelling actions.