React Starter

🌟 React Starter Kit is a boilerplate which helps you build fast and efficient web apps or sites. This is a good place to start your project, or any other project what you need to develop. The boilerplate is built on top of Node.js, React and Redux. For a development process the Starter Kit uses modern web development tools such as Webpack, Babel and React Hot Loader. The boilerplate contains full stack modern modules and wonderful tools such as redux-cli which can generate snippets of components, containers, react-forms and tests.
👀 If you are not familiar with React and Redux you can analyse a demo application which is included in the Starter Kit.

Features | Usage | Structure | Deployment | Redux Generation | Contributing | License

Features

• react
• redux
• react Fontawsome
• bootstrap-loader (configurable with .bootstraprc)
• Sass modules (sass-loader css-loader style-loader)
• redux-logger
• react-document-meta
• redux-form
• redux-cli
• redux thunk
• react router
• babeljs
• eslint
• karma
• mocha

Usage

Command	Description
npm run start	Start server on localhost:3000
npm run clean	Clean dist directory.
npm run build	Compiles the application to disk (~/dist by default).
npm run build:production	Same as npm run clean & npm run build
npm run doc	Generate project documentation.
npm run lint	Lint all .js files.
npm run test	Runs unit tests with Karma
npm run test:bdd:dev	Runs BDD tests with Nightwatch.js using current state app. in dist directory
npm run test:bdd:production	Compile the application and run Nighwatch.js BDD tests
npm run test:bdd:ci	Compile the application and run Nighwatch.js BDD tests - dedicated for CI env

Structure

The folder structure provided is only meant to serve as a guide, it is by no means prescriptive. It is something that has worked very well for me and my team, but use only what makes sense to you.

.
├── bin                      # Start server
├── blueprints               # Blueprint files for redux-cli
├── src                      # Application source code
│   ├── components           # Generic React Components
│   ├── containers           # Components that provide context
│   ├── forms                # Components include forms
│   ├── redux                # Redux-specific pieces
│   │   ├── modules          # Collections of reducers/actions
│   │   └── utils            # Redux helpers
│   ├── utils                # Helper files
│   ├── routes.js            # Application route definitions
│   └── index.js             # Root application file
├── webpack                  # Webpack configuration file
└── tests                    # Unit tests files
     └── features            # BDD tests files   

Redux-Generation

To automation create new component boilerplate contain redux-cli. A Greate tool which accelerates build process application based on ready to use templates.

Command	Description
redux-generation dumb	Generates a redux duck
redux-generation smart	Generates a smart (container) component
redux-generation duck	Generates a redux duck
redux-generation form	Generates a connected redux-form form component

Deployment

$ npm run build

Compile application files into the 'dist' folder

$ npm run build:production

clean the dist folder and rebuilds the app

Run unit tests

$ npm test

Run BDD tests

$ npm run test:bdd:production

Generate documentation.

Output is stored in esdocs directory

$ npm run doc

Origin

This project was built based on the redux-easy-boilerplate created by anorudes.

Contributing

See CONTRIBUTING

License

The Starter Kit is available as open source under the terms of the MIT License.

⬆️