├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── scripts
│ ├── actions
│ │ └── index.js
│ ├── components
│ │ ├── App.js
│ │ ├── AppContainer.js
│ │ └── SampleComponent.js
│ ├── index.js
│ └── reducers
│ │ ├── index.js
│ │ └── theme.js
└── styles
│ ├── index.scss
│ ├── reset.scss
│ └── shared.scss
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | .DS_Store
3 | /dist/
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | React/Redux/SaSS/Webpack
2 | =====
3 |
4 | A super bare-bones boilerplate for this super common setup. No server-side code. (Basically, exactly what I personally need 99% of the time.)
5 |
6 | Includes:
7 | - React
8 | - A root component (App) and a sample child component
9 | - Redux
10 | - Basic reducer/action/container setup for one simple method (changing the 'theme')
11 | - SaSS
12 | - Using `.scss` instead of `.sass` for easier transfer in case you want to use vanilla CSS or LESS instead
13 | - Webpack
14 | - Using `babel-loader` for Javascript with ES6 and React presets
15 | - Using `style-loader`, `css-loader`, and `sass-loader` for CSS (looks for `.scss` files)
16 |
17 | Get Started
18 | ------
19 |
20 | ```
21 | $ git clone https://github.com/christinecha/react-redux-sass-boilerplate.git
22 | $ npm install
23 | $ npm start
24 | $ open http://localhost:8080/webpack-dev-server/
25 | ```
26 |
27 | Dependency Versions
28 | ------
29 | Look in `package.json` for dev dependencies.
30 |
31 | ```
32 | "react": "^15.3.2",
33 | "react-dom": "^15.3.2",
34 | "react-redux": "^4.4.5",
35 | "redux": "^3.6.0",
36 | "sass": "^0.5.0"
37 | ```
38 |
39 | Enjoy!
40 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React/Redux/SaSS Boilerplate
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-redux-sass-boilerplate",
3 | "version": "0.0.0",
4 | "description": "A very bare-bones boilerplate repo for [CLIENT-SIDE ONLY] React/Redux apps with SaSS as your CSS precompiler.",
5 | "main": "app.js",
6 | "repository": "https://github.com/christinecha/react-redux-sass-boilerplate",
7 | "scripts": {
8 | "start": "webpack-dev-server --hot --progress",
9 | "build": "webpack",
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "author": "ccha (https://github.com/christinecha)",
13 | "license": "MIT",
14 | "dependencies": {
15 | "react": "^15.3.2",
16 | "react-dom": "^15.3.2",
17 | "react-redux": "^4.4.5",
18 | "redux": "^3.6.0",
19 | "sass": "^0.5.0"
20 | },
21 | "devDependencies": {
22 | "babel-cli": "^6.16.0",
23 | "babel-core": "^6.17.0",
24 | "babel-loader": "^6.2.5",
25 | "babel-preset-es2015": "^6.16.0",
26 | "babel-preset-react": "^6.16.0",
27 | "css-loader": "^0.25.0",
28 | "node-sass": "^3.10.1",
29 | "sass-loader": "^4.0.2",
30 | "style-loader": "^0.13.1",
31 | "webpack": "^1.13.2",
32 | "webpack-dev-server": "^1.16.2"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/scripts/actions/index.js:
--------------------------------------------------------------------------------
1 | export const changeTheme = (theme) => {
2 | return {
3 | type: 'CHANGE_THEME',
4 | theme
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/scripts/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import SampleComponent from './SampleComponent'
4 |
5 |
6 | class App extends React.Component {
7 | constructor(props) {
8 | super(props)
9 | }
10 |
11 | toggleTheme() {
12 | const newTheme = this.props.theme === 'light' ? 'dark' : 'light'
13 | this.props.dispatchThemeChange(newTheme)
14 | }
15 |
16 | render() {
17 | return (
18 |
19 |
This is my app component.
20 | Theme: {this.props.theme}
21 |
24 |
25 |
26 | )
27 | }
28 | }
29 |
30 | export default App
31 |
--------------------------------------------------------------------------------
/src/scripts/components/AppContainer.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { changeTheme } from '../actions'
3 | import App from './App'
4 |
5 | const mapStateToProps = (state) => {
6 | return {
7 | theme: state.theme
8 | }
9 | }
10 |
11 | const mapDispatchToProps = (dispatch) => {
12 | return {
13 | dispatchThemeChange: (theme) => {
14 | dispatch(changeTheme(theme))
15 | }
16 | }
17 | }
18 |
19 | const AppContainer = connect(
20 | mapStateToProps,
21 | mapDispatchToProps
22 | )(App)
23 |
24 | export default AppContainer
25 |
--------------------------------------------------------------------------------
/src/scripts/components/SampleComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class SampleComponent extends React.Component {
4 | constructor(props) {
5 | super(props)
6 | }
7 |
8 | render() {
9 | return (
10 |
11 | This is my sample component.
12 |
13 | )
14 | }
15 | }
16 |
17 | export default SampleComponent
18 |
--------------------------------------------------------------------------------
/src/scripts/index.js:
--------------------------------------------------------------------------------
1 | import '../styles/index.scss'
2 |
3 | import React from 'react'
4 | import ReactDOM from 'react-dom'
5 | import { Provider } from 'react-redux'
6 | import { createStore } from 'redux'
7 |
8 | import reducers from './reducers'
9 | import AppContainer from './components/AppContainer'
10 |
11 | const $app = document.getElementById('app')
12 |
13 | let store = createStore(reducers)
14 |
15 | ReactDOM.render(
16 |
17 |
18 | ,
19 | $app
20 | )
21 |
--------------------------------------------------------------------------------
/src/scripts/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import theme from './theme'
3 |
4 | const reducers = combineReducers({
5 | theme
6 | })
7 |
8 | export default reducers
9 |
--------------------------------------------------------------------------------
/src/scripts/reducers/theme.js:
--------------------------------------------------------------------------------
1 | const theme = (state = 'light', action) => {
2 | switch (action.type) {
3 | case 'CHANGE_THEME':
4 | return action.theme
5 | default:
6 | return state
7 | }
8 | }
9 |
10 | export default theme
11 |
--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import './reset';
2 | @import './shared';
3 |
--------------------------------------------------------------------------------
/src/styles/reset.scss:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body {
7 | min-height: 100vh;
8 | }
9 |
--------------------------------------------------------------------------------
/src/styles/shared.scss:
--------------------------------------------------------------------------------
1 | #app, #main {
2 | width: 100vw;
3 | height: 100vh;
4 | }
5 |
6 | .dark {
7 | background-color: black;
8 | color: white;
9 | }
10 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack')
2 |
3 | module.exports = {
4 | entry: "./src/scripts",
5 | output: {
6 | publicPath: "/dist/scripts/",
7 | path: __dirname + "/dist/scripts",
8 | filename: "bundle.js"
9 | },
10 | module: {
11 | loaders: [
12 | {
13 | test: /\.js$/,
14 | loader: "babel",
15 | exclude: "/node_modules",
16 | query: {
17 | presets: ["es2015", "react"]
18 | }
19 | },
20 | {
21 | test: /\.scss$/,
22 | loaders: ["style", "css", "sass"],
23 | exclude: "/node_modules"
24 | }
25 | ]
26 | }
27 | }
28 |
--------------------------------------------------------------------------------