Fork me on GitHub

React Sample

Tic Tac Toe

This is the finished Tic Tac Toe tutorial from reactjs.org.

The main JSX code for this sample app is in site_modules/assets/_js/

That is linked to assets/_js/tic-tac-toe

The Game component is imported and rendered by assets/_js/react-app.jsx

Webpack is setup to compile the JSX starting with assets/_js/react-app.jsx as an entry point. See core/webpack.config.coffee and gulpfile.coffee

The template for this page (views/react-sample.pug) adds a script tag that links to /_js/react-app.js

That’s where WebPack either serves or writes the compiled JavaScript.

The CSS is in site_modules/assets/_css/

That is linked to assets/_css/tic-tac-toe

React App Rendered By CoffeeScript

This simple React component was written in CoffeeScript and imported and rendered by CoffeeScript. This project transpiles embedded XML in CoffeeScript into React function calls. You can write React apps entirely in CoffeeScript for the front end.