Skip to content

Instantly share code, notes, and snippets.

@bensmithett

bensmithett/AppComponent.cjsx

Last active April 20, 2020 06:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bensmithett/a9a679fff24dad2cac83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bensmithett/a9a679fff24dad2cac83 to your computer and use it in GitHub Desktop.
Download ZIP
The world's tiniest guide to getting started with React, JSX, CoffeeScript & Webpack
Raw
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.

Raw
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
Raw
index.cjsx
React = require("react")
AppComponent = require("./components/AppComponent")
React.renderComponent <AppComponent />, document.body
Raw
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"
}
}
Raw
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"}
]
}
};
@bensmithett
Copy link
Author

bensmithett commented Nov 19, 2014

@jdreux you'll need to arrange the files in this folder structure:

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

(sorry, a gist is probably a bad format for something that requires a specific folder structure)

@gdennie
Copy link

gdennie commented Feb 8, 2016

Cool. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment