Community Round-up #21

React Router

Ryan Florence and Michael Jackson ported Ember’s router to React in a project called React Router. This is a very good example of both communities working together to make the web better!

React.renderComponent((
  <Routes>
    <Route handler={App}>
      <Route name="about" handler={About}/>
      <Route name="users" handler={Users}>
        <Route name="user" path="/user/:userId" handler={User}/>
      </Route>
    </Route>
  </Routes>
), document.getElementById('example'));

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”

What is React?

Craig McKeachie author of JavaScript Framework Guide wrote an excellent news named “What is React.js? Another Template Library?

• 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 he discovered how to use React.Children.map and React.addons.cloneWithProps in order to reference dynamic children.

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 <div>{children}</div>;
  }
});

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.

First Look: Getting Started with React

Kirill Buga wrote an article on Modern Web explaining how React is different from traditional MVC used by most JavaScript applications