diff --git a/docs/_posts/2014-08-03-community-roundup-21.md b/docs/_posts/2014-08-03-community-roundup-21.md new file mode 100644 index 0000000000000..1843bb6ed0572 --- /dev/null +++ b/docs/_posts/2014-08-03-community-roundup-21.md @@ -0,0 +1,114 @@ +--- +title: "Community Round-up #21" +layout: post +author: Lou Husson +--- + +## React Router +[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! + +```javascript +React.renderComponent(( + + + + + + + + +), document.body); +``` + +## Going Big with React + +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" + +[![](/react/img/blog/skills-matter.png)](https://skillsmatter.com/skillscasts/5429-going-big-with-react) + + + + +## What is React? + +[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/) + +- Is React a template library? +- Is React similar to Web Components? +- Are the Virtual DOM and Shadow DOM the same? +- Can React be used with other JavaScript MVC frameworks? +- Who uses React? +- Is React a premature optimization if you aren’t Facebook or Instagram? +- Can I work with designers? +- Will React hurt my search engine optimizations (SEO)? +- Is React a framework for building applications or a library with one feature? +- Are components a better way to build an application? +- Can I build something complex with React? + + +## Referencing Dynamic Children + +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 [refere dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children). + +```javascript +var App = React.createClass({ + render: function () { + var children = React.Children.map(this.props.children, function(child, index) { + return React.addons.cloneWithProps(child, { + ref: 'child-' + index + }); + }); + return
{children}
; + } +}); +``` + + +## JSX with Sweet.js using Readtables + +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). + +[![](/react/img/blog/sweet-jsx.png)](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables) + + +## First Look: Getting Started with React + +[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 + +
+ + +## React Draggable + +[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable. + +[![](/react/img/blog/react-draggable.png)](http://mzabriskie.github.io/react-draggable/example/) + + +## HTML Parser2 React + +[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. +This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML. + +```javascript +var html = '
' + + '

hey this is a paragraph

  • 1
  • 2
  • ' + + '
  • 3
'; +var parsedComponent = reactParser(html, React); +``` + + +## Building UIs with React + +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! + + + + +## Random Tweets + +

We shipped reddit's first production @reactjs code last week, our checkout process. https://t.co/KUInwsCmAF

— Brian Holt (@holtbt) July 28, 2014
+

.@AirbnbNerds just launched our first user-facing React.js feature to production! We love it so far. https://t.co/KtyudemcIW /@floydophone

— spikebrehm (@spikebrehm) July 22, 2014
diff --git a/docs/img/blog/first-look.png b/docs/img/blog/first-look.png new file mode 100644 index 0000000000000..80551a12f3c9c Binary files /dev/null and b/docs/img/blog/first-look.png differ diff --git a/docs/img/blog/react-draggable.png b/docs/img/blog/react-draggable.png new file mode 100644 index 0000000000000..f0fe84af388a4 Binary files /dev/null and b/docs/img/blog/react-draggable.png differ diff --git a/docs/img/blog/skills-matter.png b/docs/img/blog/skills-matter.png new file mode 100644 index 0000000000000..7153a6e0fc1d1 Binary files /dev/null and b/docs/img/blog/skills-matter.png differ diff --git a/docs/img/blog/sweet-jsx.png b/docs/img/blog/sweet-jsx.png new file mode 100644 index 0000000000000..6f126aecbdde3 Binary files /dev/null and b/docs/img/blog/sweet-jsx.png differ