dtschust / 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

This project template is a skeleton for an isomorphic web application (SPA) based on Facebook's React library and Flux architecture. You can use it to quickly bootstrap your web application projects. All the parts of this project template are easily replaceable.

Demo: http://demo.reactstarterkit.com

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
│   ├── /api/                   # REST API / Relay endpoints
│   ├── /actions/               # Action creators that allow to trigger a dispatch to stores
│   ├── /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
│   ├── /templates/             # HTML templates for server-side rendering, emails etc.
│   ├── /utils/                 # Utility classes and functions
│   ├── /app.js                 # Client-side startup script
│   └── /server.js              # Server-side startup script
│── gulpfile.babel.js           # Configuration file for automated builds
│── package.json                # The list of 3rd party libraries and utilities
│── preprocessor.js             # ES6 transpiler settings for Jest
└── webpack.config.js           # Webpack configuration for bundling and optimization

Getting Started

Just clone or fork 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 -g gulp           # Install Gulp task runner globally
$ npm install                   # Install Node.js components listed in ./package.json

How to Build

$ gulp build                    # or, `gulp build --release`

By default, it builds in debug mode. If you need to build in release mode, add --release flag. This will minimize your JavaScript; you will also see some warnings from uglify where it removes unused code from your release.

How to Run

$ gulp                          # or, `gulp --release`

This will start a lightweight development server with LiveReload and synchronized browsing across multiple devices and browsers.

How to Deploy

$ gulp build --release          # Builds the project in release mode
$ gulp deploy                   # or, `gulp deploy --production`

For more information see deploy task in gulpfile.babel.js.

How to Update

You can always fetch and merge the 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. Name the test by appending -test.js to the js file. Jest will do the rest.

Customizations

• Azure deployment

Related Projects

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

Learn More

• Getting Started with React.js
• React.js Wiki on GitHub
• 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
• Live help sessions on Thinkful
• @koistya on Codementor

License

The MIT License © Konstantin Tarkus (@koistya), Kriasoft