React Redux Simple Starter Kit

This project is a simple starter for developing with react, redux & hot loader.

Simple, Clean, Flexibility and Fast development

It uses an example from redux-example

Demo online

http://redux500.firebaseapp.com/ Demo:

![demo gif][demo] [demo]: https://media.giphy.com/media/l0K4nEi6sb8txzvvG/giphy.gif

About

Using technologies:

• React
• React Router
• React Hot Loader
• Babel for ES6 and ES7 magic
• Webpack for bundling
• style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
• Redux's futuristic Flux implementation
• Redux Dev Tools Extensions for next generation DX (developer experience).
• React-bootstrap Bootstrap component
• Bootstrap-sass import scss to app
• FontAwesome font icons

Installation

git clone https://github.com/thanhtungdp/redux-500api
cd redux-500api
npm install

Running dev server

npm run dev 
(or npm run start)

Default server is running on port 8080. If you want to change, you can edit at configs/webpack_dev.js. Go to: http://localhost:8080

Building production

npm run buid

It generates static file public/bundle.js.

You can run public/index.html

Directory structure

Root
├── app
│   ├── api
│   ├── components
|	├── redux
|	|	├── actions
|	|	├── reducers
|	|	├── actions
|	|	├── containers
|	|	├── Root.js
│   ├── routes
│   ├── stylesheets
│   ├── views
│   ├── App.js
├── configs
|	├── webpack_dev.js
├── public
|	├── index.html
├── package.json
├── server.js
└── webpack.config.js

Import other sass packages

Edit at app/App.js Example:

import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import '../node_modules/font-awesome/scss/font-awesome.scss'
import './stylesheets/style.scss';

Using with react router

You can edit at app/routes/index.js

// Import react
import React from 'react';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';

// Import components
import AppMaster from '../views/AppMaster';
import SearchAppContainer from '../redux/containers/SearchAppContainer';

export default () => {
    return (
        <Route path="/" component={AppMaster}>
            <IndexRoute component={SearchAppContainer}/>
            <Route path="/search(/:search)" component={SearchAppContainer}></Route>
        </Route>
    )
}

Documents

• Awesome Redux
• Redux offical docs
• Redux example es6