React, Redux & Sass Starter
A simple and quick way to get you going with developing React applications with Redux and Sass.
Comes with pre-configured Webpack for bundling your application to help save time in setting up your project. Keeps CSS out of JavaScript to maintain separation of concerns. Redux takes care of State Management. If you are looking for CSS-in-JS approach, this starter pack is not for you.
Demo: https://www.gigacore.in/demos/react-redux-demo/
For a complex example with Async actions, take a look at: react-weather-forecast
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 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!
Get started!
git clone
cd React-Redux-Sass-Starter
npm i
Start the dev server:
npm run start:dev
Build:
npm run build
Note:
- Changes made to your CSS / JS triggers a full page auto-reload.
- Running a build writes the
bundle.jsandbundle.cssto the/public/dist/directory.
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)
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
|─ 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.
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
-
Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用sass预处理css，单元测试，代码覆盖率报告，代码分割等等更多。 这个项目最主要的目的是尽可能果断的保留。目的不是要你一定按照这个结构去完成你的项目，谐在使前端开发更健壮，更简单还有最重要的
-
前些日子刚学习了React，觉得很不错，很符合我的逻辑。于是还没弄明白，就迫不及待的开始了一个中型项目(我觉得）（其实是项目需要赶紧开始，没时间了...咳咳）。期间不出所料地遇到了很多坑和问题，也得到了很多收获，特开几篇文章记录下来。 概述 本文是《使用React技术栈的一些收获》系列文章的第一篇，介绍了项目是如何架构的。 具体技术栈 项目技术栈使用的是React全家桶：React+redux+r
-
React 示例项目 · 简易留言板 + 待办事项（Github 地址） 写在前面 一直以来，我都相当纳闷：为什么 React 的那些 starter kit 都构建得那么恶心？ 能不能像 Vue Cli 生成的项目架构般优雅？说干就干，本项目就改自 Vue Demo § 技术栈 详情可参阅 package.json React 15.3.0 Redux React Router Ajax 请求库
-
技术资料 官方权威 React【React官方学习文档·英文】 React-中文文档【React官方学习文档·中文 中国程序员的福利】 React github【React Github地址】 ReactNative【ReactNative Github地址】 react-router【React 路由框架 Github地址】 Redux 【Redux Github地址+附带学习Example】
-
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译](https://segmentfault.com/a/1190000005757189?utm_source=tuicool&utm_medium=referral) * [Lean React](h
-
Live redux-react-starter This repository contains the minimal app to get started with redux, react, hot-reloading, async function and some other great stuffs. How to yarn 0.18+ must be present on your
-
目录 为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 为何组件频繁的重新渲染？ 怎样使 mapStateToProps 执行更快？ 为何不在被连接的组件中使用 this.props.dispatch ？ 应该只连接到顶层组件吗，或者可以在组件树中连接到不同组件吗？ React Redux 为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 目前来看，
-
React-babel-webpack-es6 Starter Project A boilerplate using React, webpack and hot module reloading, and ES6 + JSX via Babel.You could use it as a base to build your own web app. Features The provided
-
DEPRECATED. This project is not maintained anymore. Starter for Express, React, Redux, SCSS applications Features Webpack development and production environment configuration Webpack SCSS configuratio
-
Universal React Redux Boilerplate A universal React/Redux boilerplate with sensible defaults. Out of the box, thisboilerplate comes with: Server-side rendering with Express Code splitting with dynamic
-
React-Redux-Enterprise A React-Redux boilerplate for enterprise web applications. Before you start with this boilerplate, please take a few minutes to read this article and see if you really need this