Simple Redux Boilerplate
A simple, yet comprehensive React + Redux application, complete with DevTools.
Original Author (forked from: https://github.com/tsaiDavid/simple-redux-boilerplate after 7 month of inactivity): @tsaiDavid | www.davidtsai.codes
Let's make this a community effort! Many thanks for all the great suggestions and help that's already underway!
This is the perfect way to start any React + Redux application - especially if you're looking for a middle-ground. Minimize bulk and overhead - and get the exact amount of tools and configuration necessary to hit the ground running!
With educational comments and documentation sprinkled throughout this app, you'll learn and see how all the pieces come together - from Webpack and Babel all the way through React with Redux.
Designed to keep style/structure as un-opinionated as possible, to offer you - the user - as much creativity and flexibility when it comes to your needs. As this is stil a work-in-progress, do reach out if you have suggestions, fixes, etc! If you want to help, a basic Roadmap can be found below!
This project features a super simple UI - just for you to see how everything is wired up, using the classic counter example:
- React + Redux
- Babel 6 w/ basic presets and transform
- Webpack w/ basic dev and prod configurations
- Express development server; easily roll out a production enabled server of your own
- Eslint w/ basic configs
- Redux DevTools + Logger middleware - easily removable/replaceable based on your needs
node 5.0.0and higher!
- Why another React and Redux boilerplate?
There are tons of great boilerplates out there, some of them with some pretty advanced functionality! But they aren't good for learning the holistic approach of getting a React/Redux app up and running. I wanted to create a boilerplate that would encourage and help the user learn how everything is set up, from Babel and Webpack through conditional requires and giving them the DevTools they need!
- Why not use WebpackDevServer?
devServer.jsis a Node/Express server - mainly because most people will end up creating applications that rely on a Node server! Using the
webpack-hot-middlewareallow us to get syntax errors displayed in an overlay, which using WebpackDevServer doesn't allow for.
- How can I get this thing into production?
I'm currently working on including a guide or walkthrough, but at the moment all you have is a
devServer.js, your first step would probably include creating a separate
server.jsfile and going from there - just be sure to see how the application relies on the NODE_ENV variables to select between "dev" and "prod" files!
- What is this missing?
At the moment, I have not enabled the loading of SASS, but I do plan on it. As your apps grow in size, you might want to consider creating a
utilsdirectory. Lastly, be sure to follow @gaeron's tips on reducer composition!
To begin, fork this repo and then clone those contents down!
Ideally, fork this boilerplate, then clone.
$ git clone https://github.com/YOUR_GITHUB_USERNAME_HERE/simple-redux-boilerplate.git
Install required dependencies. (Did you make sure you have the right version of Node?)
Run development server, complete with DevTools and related configuration.
npm run dev
You're now ready to get working! (enter command or visit via browser directly)
Next Steps & Other Notes:
Now that your development server is up and running, you will see that you have your Redux DevTools available for you to use. The keyboard shortcuts available follow the generally accepted config - but you're free to make changes to them here:
To toggle the DevTool panel during development: CTRL + H
Change the DevTool panel's position during development: CTRL + Q
- Base boilerplate design off of "react-transform-boilerplate"
- Begin work on a complementary Yeoman generated package
- Implement Redux
- Implement Redux DevTools
- Optional Redux Logger Middleware is included (pop open console to see logging)
- Conditional require statements of
Root.js- based on whether user is in development or production environments
- Clean up Redux actions, reducers, constants
- Add basic styles and enable webpack compilation of CSS/SASS
- Provide additional documentation and example of pushing to production
Code style can be a tricky subject - I've instead decided to rely on the ever trustworthy configurations that AirBnb follows!
This project relies on
Learn more here: AirBnb Style Guide
- @yilenpan | worked on react-router-redux!
This project supports Babel 6, with reference implementations of:
babel-plugin-react-transform. It can be used as a boilerplate for quickly getting a new project up and running with a few useful transforms:
- react-transform-hmr - enables hot reloading react components
- react-transform-catch-errors - catches errors inside
For convenience they are packed in a single preset called react-transform-hmre but you can make your own.