JavaScript CSS HTML
Switch branches/tags
Nothing to show
Latest commit 6b71894 Jan 18, 2018 @Gigacore Gigacore linting + cleanup
Permalink
Failed to load latest commit information.
public linting + cleanup Jan 18, 2018
src removed private declaration pattern Jan 17, 2018
.eslintrc linting + cleanup Jan 16, 2018
.gitignore initia commit Dec 13, 2017
LICENSE Initial commit Dec 13, 2017
README.md documentation update Jan 15, 2018
package-lock.json eslint support Jan 15, 2018
package.json eslint support Jan 15, 2018
webpack.config.js linting + cleanup Jan 18, 2018

README.md

logos

React, Redux & Sass Starter

A simple and quick way to get you going with developing React applications with Redux and Sass for styling.

Comes with pre-configured Webpack for bundling your application to help save time in setting up your project. While Redux takes care of State Management, this starter kit keeps CSS out of JavaScript to maintain separation of concerns.

Demo: https://www.gigacore.in/demos/react-redux-demo/

Components πŸ”© 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 to use Redux if you are building applications that 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!

Pre-configured tools and plugins

Codebase overview.

/
β”œβ”€ 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
   β”œβ”€ 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.

Get it runnin'!

  • git clone
  • cd React-Redux-Sass-Starter
  • npm i
  • npm start

Learn

This starter kit assumes, you are familiar with JavaScript (ES6). If you are new to this stack, here are some resources to help you get started with:

React - Quick Start | Start Learning React | React in 8-minutes

Redux - Basics | An Introduction | React with Redux

Sass - Sass Guide

The MIT License (MIT)

MIT Β© 2017 Santhosh Sundar