React, Redux & Sass Starter
A simple and quick way to get you going with developing React applications with Redux and Sass.
For a complex example with Async actions, take a look at: react-weather-forecast
🔩 Styles 🎨 Action! 🎬
With all necessary tools in place, all you need to do is start creating React Components, style them and optionally use Redux for the State management. It is recommended that you use Redux if the applications you are building require interactions between multiple components or that requires pulling data from external source.
All the required code (JS + Sass) goes inside the
src folder. Webpack will compile, bundle and output in the
public folder, which you can upload/deploy to the root directory of your web server to publish your app!
git clone cd React-Redux-Sass-Starter npm i
Start the dev server:
npm run start:dev
npm run build
- Changes made to your CSS / JS triggers a full page auto-reload.
- Running a build writes the
Pre-configured tools and plugins
- Module bundler: Webpack
- ES6 Transpiler: babel-loader
- Linting: eslint
- JS Uglification: UglifyJsPlugin
- Dev Server: webpack-dev-server (
npm run start:dev)
/ ├─ public/ | ├─ dist/ | | ├─ bundle.css # CSS that's generated from SASS | | ├─ bundle.js # Contains scripts of components & vendor(s). | ├─ index.html # Contains root element to mount your app. └─ src/ ├─ actions/ # Create actions here. | ├─ counterActions.js ├─ components/ # Create components here | ├─ Controls.js | ├─ Counter.js |─ containers/ # Containers bridge Components with the State. | ├─ Controls.js | ├─ Counter.js ├─ constants/ # Define action types here. | ├─ ActionTypes.js ├─ reducers/ # Create reducers here. | ├─ counter.js | ├─ index.js # Combine your reducers here. ├─ styles/ # All styling goes here. | ├─ main.scss ├─ App.js # Include your main component(s). ├─ index.js # Passes state to App. Renders markup to DOM. └─ store.js # Creates and exports store.
Sass - Sass Guide
The MIT License (MIT)
MIT © 2017 Santhosh Sundar