diff --git a/docs/_posts/2014-07-28-community-roundup-20.md b/docs/_posts/2014-07-28-community-roundup-20.md new file mode 100644 index 0000000000000..6611d4eaeb0a8 --- /dev/null +++ b/docs/_posts/2014-07-28-community-roundup-20.md @@ -0,0 +1,116 @@ +--- +title: "Community Round-up #20" +layout: post +author: Lou Husson +--- + +It's an exciting time for React as there are now more commits from open source contributors than Facebook engineers! Keep up the good work :) + +## Atom moves to React + +[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They did the move in order to improve performance. By default, React helped them eliminate unnecessary reflows. Then, they were able to architecture the rendering pipeline in order to minimize repaint with hardware acceleration. This is a testament that React's architecture is viable for high performant applications. + +[](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) + + +## Why Does React Scale? + +At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions of the API that makes it scale for large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014). + + + + +## Live Editing + +The best feature of React is that it provides fundations to implement concepts that were otherwise extremely hard to like server-side rendering, undo-redo, rendering to non-DOM like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](http://gaearon.github.io/react-hot-loader/)! + + + + +## ReactIntl Mixin by Yahoo + +There's a couple of React-related projects that recently appeared on Yahoo's GitHub. The first one is an [internationalization mixin](https://github.com/yahoo/react-intl). That's exciting to see them contributing. + +```javascript +var MyComponent = React.createClass({ + mixins: [ReactIntlMixin], + render: function() { + return ( +
+

{this.intlDate(1390518044403, { hour: 'numeric', minute: 'numeric' })}

+

{this.intlNumber(400, { style: 'percent' })}

+
+ ); + } +}); + +React.renderComponent( + , + document.getElementById('example') +); +``` + +## Thinking and Learning React + +Josephine Hall, working at Ice Lab studio, used React to write a mobile-focused application. She wrote a blog post [“Thinking and Learning React.js”](http://icelab.com.au/articles/thinking-and-learning-reactjs/) to share her experience with elements they had to use. You'll learn about Routing, dispatch, touchable component and basic animations. + + +## London React Meetup + +If you missed the last [London React Meetup](http://www.meetup.com/London-React-User-Group/events/191406572/), the video is available. Lots of great content. + +- What's new in React 0.11 and how to improve performance by guaranteeing immutability +- State handling in React with Morearty.JS +- React on Rails - How to use React with Ruby on Rails, to build isomorphic apps +- Building an isomorphic, real time to do list with moped and node.js + + + +On a related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) is going to be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and share a lot of the design principles and perf optimizations. + + +## Using React and KendoUI Together + +One of the strength of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/). + +
+ + +## Acorn JSX + +Ingvar Stepanyan extended Acorn JavaScript parser to support JSX. The result is a [JSX parser](https://github.com/RReverser/acorn-jsx) that's 1.5-2x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things. It's always a good thing to get competition on performance! + + +## ReactScriptLoader + +Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script. + +```javascript +var Foo = React.createClass({ + mixins: [ReactScriptLoaderMixin], + getScriptURL: function() { + return 'http://d3js.org/d3.v3.min.js'; + }, + getInitialState: function() { + return { scriptLoading: true, scriptLoadError: false }; + }, + onScriptLoaded: function() { + this.setState({scriptLoading: false}); + }, + onScriptError: function() { + this.setState({scriptLoading: false, scriptLoadError: true}); + }, + render: function() { + var message = + this.state.scriptLoading ? 'Loading script...' : + this.state.scriptLoadError ? 'Loading failed' : + 'Loading succeeded'; + return {message}; + } +}); +``` + +## Random Tweet + +

“@apphacker: I take back the mean things I said about @reactjs I actually like it.” Summarizing the life of ReactJS in a single tweet.

— Jordan (@jordwalke) July 20, 2014
+ diff --git a/docs/img/blog/kendoui.png b/docs/img/blog/kendoui.png new file mode 100644 index 0000000000000..2928dafb63569 Binary files /dev/null and b/docs/img/blog/kendoui.png differ