/react-redux-simple-starter

:star: Best practices boilerplate with just enough to start using React, Redux, React Router, Webpack and Hot Module Reloading, etc.

Primary LanguageJavaScriptMIT LicenseMIT

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!

React Redux Simple Starter Logo

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.

  1. Clone repo

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

  2. Install dependencies

    npm run setup

  3. Run development server

    npm run start

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

  4. 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

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.