Community Roundup #21
Christopher Chedeau committed
Aug 2, 2014 at 14:44 UTC
cd25fe1ef3b95e88b5e8c25a95a3766009fa14a4
5 files changed
+114
docs/_posts/2014-08-02-community-roundup-21.md
new
+114
@@ -0,0 +1,114 @@
1
+---
2
+title: "Community Round-up #21"
3
+layout: post
4
+author: Lou Husson
5
+---
6
+
7
+## React Router
8
+[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](http://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
9
+
10
+```javascript
11
+React.renderComponent((
12
+ <Routes>
13
+ <Route handler={App}>
14
+ <Route name="about" handler={About}/>
15
+ <Route name="users" handler={Users}>
16
+ <Route name="user" path="/user/:userId" handler={User}/>
17
+ </Route>
18
+ </Route>
19
+ </Routes>
20
+), document.body);
21
+```
22
+
23
+## Going big with React
24
+
25
+Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"
26
+
27
+[](https://skillsmatter.com/skillscasts/5429-going-big-with-react)
28
+
29
+<!--
30
+<iframe allowfullscreen="" data-progress="true" frameborder="0" height="390" id="vimeo-player" mozallowfullscreen="" src="//player.vimeo.com/video/100245392?api=1&title=0" webkitallowfullscreen="" width="640"></iframe>
31
+-->
32
+
33
+
34
+## What is React?
35
+
36
+[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [Javascript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
37
+
38
+- Is React a Template Library?
39
+- Is React Similar to Web Components?
40
+- Are the Virtual DOM and Shadow DOM the Same?
41
+- Can React be used with other JavaScript MVC Frameworks?
42
+- Who Uses React.js?
43
+- Is React a Premature Optimization if you aren’t Facebook or Instagram?
44
+- Can I Work with Designers?
45
+- Will React Hurt my Search Engine Optimization (SEO)?
46
+- Is React a Framework for Building Applications or a Library with One Feature?
47
+- Are components a better way to build an application?
48
+- Can I build something complex with React?
49
+
50
+
51
+## Referencing Dynamic Children
52
+
53
+While Matt Zabriskie was working on [react-tabs](https://www.npmjs.org/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [referencing dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
54
+
55
+```javascript
56
+var App = React.createClass({
57
+ render: function () {
58
+ var children = React.Children.map(this.props.children, function(child, index) {
59
+ return React.addons.cloneWithProps(child, {
60
+ ref: 'child-' + index
61
+ });
62
+ });
63
+ return <div>{children}</div>;
64
+ }
65
+});
66
+```
67
+
68
+
69
+## JSX with Sweet.js using Readtables
70
+
71
+Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables).
72
+
73
+[](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables)
74
+
75
+
76
+## First Look: Getting Started with React
77
+
78
+[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications
79
+
80
+<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/react/img/blog/first-look.png" /></a></figure>
81
+
82
+
83
+## React Draggable
84
+
85
+[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
86
+
87
+[](http://mzabriskie.github.io/react-draggable/example/)
88
+
89
+
90
+## HTML Parser2 React
91
+
92
+[Jason Brown](http://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.org/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
93
+This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
94
+
95
+```javascript
96
+var html = '<div data-id="1" class="hey this is a class" ' +
97
+ 'style="width:100%;height: 100%;"><article id="this-article">' +
98
+ '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +
99
+ '<li>3</li></ul></div></article></div>';
100
+var parsedComponent = reactParser(html, React);
101
+```
102
+
103
+
104
+## Building UIs with React
105
+
106
+If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!
107
+
108
+<iframe width="650" height="315" src="//www.youtube.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
109
+
110
+
111
+## Random Tweets
112
+
113
+<blockquote class="twitter-tweet" lang="en"><p>We shipped reddit's first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
114
+<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>— spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
docs/img/blog/first-look.png
Binary files /dev/null and b/docs/img/blog/first-look.png differ
docs/img/blog/react-draggable.png
Binary files /dev/null and b/docs/img/blog/react-draggable.png differ
docs/img/blog/skills-matter.png
Binary files /dev/null and b/docs/img/blog/skills-matter.png differ
docs/img/blog/sweet-jsx.png
Binary files /dev/null and b/docs/img/blog/sweet-jsx.png differ