pmantaj/react-starter

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 lint	Lint all .js files.
npm run test	Runs unit tests with Karma

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

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

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.

⬆️