Notice

This project will no longer be updated, in favor of focusing my efforts on the Scalable React Boilerplate and Generator Scalable React. Feel free to keep using it!

Behind the boilerplate

The hardest part about React is getting setup. This project aims to help anyone quickly get bootstrapped with the latest versions of React, Redux, Webpack, etc. It uses Hot Module Reloading and has a few optional add-ons like React Foundation, Redux Form, etc.

It follows best practices, including the AirBnb JS & JSX style guides and uses the FTF (file-type first) organizational pattern.

Scalable / Feature First Boilerplate

If you're looking for something with a bit more features, take a look at the Scalable React Boilerplate project!

Documentation

Getting Started

To try the example application out or to use the project, follow the instructions below.

Clone repo

git clone https://github.com/RyanCCollins/react-redux-simple-starter.git
Install dependencies

npm run setup
Run development server

npm run start

Development server should be running at http://localhost:8080/
Make build

npm run build

File Structure

Some files left out for brevity. Please reference the files in the React Redux Simple Starter project for information about the file structure.

.
├── README.md
├── LICENSE
├── index.html
├── package.json
├── webpack.config.js
├── app/
|   ├── fonts
|   ├── images
|   ├── src
|   |   ├── actions
|   |   ├── components
|   |   |   ├── MyComponent
|   |   |   ├── MyOtherComponent
|   |   |   ├── App.js
|   |   |   ├── Main.js
|   |   |   └── index.js
|   |   ├── containers
|   |   |   ├── MyContainer
|   |   |   └── index.js
|   |   ├── pages
|   |   ├── reducers
|   |   ├── store
|   |   ├── utils
|   |   └── index.js
|   ├── styles
|   └── tests
|   |   ├── actions
|   |   ├── components
|   |   ├── reducers
|   |   └── test_helper.js
├── .eslintignore
├── .eslintrc
├── .gitattributes
└── .gitignore

Scripts

npm run setup

Installs the application's dependencies
npm run test

Runs unit tests
npm run test:watch

Watches for changes to run unit tests
npm run build

Bundles the application
npm run dev

Starts webpack development server
npm run lint

Runs the linter
npm run deploy

Creates the production ready files
npm run clean

Removes the bundled code and the production ready files

Technologies / Libraries

Node - JS runtime environment
npm - package manager
Babel - ES6 transpiler
Webpack - module bundler & task runner
React - interfaces
react-hot-loader - hot reloading for react
react-router - react application router
react-redux - react bindings for redux
react-css-modules - React CSS Modules implement automatic mapping of CSS modules.
react-foundation - Foundation React components, use or don't use.
Immutable - data structures
Redux - awesome flux architecture
Redux Form- works with React Redux to enable an html form in React to use Redux to store all of its state.
redux-thunk - thunk middleware for redux
isomorphic-fetch - API fetch network requests
redux-devtools - redux development tool
SASS - styles
ESLint - linter
Mocha - unit tests
jsdom - vdom to test React without browser
Expect - assertion library
Chai / Immutable - assertion library for Immutable JS
A bunch of useful scripts

Timeline / TODOS

Write README file
Setup Filetype First organization
Add better demonstration of included libraries (run the test application)
Write unit tests and setup folder structure for testing (See tests directory for examples)
Migrate to Feature First file organization as noted in this article and in the React Boilerplate (See here)
Write component tests using Jest and / or Enzyme
Write wiki / other documentation
Implement a Rails like component generator

Acknowledgements

This project is loosely based on: This boilerplate.

Thank you to @mezod for their hard work and inspiration.

RyanCCollins/react-redux-simple-starter