https://github.com/wahengchang/react-redux-boilerplate
It is a boilerplate of React-Redux as the infrastructure, which helps to setup a Web APP quickly
https://github.com/wahengchang/react-redux-boilerplate
boilerplate createstore example helloworld infrastructure isomorphic react redux tutorial universal
Last synced: 8 months ago
JSON representation
It is a boilerplate of React-Redux as the infrastructure, which helps to setup a Web APP quickly
- Host: GitHub
- URL: https://github.com/wahengchang/react-redux-boilerplate
- Owner: wahengchang
- License: mit
- Created: 2017-04-04T02:33:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-06T03:13:45.000Z (about 8 years ago)
- Last Synced: 2025-03-22T01:38:18.267Z (9 months ago)
- Topics: boilerplate, createstore, example, helloworld, infrastructure, isomorphic, react, redux, tutorial, universal
- Language: JavaScript
- Size: 66.4 KB
- Stars: 110
- Watchers: 11
- Forks: 27
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-redux-boilerplate
- It is React-Redux as infrastructure boilerplate, with this developers just focus on developing component, action creator and reducer, without spending time in router, dev/pro build enviroement, wiring up file and express as HTTP server.
## Read more
- [Example: Adding new page](https://github.com/wahengchang/react-redux-boilerplate/wiki/Add-new-page)
- [Example: Thread upvote/downvote project](https://github.com/wahengchang/react-redux-boilerplate-example)
- [Shared components Storybook](https://github.com/wahengchang/react-redux-boilerplate/tree/master/src/components) `$ npm run storybook`
- EditableDiv
- Loading icon
## Install
```
$ git clone https://github.com/wahengchang/react-redux-boilerplate
$ npm install
```
## Run (Develop Mode)
It is runnign in Development mode, enable HMR
- http://localhost:3000/
- http://localhost:3000/api , example of fetching data by action, and dispatch to update UI component
- http://localhost:3000/preload , example of fetch data from [here](https://jsonplaceholder.typicode.com/posts
), before server rendering components
```
$ npm run dev
open http://localhost:3000/
```
## Run (Production Mode)
- Compiling react/redux script to browser use lib, with webpack default optimized config.
- Disable unnecessary funtionality which helps to debug in development mode
```
$ npm run build
$ node dist/server.js
```
## lint
#### lint fix
```
$ npm run lint:fix
```
#### lint check
```
$ npm run lint
```
## Storybook
```
$ npm run storybook
```
## Test
[More detail](https://github.com/wahengchang/react-redux-boilerplate/wiki/Test ): about test of action creater, component, container and reducer
```
$ npm run test
Test Suites: 4 passed, 4 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 1.824s, estimated 2s
```
or watch mode
```
$ npm run test:watch
```
# Server Rendering Structure
Above is the structure of how the whole app works, the app bases on Express web framework, which serves only one route, with res.sendFile function to put index.html into the browser. Inside the scoop of the structure, what we are interested is the blue box, the interaction between react component, redux, root component, store and reducer.
# Shared Components
# React-Redux Structure
_**index.js**_ , as the entry file and a high level root component, which gathers all the sub-component as the subtree of the Virtual DOM, also it is the only file entangled with many independent modules. Apart from it, different file requires independent modules, which makes clean code and work independently.
## Credit
- [https://github.com/vaibhavmule/react-redux-helloworld](https://github.com/vaibhavmule/react-redux-helloworld)