Community Round-up #6
Vjeux committed
Aug 6, 2013 at 00:59 UTC
03211711137d67efb7d40b1a4ee5e00cc2d4db54
3 files changed
+80
docs/_posts/2013-08-05-community-roundup-6.md
new
+80
@@ -0,0 +1,80 @@
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)
docs/img/blog/dog-tutorial.png
Binary files /dev/null and b/docs/img/blog/dog-tutorial.png differ
docs/img/blog/landoflisp.png
Binary files /dev/null and b/docs/img/blog/landoflisp.png differ