Hi reader! This is the sequel to my previous post:

React headstart for busy people

Guido Vizoso ・ May 26 '18

#react #boilerplate #javascript #webdev

Motivation

It started as a way to simplify my development process but I figured out it's time to publish and document what I do so... Here we are!

Content

This boilerplate has what I consider the minimun structure for any react-redux application: Wepack, Babel, React, Redux, Styled Components and ESlint.
Github repo: https://github.com/guidovizoso/react-redux-boilerplate

How to use it

Installing:

git clone https://github.com/guidovizoso/react-redux-boilerplate.git
npm install

Commands:

npm run dev /* Runs webpack dev server and live reloading */
npm run start /* Runs webpack in production mode with optimizations */

Done!

Folder structure

├── src
│   ├── index.js // Renders everything
│   ├── App.jsx // Main component
│   ├── store.js // Redux store generator
│   ├── components // Pretty much explains itself
│   ├── actions // Dispatch executers
│   ├── reducers // Redux Reducers
│   └── assets // Images and stuff goes here
├── dist // Compiled files goes here
├── package.json
├── .babelrc
├── .eslintrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── .gitignore

Issues

If you're using this boilerplate and encounter any issue, please let me know!
https://github.com/guidovizoso/react-redux-boilerplate/isues

Future posts

React & Redux have a steep learning curve, that's for sure. If you want a tutorial about that just comment it out. Have a great day!