wahengchang/react-redux-boilerplate

It is a boilerplate of React-Redux as the infrastructure, which helps to setup a Web APP quickly

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
• Example: Thread upvote/downvote project
• Shared components Storybook $ 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, 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: 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

react-redux-boilerplate's Issues

Images

How would you handle importing images?

warning.js?1096:36 Warning: React attempted to reuse markup in a container but the checksum was invalid.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

Uncaught Error: Cannot find module "react"

Cannot find module react in manager.js

var _react = require('react');

Routing doesn't seem to work with Link

I was trying to use Link from 'react-router-dom' but the routing doesn't work

hello.js

import { Link } from 'react-router-dom'
import style from './Hello.css'

const Hello = ({ onClick, message }) => {
  return (
    <div>
      <Link to="/preload"><h1 className={classNames(style['title'])}>{ message }</h1></Link>
      <button onClick={onClick}>Click</button>
    </div>
  )
}

But the transition just doesn't happen

Could you please help me? Also I was looking at using react-router-redux with history but the updated code wasn't working although I followed the same tutorials as per here https://github.com/reactjs/react-router-redux

Thanks,
Rahul Basu

HMR + auto reload

Hi, i tried to understand this boilerplate. I do install and run using dev mode and make a few change to the file. Its working fine but am i suppose to manually refresh the browser everytime i do a js/css/html code change? HMR alone will only update the component where code is changed, but it doesnt reload automatically right?

Uncaught SyntaxError: Unexpected token <

Problem occurs when running "dev".
I am running win 8.1 so I needed to change scripts to work as follows:
"dev": "set NODE_ENV=development && babel-node ./src/server.js --presets es2015,react,stage-2 ./srcserver.js",

Though I'm not sure if that caused the issue.

can i add eslint for this repo and send a pr?

I'm dealing with it, If you don't mind a pr.

404

does not render anything 404 error