The world's tiniest guide to getting started with React, JSX, CoffeeScript & Webpack

README.md

1. Stick these files on a computer somewhere
2. npm install
3. npm start

Assumes this folder structure:

js/
  components/
    AppComponent.cjsx
    VideoPlayerComponent.cjsx
  index.cjsx
package.json
webpack.config.js

This will handle .js, .jsx, .coffee & .cjsx files. You can use whatever extensions you want though!

If you're a Sublime user, sublime-react has you covered for .cjsx syntax highlighting.

Shamelessly appropriated & lovingly distilled from the excellent coffee-react-quickstart & some stuff @doylem showed me.

AppComponent.cjsx

React = require("react")
VideoPlayerComponent = require("components/VideoPlayerComponent")

AppComponent = React.createClass
  # Need to add this manually if you want it to show up in React Chrome Dev Tools
  # See https://github.com/jsdf/coffee-react-transform/issues/16
  displayName: "AppComponent"

  render: ->
    <div>
      <h1>Woo!</h1>
      <VideoPlayerComponent src="foo.mp4" />
    </div>

module.exports = AppComponent

index.cjsx

React = require("react")
AppComponent = require("./components/AppComponent")

React.renderComponent <AppComponent />, document.body

package.json

{
  "name": "my_project",
  "scripts": {
    "start": "./node_modules/.bin/webpack --progress --colors --watch"
  },
  "devDependencies": {
    "webpack": "~1.3.0",
    "jsx-loader": "^0.11.0",
    "react": "~0.11.0",
    "cjsx-loader": "^0.2.0",
    "coffee-loader": "^0.7.2"
  }
}

webpack.config.js

module.exports = {
  cache: true,
  entry: "./js/index",
  output: {
    filename: "public/bundle.js"
  },
  resolve: {
    extensions: ["", ".jsx", ".cjsx", ".coffee", ".js"],
    modulesDirectories: ["js", "node_modules"]
  },
  module: {
    loaders: [
      {test: /\.jsx$/, loader: "jsx-loader?insertPragma=React.DOM"},
      {test: /\.cjsx$/, loaders: ["coffee", "cjsx"]},
      {test: /\.coffee$/, loader: "coffee"}
    ]
  }
};