react-redux-boilerplate

> Containing modern web development tools such as Webpack, React Hot Loader, React Router, Dynamic routing, Redux, Redux simple router, Babel, sass, autoprefixer, BrowserSync, Tinypng...

Directory Layout:

├── /app/                       # The source code of the application
│   ├── /actions/            	# Redux action creators
│   ├── /components/            # Generic React Components (generally Dumb components)
│   ├── /constants/            	# Constants (action types etc.)
│   ├── /containers/            # Components that provide context (e.g. Redux Provider)
│   ├── /public/            	# Static files which are copied into the /dist/ root folder
│   ├── /reducers/            	# Redux reducers
│   ├── /routes/            	# Application route definitions
│   ├── /store/            	    # Redux store configuration
│   ├── /tmpl/               	# Static content (plain HTML or Markdown)
│   ├── /utils/            		# Generic utilities
│   ├── index.js            	# Application bootstrap and rendering
│
├── /build/                     # The folder for compiled output
├── /dist/                      # The folder for deploy output
├── /node_modules/              # 3rd-party libraries and utilities
├── webpack.config.js           # configuration file for webpack
├── package.json                # The list of 3rd party libraries and utilities

Packages Install

``` $ npm install ```

Usage

Dev:

$ npm run dev

Browser sync:

$ npm run browsersync

Deploy:

$ npm run deploy

Image compress:

PNG:

``` $ npm run tinypng ``` > hint: png compress is using tinypng service, make sure you change the above api to your owns. > Get api: https://tinypng.com/developers (free 500 images/month. ) > after you get the api, run: > $ tinypng -k I_KC7xGPxXfZPrEbrc-kXWBetAQ323rz

JPEG:

``` fot now, I'm still using jpegmini, this is the best tools to compress the jpeg images that I discovered so far. even though the jpegmini app is so simple to use it(just simple drag&drop), but I will consider to integrate this super tool into webpack. Still researching... ```

Hints:

why not using webpack imagein plugin, cause that plugin doesn't save so much sizes. if you have better solution plz contact me.

By default "npm run tinypng" will replace the original png files, there more usage:

tinypng [options] [image.png|*.png]
  -k, --api-key       Set default TinyPNG API key.
  -r, --allow-rewrite Rewrite the original files with compressed data.
  -n, --allow-nonpng  Allow you to compress files without .png extention.
  -p, --postfix       Postfix for compressed files when rewriting disabled.
  -h, --help          This message.
  -v, --version       Show version.

you can custom the scripts in package.json file.

The issues you might be focued.

Scrolling

react router have scroll behaviors issues, i.e: getting scroll position to reset to the top of a page on navigation

you can see the solution from here: https://github.com/rackt/react-router/blob/73e6c85f427c48f90bae0bb0e9745b6b48536e2f/CHANGES.md#scrolling

300ms tap delay

iOS's dreaded 300ms tap delay. React's onClick attribute falls prey to it. Facebook's working on a solution in the form of TapEventPlugin, but it won't be made available until 1.0.

michaelbontyes / react-redux-boilerplate