https://github.com/KyleAMathews/coffee-react-quickstart

Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router
https://github.com/KyleAMathews/coffee-react-quickstart

Last synced: 3 months ago
JSON representation

Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router

• Host: GitHub
• URL: https://github.com/KyleAMathews/coffee-react-quickstart
• Owner: KyleAMathews
• License: mit
• Created: 2014-06-09T21:01:47.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-03-27T17:12:19.000Z (almost 9 years ago)
• Last Synced: 2024-10-30T11:48:56.308Z (4 months ago)
• Language: CoffeeScript
• Homepage: http://kyleamathews.github.io/coffee-react-quickstart
• Size: 1.73 MB
• Stars: 254
• Watchers: 13
• Forks: 41
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-projects-boilerplates - Coffee React Quickstart - Router (JavaScript)

README

        
Coffee React Quickstart

=======================

Quickstart for creating React.js web applications.

It has a number of nice goodies baked in including:

* Live reloading for both CSS *and* Javascript! This really speeds up development. Live reloading is powered by the [Webpack module bundler](http://webpack.github.io/) and [react-hot-loader](https://github.com/gaearon/react-hot-loader) projects.

* Write your JSX in Coffeescript thanks to [coffee-react-transform](https://github.com/jsdf/coffee-react-transform).

* Amazing URL-driven-development (UDD) with the [react-router project](https://github.com/rackt/react-router).

* Uses [Gulp](http://gulpjs.com/) for building CSS and Javascript. Run `gulp watch` for rebuilding css/js on the fly while developing and `gulp build` to create minified versions for deploying to production.

* Includes sensible element stylings and several useful Sass plugins:

  * Susy: best-of-breed grid system.

  * modular-scale: easily create pleasing modular type scales.

  * Sassy Buttons: flexible button styling.

  * Breakpoint: Super simple media queries.

## Install dependencies

Clone this repo and then after entering the new directory run `npm install` and `bundle install`. This will install the respective NPM and Ruby Gem dependencies.

You'll also need to have gulp installed globally to run the coffeescript gulpfile: `npm install -g gulp`

## Development

Run in the root of your directory: `npm run watch`

This will watch the src directories and build on changes and placed the built css and js files in the public directory. It'll serve everything in the /public directory at localhost:8080

Then try editing `src/scripts/hello_world.cjsx` and see your changes magically show up in your browser with *no* page reload!

# Production build

To build for production, simply run `gulp build`

# Demo

Try out the example app included with this quickstart: http://kyleamathews.github.io/coffee-react-quickstart/