|
| 1 | +--- |
| 2 | +title: "Community Round-up #6" |
| 3 | +layout: post |
| 4 | +author: Vjeux |
| 5 | +--- |
| 6 | + |
| 7 | +This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing. |
| 8 | + |
| 9 | +## React Game Tutorial |
| 10 | + |
| 11 | +[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone. |
| 12 | +<figure>[](https://rawgithub.com/calebcassel/react-demo/master/part1.html)</figure> |
| 13 | + |
| 14 | + |
| 15 | +## Reactify |
| 16 | + |
| 17 | +[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files. |
| 18 | + |
| 19 | +> Browserify v2 transform for `text/jsx`. Basic usage is: |
| 20 | +> |
| 21 | +> ``` |
| 22 | +% browserify -t reactify main.jsx |
| 23 | +``` |
| 24 | +> |
| 25 | +> `reactify` transform activates for files with either `.jsx` extension or `/** @jsx React.DOM */` pragma as a first line for any `.js` file. |
| 26 | +> |
| 27 | +> [Check it out on Github...](https://github.com/andreypopp/reactify) |
| 28 | +
|
| 29 | + |
| 30 | + |
| 31 | +## React Integration with Este |
| 32 | + |
| 33 | +[Daniel Steigerwald](http://daniel.steigerwald.cz/) is now using React within [Este](https://github.com/steida/este), which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library. |
| 34 | + |
| 35 | +```coffeescript |
| 36 | +este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`) |
| 37 | + render: -> |
| 38 | + @div [ |
| 39 | + este.demos.react.todoList 'items': @state['items'] |
| 40 | + if @state['items'].length |
| 41 | + @p "#{@state['items'].length} items." |
| 42 | + @form 'onSubmit': @onFormSubmit, [ |
| 43 | + @input |
| 44 | + 'onChange': @onChange |
| 45 | + 'value': @state['text'] |
| 46 | + 'autoFocus': true |
| 47 | + 'ref': 'textInput' |
| 48 | + @button "Add ##{@state['items'].length + 1}" |
| 49 | + ] |
| 50 | + ] |
| 51 | +``` |
| 52 | + |
| 53 | +[Check it out on Github...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee) |
| 54 | + |
| 55 | + |
| 56 | +## React Stylus Boilerplate |
| 57 | + |
| 58 | +[Zaim Bakar](http://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor. |
| 59 | + |
| 60 | +> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor. |
| 61 | +> |
| 62 | +> - Very minimal HTML boilerplate |
| 63 | +> - Uses Stylus, with nib included |
| 64 | +> - Uses two build targets: |
| 65 | +> - `grunt build` to compile JSX and Stylus into a development build |
| 66 | +> - `grunt dist` to minify and optimize the development build for production |
| 67 | +> |
| 68 | +> [Check it out on Github...](https://github.com/zaim/react-stylus-boilerplate) |
| 69 | +
|
| 70 | + |
| 71 | +## WebFUI |
| 72 | + |
| 73 | +[Conrad Barski](http://lisperati.com/), author of the popular book [Land of Lisp](http://landoflisp.com/), wants to use React for his ClojureScript library called [WebFUI](https://github.com/drcode/webfui). |
| 74 | + |
| 75 | +> I'm the author of "[Land of Lisp](http://landoflisp.com/)" and I love your framework. I built a somewhat similar framework a year ago [WebFUI](https://github.com/drcode/webfui) aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.) |
| 76 | +> |
| 77 | +> Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling) |
| 78 | +<figure>[](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)</figure> |
| 79 | +> |
| 80 | +> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ) |
0 commit comments