{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2014/08/03/community-roundup-21.html","result":{"data":{"markdownRemark":{"html":"

React Router

\n

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!

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

Going Big with React

\n

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”

\n

\n \n \n \n \n \n

\n\n

What is React?

\n

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

\n\n

Referencing Dynamic Children

\n

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.

\n
var App = React.createClass({\n  render: function () {\n    var children = React.Children.map(this.props.children, function(child, index) {\n      return React.addons.cloneWithProps(child, {\n        ref: 'child-' + index\n      });\n    });\n    return <div>{children}</div>;\n  }\n});
\n

JSX with Sweet.js using Readtables

\n

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.

\n

\n \n \n \n \n \n

\n

First Look: Getting Started with React

\n

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

\n
\n \n \n \"first\n \n \n
\n

React Draggable

\n

Matt Zabriskie released a project to make your react components draggable.

\n

\n \n +\n 'style=\"width:100%;height: 100%;\"><article id=\"this-article\">' +\n '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +\n '<li>3</li></ul></div></article></div>';\nvar parsedComponent = reactParser(html, React);\n

Building UIs with React

\n

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!

\n
\n

Random Tweets

\n

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

— Brian Holt (@holtbt) July 28, 2014
\n

.@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
","excerpt":"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! 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…","frontmatter":{"title":"Community Round-up #21","next":null,"prev":null,"author":[{"frontmatter":{"name":"Lou Husson","url":"https://twitter.com/loukan42"}}]},"fields":{"date":"August 03, 2014","path":"content/blog/2014-08-03-community-roundup-21.md","slug":"/blog/2014/08/03/community-roundup-21.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2014/08/03/community-roundup-21.html"}},"staticQueryHashes":[]}