Cloneable React starter project that includes development tools and production optimisations.
This may not be the optimal starting point for your project. It includes a lot of different libraries and tools that cover many concerns - some of which you may wish to tackle differently. There are many React starter kits and templates available; make sure you choose the one that best suits your needs (the list of inspirations below may be a good place to start).
Version 2.0 of react-starter-kit has undergone some significant changes, including upgrading all dependencies and moving to Webpack 2.0.
Clone this repo to your local machine
git clone https://github.com/greena13/react-starter-kit.git
Install the node modues
npm install
Run the development script
npm run watch
Navigate your browser to http://localhost:8080
npm run build
Start the server, specifying the port to mount to, and the url that the assets will be hosted on:
SERVER_PORT=8080 ASSETS_PATH='http://localhost:8081/assets/' node build/scripts/server.js
Use a simple http server like http-server to serve the build directory (on the url specified using ASSETS_PATH)
http-server ./build/public -p 8081
Navigate your browser to the port specified above (using the SERVER_PORT environment variable).
Navigation & Routing: React Router
Data manipulation & events handling: Redux
CSS: Global CSS files and CSS modules
XHR: Isomorphic fetch
Populating html & head tags: React Helmet
Server-side rendering: Koa server, with Pug (Jade) templates
ES6 Syntax & Polyfills: Babel.js
Bundling: Webpack
Hot Reloading: Webpack development server
Code linting: ESLint
Data Visualisation: Redux Devtools that can be opened in your browser using ctrl+shift+x and moved around using ctrl+shift+z.
CSS Extraction: Styling is extracted into a separate file in production to enable downloading them in parallel with the JavaScript application.
Compression: Assets are gzipped to allow for faster transmission to browsers that support it.
Minification (uglification): JavaScript files are minified to reduce file size in production.
Cache busting : Filenames include a hash to prevent repeat-visitors using outdated versions of assets.
Separate webpack configuration files for the client application and the koa server for development and production, totalling 4 separate files.