React with Redux Kickstart!
- Run the setup script.
npm run setup - Run the example app.
npm start -s
- Install Node 4.0.0 or greater - (5.0 or greater is recommended for optimal build performance). Need to run multiple versions of Node? Use nvm.
- Install Git.
- Disable safe write in your editor to assure hot reloading works properly.
- On a Mac? You're all set. If you're on Linux or Windows, complete the steps for your OS below.
On Linux:
- Run this to increase the limit on the number of files Linux will watch. Here's why.
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
On Windows:
- 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. Or, 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).
| 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? |
The starter kit includes a working example app that puts all of the above to use.
Check out the FAQ