zwhu/react-starter-kit

React Starter Kit — a skeleton of an "isomorphic" web application / SPA built with React.js, Express, Flux, ES6+, JSX, Babel, PostCSS, Webpack, BrowserSync...

React Starter Kit — "isomorphic" web app boilerplate

React Starter Kit is an opinionated boilerplate for web development built on top of Facebook's React library, Node.js / Express server and Flux architecture. Containing modern web development tools such as Webpack, Babel and BrowserSync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

Demo: http://demo.reactstarterkit.com  |  Join #react-starter-kit chatroom on Gitter to stay up to date.

Documentation

• General
  • React Style Guide
  • How to configure text editors and IDEs
• Questions
  • Which module bundler should I use?
  • Which Flux implementation should I use?
• Recipes
  • How to Implement Routing and Navigation
  • How to Integrate Disqus

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /docs/                      # Documentation files for the project
├── /node_modules/              # 3rd-party libraries and utilities
├── /src/                       # The source code of the application
│   ├── /actions/               # Action creators that allow to trigger a dispatch to stores
│   ├── /api/                   # REST API / Relay endpoints
│   ├── /components/            # React components
│   ├── /constants/             # Constants (action types etc.)
│   ├── /content/               # Static content (plain HTML or Markdown, Jade, you name it)
│   ├── /core/                  # Core components (Flux dispatcher, base classes, utilities)
│   ├── /decorators/            # Higher-order React components
│   ├── /public/                # Static files which are copied into the /build/public folder
│   ├── /stores/                # Stores contain the application state and logic
│   ├── /utils/                 # Utility classes and functions
│   ├── /app.js                 # Client-side startup script
│   ├── /config.js              # Global application settings
│   ├── /routes.js              # Universal (isomorphic) application routes
│   └── /server.js              # Server-side startup script
├── /tools/                     # Build automation scripts and utilities
│   ├── /lib/                   # Library for utility snippets
│   ├── /build.js               # Builds the project from source to output (build) folder
│   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack
│   ├── /clean.js               # Cleans up the output (build) folder
│   ├── /config.js              # Webpack configuration for application bundles
│   ├── /copy.js                # Copies static files to output (build) folder
│   ├── /deploy.js              # Deploys your web application
│   ├── /serve.js               # Launches the Node.js/Express web server
│   └── /start.js               # Launches the development web server with "live reload"
│── package.json                # The list of 3rd party libraries and utilities
└── preprocessor.js             # ES6 transpiler settings for Jest

Getting Started

Just clone the repo and start hacking:

$ git clone -o react-starter-kit -b master --single-branch \
      https://github.com/kriasoft/react-starter-kit.git MyApp
$ cd MyApp
$ npm install                   # Install Node.js components listed in ./package.json
$ npm start                     # Compile and launch

How to Build

$ npm run build                 # or, `npm run build -- release`

By default, it builds in debug mode. If you need to build in release mode, just add a -- release flag. This will optimize the output bundle for production.

How to Run

$ npm start                     # or, `npm start -- release`

This will start a light-weight development server with "live reload" and synchronized browsing across multiple devices and browsers.

How to Deploy

$ npm run deploy                # or, `npm run deploy -- production`

For more information see tools/deploy.js.

How to Update

You can always fetch and merge recent changes from this repo back into your own project:

$ git checkout master
$ git fetch react-starter-kit
$ git merge react-starter-kit/master
$ npm install

How to Test

Run unit tests powered by Jest with the following npm command:

$ npm test

Test any javascript module by creating a __tests__/ directory where the file is. Append -test.js to the filename and Jest will do the rest.

Visit Our Sponsor

Related Projects

• React Static Boilerplate — Generates static websites from React components
• Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries
• React Decorators — A collection of higher-order React components

Learn More

• Getting Started with React.js
• Getting Started with GraphQL and Relay
• React.js Questions on StackOverflow
• React.js Discussion Board
• Flux Architecture for Building User Interfaces
• Jest - Painless Unit Testing
• Flow - A static type checker for JavaScript
• The Future of React
• Learn ES6, ES6 Features

Support

• #react-starter-kit on Gitter — Feedback, feature requests, Q&A
• @koistya on Codementor — Mentorship, code reviews
• support@kriasoft.com — Customization requests, help with GraphQL/Relay back-ends etc.

License

Copyright © 2014-2015 Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.

---

Made with ♥ by Konstantin Tarkus (@koistya) and contributors