I started this project to learn tools like React, Redux, Webpack, babeljs.io, ES6/ES2015... I did it mainly for fun. And then I used it as Boilerplate for my React|Redux projects. So don't worry it works :p. It's not perfect but it works :).
If you are interested about isomorphic/universal rendering, you should take a look at this repo: React Redux Universal Boilerplate.
Enjoy it! :)
Node
^5.0.0
Gulp is used to manage icons. I do not use it as builder, so it is not mandatory.
Mongodb is useful if you want used a database. In this project I used a fake API.
$ git clone git@github.com:kiki-le-singe/react-redux-boilerplate.git
$ cd react-redux-boilerplate
$ npm install
$ npm start
Starts up koa server to serve your app at localhost:8080
. HMR will be enabled in development.
$ npm run compile
It does some optimizations and Compiles the application, for the production, to disk (~/dist
by default).
$ npm run dev:debug
Same as npm start
, but displays the redux devtools.
$ npm run dev:quiet
Same as npm start
, but displays no webpack informations in the terminal.
$ npm run dev:stub
Same as npm start
, but in stub mode.
$ npm run test
Soon...
$ npm run deploy
Cleans the dist
folder previously created and compiles your application to disk, then serves the app in production mode on localhost:3000
.
$ npm run prod
Starts up koa server to serve your app at localhost:8080
.
$ npm run lint
Lint all .js
files.
$ npm run styleguide
Build style guides to disk ~/styleguide
and ~/build_styleguide
. The build_styleguide
dir is only generated to get the css styles of project. This allow to use them in the style guide.
See
~/webpack/styleguide.config.js
.
$ node server app.production.js
Serves the app in production mode on localhost:3000
.
Don't forget to run
npm run deploy
before.
$ gulp iconify
See 'A mystical CSS icon solution', grunticon-like build system..
Basic project configuration is in ~/config/index.js
.
└── __tests__ # Unit tests (Soon...)
├── config # Project configuration settings (Server, Webpack, ...)
├── gulp # Gulp configuration tasks
├── server # Koa application (uses webpack middleware)
│ └── server.dev.js # Server dev application
│ └── server.production.js # Server prod application
├── src # Application source code
│ ├── assets # Static assets
│ ├── components # Generic React Components
│ ├── config # Project configuration settings (api, ...)
│ ├── containers # Root components (Redux Provider, Router, DevTools, ...)
│ ├── layouts # Components page structure
│ ├── redux # Redux actions|constants|middleware|reducers|store
│ ├── routes # Application route definitions
│ ├── services # All kinds of services (Email, User, ...)
│ ├── styles # Application-wide styles
│ └── index.js # Application bootstrap and rendering
├── styleguide # Application style guides
├── webpack # Environment-specific configuration files for webpack
The webpack compiler configuration is located to the root:
~/webpack/dev.config.js
Webpack configuration for the development mode.
~/webpack/prod.config.js
Webpack configuration for the production mode.
~/webpack/styleguide.config.js
Webpack configuration to build assets for the style guides.
You can also see the ~/.babelrc
configuration file.
These default to:
[
'react',
'react-router',
'redux',
'lodash',
'classnames',
'superagent'
]
These are global variables available to you anywhere in your source code. They can be found in ~/config/index.js
.
new webpack.DefinePlugin({
__CLIENT__: projectConfig.__CLIENT__,
__SERVER__: projectConfig.__SERVER__,
__DEV__: projectConfig.__DEV__,
__PROD__: projectConfig.__PROD__,
__DEBUG__: projectConfig.__DEBUG__
})
You can use .css
file extensions using the latest CSS syntax with PostCSS-cssnext
. See the ~/src/styles
directory. mdcss
is used to generate a style guide of the application, you can see both the repository and the official documentation.
By default the root access for the API is http://localhost:8080/api. Available example: http://localhost:8080/api/tools
- React Getting Started
- React tutorial
- React Router
- React Router Tutorial
- Upgrade Guide
- Redux
- Redux Middleware
- Redux applyMiddleware
- Understanding Redux Middleware
- react-transform-boilerplate
- react-redux-starter-kit
- React Webpack Cookbook
- Webpack
- Airbnb React/JSX Style Guide
If you use MongoDB, look at this node modules. It's an convenient admin interface for MongoDB.
Allows you to inspect the React component hierarchy.
Highlight React components on the page.
Contexts allow to pass values through a tree without having to use props.
In React's class model you'll have to explicitly use .bind(this) or arrow functions =>. See also Can't get
this.prop
when use ES6 classes in React and Why this.setState is undefined in React ES6 class?