❤️ Webpack 4
❤️ Code splitting
❤️ React Router
❤️ Redux
Why React redux starter Kit ?
-
One command to get started - Type
npm start
to start development in your default browser. -
Rapid feedback - Each time you hit save, changes hot reload and linting and automated tests run.
-
One command line to check - All feedback is displayed on a single command line.
-
No more JavaScript fatigue - Starter Kit uses the most popular and powerful libraries for working with React.
-
Working example app - The included an simplet counter example.
-
Automated production build - Type
npm run build
to do all this:
- Install Node 8.0.0 or greater
Need to run multiple versions of Node? Use nvm.
-
Install Git.
-
Disable safe write in your editor to assure hot reloading works properly.
-
Complete the steps below for your operating system:
- Install watchman via
brew install watchman
or fswatch viabrew install fswatch
to avoid this issue which occurs if your macOS has no appropriate file watching service installed.
- Run this to increase the limit on the number of files Linux will watch..
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
.
-
Install Python 2.7. Some node modules may rely on node-gyp, which requires Python on Windows.
-
Install C++ Compiler. Browser-sync requires a C++ compiler on Windows.
Visual Studio Express comes bundled with a free C++ compiler.
If you already have Visual Studio installed:
Open Visual Studio and go to File -> New -> Project -> Visual C++ -> Install Visual C++ Tools for Windows Desktop.
The C++ compiler is used to compile browser-sync (and perhaps other Node modules).
- Built with webpack 4
- Code splitting at the react-router v4 level
- Supports ES6 via Babel transpiling
- redux-thunk for asynchronous actions
- redux-logger for capturing actions
- react-router v4 for client-side routing
- [ Promise-based HTTP support via Axios
- Supports SCSS & SASS syntax
- Browser compatibility via autoprefixing and normalize.css
- Environmental configurations for both webpack and redux
- Dev: webpack-dev-server with React Hot Loader.
redux-logger
enabled - Prod: Express server disabled
- Dev: webpack-dev-server with React Hot Loader.
-
Make sure you ran all steps in Get started including the initial machine setup.
-
Run
npm install
- If you forget to do this, you'll see this:babel-node: command not found
. -
Install the latest version of Node.
-
Make sure files with names that begin with a dot (.editorconfig, .gitignore, .npmrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.
-
Don't run the project from a symbolic link. It may cause issues with file watches.
-
Delete any .eslintrc that you're storing in your user directory. Also, disable any ESLint plugin / custom rules that you've enabled within your editor. These will conflict with the ESLint rules defined in this project.
-
Tip: Things to check if you get an
npm run lint
error or build error:
- If ESW found an error or warning in your project (e.g. console statement or a missing semi-colon), the lint thread will exit with
Exit status 1
. To fix:
-
Change the
npm run lint
script to"esw webpack.config.* src tools; exit 0"
-
Change the
npm run lint:watch
script to"esw webpack.config.* src tools --watch; exit 0"
Note: Adding
exit 0
will allow the npm scripts to ignore the status 1 and allow ESW to print all warnings and errors.
- Ensure the
eslint
/esw
globally installed version matches the version used in the project. This will ensure theesw
keyword is resolved.
- Rebuild node-sass with
npm rebuild node-sass
if you are having and error likeNode Sass does not yet support your current environment on macOS XXX
after an initialnpm start -s
.
React redux starter kit offers a rich development experience using the following technologies:
| Tech | Description |Learn More|
|----------|-------|---|
| React | Fast, composable client-side components. | Pluralsight Course |
| Redux | Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux.| Getting Started with Redux, Building React Applications with Idiomatic Redux, Pluralsight Course|
| React Router | A complete routing library for React | Pluralsight Course |
| Babel | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. | ES6 REPL, ES6 vs ES5, ES6 Katas, Pluralsight course |
| Webpack | Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr. | Quick Webpack How-to Pluralsight Course|
| Browsersync | Lightweight development HTTP server that supports synchronized testing and debugging on multiple devices. | Intro vid|
| Jest | Automated tests with built-in expect assertions and Enzyme for DOM testing without a browser using Node. | Pluralsight Course |
| TrackJS | JavaScript error tracking. | Free trial|
| ESLint| Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules. | |
| SASS | Compiled CSS styles with variables, functions, and more. | Pluralsight Course|
| PostCSS | Transform styles with JS plugins. Used to autoprefix CSS |
| Editor Config | Enforce consistent editor settings (spaces vs tabs, etc). | IDE Plugins |
| npm Scripts| Glues all this together in a handy automated build. | Pluralsight course, Why not Gulp? |