{"id":14968182,"url":"https://github.com/iroy2000/react-redux-boilerplate","last_synced_at":"2025-04-07T10:26:16.768Z","repository":{"id":146145734,"uuid":"71848177","full_name":"iroy2000/react-redux-boilerplate","owner":"iroy2000","description":"Awesome React Redux Workflow Boilerplate with Webpack 4","archived":false,"fork":false,"pushed_at":"2019-05-17T05:45:16.000Z","size":643,"stargazers_count":302,"open_issues_count":0,"forks_count":113,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-31T08:12:12.513Z","etag":null,"topics":["boilerplate","css-modules","enzyme","es6","i10n","i18n","jest","postcss","react","react-intl","react16","redux","redux-saga","webpack","webpack4","workflow-boilerplate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iroy2000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-25T01:39:25.000Z","updated_at":"2025-01-04T21:48:17.000Z","dependencies_parsed_at":"2023-09-12T21:46:51.213Z","dependency_job_id":null,"html_url":"https://github.com/iroy2000/react-redux-boilerplate","commit_stats":{"total_commits":130,"total_committers":5,"mean_commits":26.0,"dds":"0.13076923076923075","last_synced_commit":"94abd5ac8c51181a9c5e359d359a11315009a278"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-redux-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-redux-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-redux-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-redux-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iroy2000","download_url":"https://codeload.github.com/iroy2000/react-redux-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247634088,"owners_count":20970455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","css-modules","enzyme","es6","i10n","i18n","jest","postcss","react","react-intl","react16","redux","redux-saga","webpack","webpack4","workflow-boilerplate"],"created_at":"2024-09-24T13:39:29.300Z","updated_at":"2025-04-07T10:26:16.735Z","avatar_url":"https://github.com/iroy2000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Build Status\n[![linux build](https://api.travis-ci.org/iroy2000/react-redux-boilerplate.svg?branch=master)](https://travis-ci.org/iroy2000/react-redux-boilerplate)\n[![Dependency Status][david_img]][david_site]\n[![Join the chat at https://gitter.im/iroy2000-react-redux-boilerplate/Lobby](https://badges.gitter.im/iroy2000-react-redux-boilerplate/Lobby.svg)](https://gitter.im/iroy2000-react-redux-boilerplate/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n### TL;DR\n\nBefore you dive into anything, see for yourself how easy you can setup a full workflow framework for your `development` and `deployment` for your real world project.\n\nStep 1: Clone this repo\n```\ngit clone https://github.com/iroy2000/react-redux-boilerplate.git\ncd react-redux-boilerplate\n```\n\nStep 2: Install\n\n```\nnpm install\n```\n\nStep 3: Start\n\n```\nnpm run dev\n```\n\nAnd Done, as easy as 123!!\n\n\n### Preface\n\nReact Redux Boilerplate is a full fledged __PRODUCTION READY__ workflow boilerplate for building complex React / Redux application.\n\nThe technologies used in this workflow boilerplate shows case a `subset of technologies` we are currently using within our team ( __we put this project in github mainly as recruiting purpose for our team__ ),  and we are trying to give our candidates confidence that by working with us, they will be using decent technologies as well as staying relevant to the industry.  And that is what our team strongly believed in - __technology innovation and promoting developers' relevancy in the industry__.\n\nIf you are interested in working with us, feel free to send a message to [iroy2000](https://www.linkedin.com/in/iroy2000).\n\n__Note:__ This boilerplate is not to show case how to code in React / Redux, it is a boilerplate that hook everything up for you to develop a complex React / Redux project. And if you just want to learn React, we don't have complicated code example here and this boilerplate might be too complicated for your need.\n\n![React Redux Workflow Boilerplate Logo](http://res.cloudinary.com/search-engine/image/upload/v1501696716/logo-rrb-002_zxvml0.png)\n\n# React Redux Boilerplate\n\n`React Redux Boilerplate` is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.\n\n`React Redux Boilerplate` is for developing React client side application. So,  if you are looking for:\n\n* `Isomorphic (Universal) support`, feel free to add server side support to it, or you can use something like [Next.js](https://github.com/zeit/next.js/), [react-server](https://github.com/redfin/react-server) or [electrode](http://www.electrode.io/)\n\n\n### Features / Benefits\n\nFeatures\n\n* React 16.6\n* Redux\n* Saga\n* ES6 / ES7\n* ImmutableJS\n* PreCSS ( supports SASS-like markup in your CSS )\n* PostCSS ( with CSS modules activated by default )\n* Webpack 4\n* Reselect\n* i18n / i10n supports ( react-intl )\n* Lazy Loading component supports\n* Type Checking with Babel Type Check ( Flow syntax )\n* ESLint for syntax check\n* Jest and Enzyme for Unit testing\n\nWorkflow\n\n* Development\n  * Hot Module Reload during development\n  * Built-in lightweight config system\n  * Built-in fancy cli dashboard for reporting run time compile status\n  * Built-in support for multiple device concurrent debugging\n* Build / Production\n  * Production bundle analyzing capability\n  * CSS / HTML / JS minification / Image optimization when built\n  * JS code duplication removal during built ( tree shaking capability )\n* Deployment\n  * Built-in git commit hook, helpful for CI/CD process\n  * Built-in process to deploy files directly to S3 ( optional )\n* Productivity\n  * Highly configurable build and workflow system ( webpack )\n  * Minimal setup time and allow you to invest into things that matters\n  * Everything automatic, you just care about development, nothing else \\o/ Yeah ?!\n\nIf you are interested, please read the `package.json` for all installed modules and plugins.\n\n## Table of Contents\n\nBasic\n1. [Installation](#installation)\n1. [Initialize your project](#initialize-your-project)\n1. [Suggested Workflow](#suggested-workflow)\n1. [Folder Structure](#folder-structure)\n1. [Production Readiness](#production-readiness)\n1. [Configuration](#configuration)\n1. [Port Configuration](#port-configuration)\n1. [Installing Dependencies](#installing-dependencies)\n\nAdvanced\n1. [Lazy Loading Component](#lazy-loading-component)\n1. [Writing Unit Test](#writing-unit-test)\n1. [Configure git commit hook](#configure-git-commit-hook)\n1. [Multiple Device Concurrent Debugging](#multiple-device-concurrent-debugging)\n1. [Developing Template](#developing-template)\n1. [Production Optimization and Bundle Analysis](#production-optimization-and-bundle-analysis)\n1. [Integration Note](#integration-note)\n1. [QA](#qa)\n\nOther\n1. [Knowledge Base Reading](#knowledge-base-reading)\n1. [How to Contribute](#how-to-contribute)\n1. [Updates](#updates)\n\n# Basic\n\n## Installation\n\n\n### Prerequisite\n\nYou need to have Node.js installed.\n\n[Instruction for installing NodeJS in Mac](http://lmgtfy.com/?q=install+nodejs+mac)\n\n[Instruction for installing NodeJS in Window](http://lmgtfy.com/?q=install+nodejs+window)\n\n### Post Installation\n\nIf you would like to have Redux debug capabilities, you can download this Chrome extension [Redux DevTool](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)\n\n![Redux DevTool](https://www.dropbox.com/s/wni425e3d4xiy85/redux-devtool.png?raw=1)\n\n\n## Initialize your project\n\nNow run the following commands in your terminal\n\n**NOTE: You only need to run this once!**\n\n```sh\n$ npm install # This will install the necessary packages to use the app\n```\n\n**That's it!**\n\n\n### To run the app in Development Mode\n\n```sh\n$ npm run dev\n```\n\nWait about 30 seconds for your development environment to initialize.\n\nWhen it finishes, open your browser and go to `http://localhost:8080/`\n\nIf you see the landing page, it means you have set up everything successfully.\n\n\n### List of NPM Commands\n\n\n```sh\n$ npm run dev       # build and watch, but javascript not minified\n$ npm run build     # build a minified production version\n$ npm run build:s3  # build a minified production version, deploy it to S3 as a static app\n$ npm run lint      # linting using ESLint\n$ npm run test      # run test using Jest\n$ npm run clean     # it runs before each build, so you don't need to\n```\n\n\n## Suggested Workflow\n\n\nAfter you check out the repo, I will usually do the following :\n\n0. Go to your project root in your host machine  ( e.g. your Mac )\n1. Run `npm run dev` in your terminal ( wait until the dashboard show complete status )\n2. Go to your browser and go to `localhost:8080`\n3. Make code changes\n4. If there are compilation errors, you will see it in the terminal dashboard\n5. Watch your code changes reflect on browser without refreshing\n6. Repeat your development steps\n\nThat's very easy, isn't it?\n\n## Folder Structure\n\nThe entry point of your application is `src/js/routes`, it's basically a mapping between your `views` to a `route`.\n\nAll your javascript code lives in folder `src/js`\n\n```\n  -- src/\n    -- js/\n      -- common/\n        -- api/          --\u003e all api requests\n        -- components/   --\u003e all share components\n        -- types/        --\u003e all flow types\n      -- redux/\n        -- modules/      --\u003e all redux code\n        -- saga/         --\u003e all redux-saga code\n        -- selectors/    --\u003e all reselect code\n      -- utility/        --\u003e all non JSX utility\n      -- views/          --\u003e all JSX code hook up with Route ( HoC ) or page specific components\n    -- style/            --\u003e all global styles, layout, config\n    -- assets/           --\u003e all static assets ( image, fonts ... etc )\n      -- template/       --\u003e you probably won't touch this unless you want to create new template\n\n```\n\n* For `config/` and `bin/` folder, it is covered at [Configuration](#configuration) section\n\n* For `__tests__/` folder, it is covered at [Writing Unit Test](#writing-unit-test) section\n\n* For our Redux coding style, we are using [Ducks](https://github.com/erikras/ducks-modular-redux) standards\n\n* For how to write code in ES6 /React / Redux / POSTCSS  ... etc, please feel free to look at our simple example code.  And if you have question or want to study future, please checkout the [Knowledge Base Reading](#knowledge-base-reading) section, which covers everything we used in this boilerplate.\n\n**NOTE: When you import resources, please make sure you have the right path**\n\n\n## Production Readiness\n\nReact Redux Boilerplate supports production preview, which means that you can run the production build job and see how it looks like in production.\n\n1. Run `npm run build` and wait until it is done\n2. Go to the project `docroot`, you will see a `index.html`  (template is customizable, please read `Developing Template` section)\n3. Serve the build directory, for example like so:\n\n```bash\nnpm i -g http-server\ncd docroot\nhttp-server\n```\nBy default http-server will serve your production build at port 8080.  Docs are [here](https://www.npmjs.com/package/http-server).\n\n4. Navigate to [that address](http://localhost:8080) to see your build.\n\nThat's very easy, isn't it?\n\n### Difference between `npm run dev` v.s. `npm run build`\n\n`npn run dev` is best to do JS / CSS only changes, and it comes with live reload functionality\n\n`npm run build` is for testing what happen if your frontend assets are optimized ( production level code )\n\nPlease let me know if you have better work flow suggestion!!\n\n## Configuration\nReact Redux Boilerplate has two configuration strategies, one is for normal configuration, the other one is for sensitive information that you don't want others to know.\n\n### Configuring application\n\nIf you look at folder `config`, there are four files\n\n`default.json` - all default configuration\n`development.json` - when you run `npm run dev`, it will pull configuration from that file\n`release.json` - when you run `npm run build:release`, it will use this configuration\n`production.json` - when you run `npm run build`, it will use this configuration\n\nWe are using [node-config](https://github.com/lorenwest/node-config), they have a pretty easy to understand documentation.\n\n\nAnd in your config file ( json config file ), whatever you put inside the `app`, it will be injected into the client application and you can access to your `app` config data by using `__CONFIG__` variables.\n\nLet's say you have a config like the following\n\n```\n{\n  \"app\": {\n    \"apiURL\": \"http://foo.bar/\"\n  }\n}\n\n```\n\nIn your React application, you can access this variables\n\n```\n__CONFIG__.apiURL\n\n```\n\n__Note:__ If you want to add new npm target ( e.g. `npm run build:stage` ), you need to do the following :-\n\n1. Add a `stage.json` file inside `config` folder\n2. Add `npm run build:stage`  ( or similar ) at `package.json` scripts section\n3. Add actual command mapping at `bin/commands.js`\n\n### Configuring secret key/value pair\n\nThere are times you may want to put in `secret information` you don't want to check into the source code.  In this boilerplate, you just need to create a file called `.env` in your `PROJECT_ROOT`, and you can put your secrets there ( we have put that into `.gitignore` just in case ).\n\nSpecifically for deployment to S3, there are two options for providing your secrets:\n1. In ~/.aws/credentials, configure a block like so, for example for a profile called \"default\":\n\n```bash\n[default]\nAWS_ACCESS_KEY_ID=XXXXXXXX     # replace with your key\nAWS_SECRET_ACCESS_KEY=XXXXXXX  # replace with your secret\n```\n\n2. You can provide the same values in a `.env` file within your project:\n\n```bash\nAWS_ACCESS_KEY_ID=YOUR_AWS_ACCESS_KEY\nAWS_SECRET_ACCESS_KEY=YOUR_AWS_SECRET_KEY\n```\n\nIf you are using the AWS CLI, chances are you already have an `~/.aws/credentials` file, so you may find option 1 simpler locally.  Option 2 may be better when using a build server like Jenkins.\n\nFinally, no matter which of the above two options you choose, you will ALSO need to provide these additional values in your `.env` file, or otherwise set them as environment variables when you build:\n\n```bash\nAWS_BUCKET=YOUR_AWS_BUCKET      # REQUIRED for S3 deploy\nAWS_CDN_URL=YOUR_AWS_CDN_URL    # OPTIONAL for S3 deploy\n```\n\nAnd your in node application or webpack config, those key/value pairs will be injected into `process.env` ( e.g. `process.env.AWS_ACCESS_KEY_ID` ).\n\n__Note__: Using the `.env` file is optional, it meant to keep secret and inject information into environment variables, if you are using Jenkins or a like type of tool, you can inject environment variables there.\n\nHowever, with `.env`, you can create a ready to use list of environment variables for your different environment.  You can even have another service to generate the `.env` file before building the project, but in terms of how to achieve that, it is out of scope of this documentation.\n\n__Just remember__, `.env` file is supposed to keep your secret, and prevent you from saving sensitive secrets into your source code repository \\0/ !! **DO NOT** check `.env` into your source repo !!\n\nWe are using [dotenv](https://github.com/motdotla/dotenv) for the `.env` feature, they have pretty good documentation.\n\n## Port Configuration\nThere will be a chance that you will need your port to be other than `8080`.  For example, your local backend service might already take `8080`; Or you want to run multiple project, one on `8080` and one on `80801`.\n\nIf you are running one project that needs a different port, you can just modify one place\n1) `default.json` --\u003e `port` section.\n\nBut if you want to run multiple projects at the same time, you will need to configure ports in two places\n1) `default.json` --\u003e `port`\n2) Dashboard port --\u003e `package.json` --\u003e `dev`  ( default dashboard port is `9901` )\n\n## Installing Dependencies\n\nWe are using `npm` in this project, so if you would like to install a dependencies, for example, D3, you can do something like the following :-\n\n`npm i --save d3`\n\n# Advanced\n\n## Lazy Loading Component\n\nThis boilerplate supports `Lazy Loading` and `Component Centric Splitting` out of the box by integrating `react-loadable`.\n\nIn short, it will drastically reduce your initial load time by lazy loading components until the component is needed. And you can now do tricks like `above the fold` and `load component on demand` very easily with this capabilities.\n\nIn order to take advantage of this capabilities\n\nYou first need to import:\n\n```\n// Currently it lives inside common component, mostly as example\n// It is a react-loadable wrapper\nimport LazyLoading from '../../common/components/LazyLoading'\n```\n\nAnd you now can lazy load anything like the following:\n\n```\nconst LazyExample = LazyLoading(() =\u003e import('YOUR_PATH_TO/components/YourComponent'))\n```\nCan it be easier ??\n\nPlease look at the example in this repo and `react-loadable` to get more idea.\n\n## Writing Unit Test\n\nWe are using Jest and Enzyme for unit testing, please refer to the Knowledge Base section below for more information.\n\nIn order to add unit test, the current setup requires you to put your test under `__tests__` directory, and suffix the filename with `spec` or `test`.\n\nFor example, `MyFancyComponent.test.js` or `whatever_folder/AnotherComponent.spec.js`.\n\nWe also have two folders `__fixtures` and `__mocks__` in the repo, those are just handy example folders for you to put different type of test related files separately, these two folders are safe to delete if you don't need them.\n\n## Configure git commit hook\n\nWe are using `husky` for preventing developers check in bad commits. Please go to package.json and look for `husky` the default settings. `husky` supports any git hooks and you can configure it to fit your needs.\n\n## Multiple Device Concurrent Debugging\n\nReact Redux Boilerpalate has built in support for multiple device concurrent access by entering the ip address provide.\n\nIf you look at the dashboard, you should see some messages like below ( Note: your ip will be different )\n\n![Logo](http://res.cloudinary.com/search-engine/image/upload/v1501353275/share_screen_g3ofe1.png)\n\nFor example, you can enter the address into multiple real devices and you can test those devices all at the same time, like the following :-\n\n![Logo](http://res.cloudinary.com/search-engine/image/upload/v1501353811/multiple_screen_d2b7fg.png)\n\n## Developing Template\n\nThe `docroot/index.html` is a generated artifact. If look at our sample template at `src/assets/template/_default.html`, the `docroot/index.html` is generated from that file.\n\nWe are using [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin) to generate the `docroot/index.html`.\n\n* If you are developing a single page application, you probably can reuse that file or customize it.\n* If you are building multiple pages application, please read the [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin) documentation for template development and how to configure it.\n\n**[Note]** - Most of the use case of the html template system so far is for testing purpose for your dev and build enviornment before you start integration.  If all you need is a static template, you are good; but if your application requires a server side processing, you will need to integrate the artifacts with the language of your choice. Please read `Diagrams` section for how to integrate with other server side language.\n\n## Production Optimization and Bundle Analysis\n\nFor optimization, you can tweak the `config` under the following.  This optimization covers basic use case, feel free to make modification to fit your needs.\n\n```\n  \"optimization\": {\n    \"commonMinCount\": 3,   // how many times a module is used before we consider it a common module ?\n    \"cssExclusion\": true,  // do you want to exclude css from this optimization ?\n    ...\n  },\n```\n\nThis boilerplate shipped with `Production Bundle Analysis` tool which is `turn on` by default and will give you insight to optimize the production assets.\n\nFor example, when you run `npm run build` with `\"analyzeMode\": true`, you should see something like the following at the end of your build.\n\nThe tool is to help you understand what your bundle looks like and what is included in your bundle.\n\n![Production Bundle Analysis](https://www.dropbox.com/s/zun4n4tgp059neh/bundle-analysis.png?raw=1)\n\nYou can turn `on` and `off` the analysis feature\n\n```\n  \"optimization\": {\n    ...\n    \"analyzeMode\": true,   // changing to false will turn it off\n    \"analyze\": {\n      \"port\": 8888  // it will open localhost:8888 and show your bundle analysis\n    }\n  },\n```\n\n## Integration Note\n\n\n### How to integrate with other server side framework ?\n\nWhen you run `npm run build`, it will generate a meta data file `assets.json` with the list of generated frontend artifacts.  Think about that as a contract / interface for your server side framework.\n\nAnd your framework just need to consume that meta information as integration point.\n\nAnd this boilerplate has a process integrated to upload artifacts ( assets.json and generated client ifacts ) to S3 / cloudfront.  One of the integration path is the `consumer` can query against s3 for the assets.json, and use the information in assets.json to get the artifacts which is uploaded to S3 / cdn.\n\n\n## QA\n\n\n* __How to activate S3 support ?__\n\t* S3 upload is optional here\n      1. Make sure you have provided your AWS credentials to the project (secret and access key).  Please read [Configuration](#configuration) section for more information.\n      2. Use the `npm run build:s3` script to build and deploy.\n\n* __What is our standard to control our npm module dependencies ?__\n    * We are using `^version`, it means \"Compatible with version\". The reason we are using `^version` is simply we want the ability for us to roll back to previous working version together with the source code.\n\n* __How to add javascript unit test ?__\n    * All React JS test are under \\__tests__ directory and this tool will find all the test, you don't need to do anything besides putting your test in, but please use a structure that mimic your source location that you are testing, or it will create confusion.\n\n* __What is B.E.M style  ?__\n    * B.E.M is short for `Block, Element, Modifier` and is a naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS and make our code base more maintainable. Please read the links below for getting deeper insight of it.\n\n# Other\n\n## Knowledge Base Reading\n\n### ES6\n\n* [ES6 for Humans](https://github.com/metagrover/ES6-for-humans)\n* [ES6 Compatible Table](http://kangax.github.io/compat-table/es6/)\n* [ECMAScript Specification](https://www.ecma-international.org/ecma-262/)\n\n### React\n\n* [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html)\n* [React 16.4+ life cycle methods](https://blog.bitsrc.io/understanding-react-v16-4-new-component-lifecycle-methods-fa7b224efd7d)\n* [Synchronization of props with state is an anti-pattern](https://github.com/JedWatson/react-select/issues/70)\n* [You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)\n* [How Virtual-DOM and diffing works in React](https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e)\n\n### Redux\n\n* [Redux](http://redux.js.org/)\n* [You might not need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)\n* [Redux without profanity](https://www.gitbook.com/book/tonyhb/redux-without-profanity/details)\n* [Learned from reading the Redux source code](https://medium.freecodecamp.com/what-i-learned-from-reading-the-redux-source-code-836793a48768?gi=4bdf3c9f3396#.rjwu6x9sc)\n* [Redux Saga](https://redux-saga.js.org/)\n* [Usage of Reselect in a React-Redux Application](https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application)\n\n### Webpack\n\n* [Webpack how-to](https://github.com/petehunt/webpack-howto)\n* [Webpack - The Confusing Part](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9)\n* [Lazy Loading and Code Split for React Route](https://github.com/webpack/react-proxy-loader)\n* [Lazy Loading and Code Split for Components](https://github.com/jamiebuilds/react-loadable)\n\n\n### Relevant Knowledge\n\n* [ImmutableJS for beginners](https://github.com/iroy2000/immutablejs-for-beginners)\n* [Learning PostCSS](https://github.com/postcss/postcss)\n* [Jest = Awesome JS Testing Framework](https://facebook.github.io/jest/docs/tutorial-react.html)\n* [B.E.M 101](https://css-tricks.com/bem-101/)\n* [React Responsive](https://github.com/contra/react-responsive)\n* [Storybook.JS](https://storybook.js.org/)\n\n### Best Practice\n\n* [Ducks: Redux Reducer Bundles](https://github.com/erikras/ducks-modular-redux)\n* [Lessons from migrating a large codebase to React 16](https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6)\n* [B.E.M: 10 Common Problems And How To Avoid Them](https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/)\n* [Isomorphic JavaScript, The Future of Web Apps](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)\n* [The Cost Of JavaScript](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e)\n\n## How to Contribute\n\nWe welcome anyone to send us __pull request__ to improve this boilerplate, the goal is to make it better from time to time and we all can learn from it.\n\nThis boilerplate will be maintained separately.  So please do not check in any business logic to it unless it is for example purpose.\n\n## Updates\n\n__04 / 30 / 2019__\n\nAdding i18n / i10n support by adding [react-intl](https://github.com/yahoo/react-intl)\n\n__10 / 25 / 2018__\n\nWe are now on Webpack 4 and React 16.4, plus up-to-date with all our dependencies.\n\nWe removed css-next in favor of postcss-preset-env.\n\nWe removed extract-text-webpack-plugin to mini-css-extract-plugin because of Webpack 4 upgrade.\n\n__9 / 26 / 2017__\n\nWe are now on React 16, and up-to-date with all our dependencies.\n\n__9 / 14 / 2017__\n\nFor those of you seeing the following error\n\n`mozjpeg pre-build test failed ...`\n\nThere is a bug in `imagemin` with Node 6 or above, and [here is the discussion](https://github.com/imagemin/imagemin/issues/168)\n\nIf you are using mac, you can fix that by doing this\n\n`brew install automake autoconf libtool dpkg pkgconfig nasm libpng`\n\n## License ?!\nIn theory, knowledge should be free, so please visit [wtfpl](http://www.wtfpl.net/) for this boilerplate license if you really care.\n\n[david_img]: https://img.shields.io/david/iroy2000/react-redux-boilerplate.svg\n[david_site]: https://david-dm.org/iroy2000/react-redux-boilerplate\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firoy2000%2Freact-redux-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firoy2000%2Freact-redux-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firoy2000%2Freact-redux-boilerplate/lists"}