-
Notifications
You must be signed in to change notification settings - Fork 47.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
298 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <title>React | Community Round-up #4</title> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <meta property="og:title" content="React | Community Round-up #4" /> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:url" content="http://facebook.github.io/react/blog/2013/07/03/community-roundup-4.html" /> | ||
| <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" /> | ||
| <meta property="og:description" content="A JavaScript library for building user interfaces" /> | ||
|
|
||
| <link rel="shortcut icon" href="/react/favicon.ico"> | ||
| <link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml"> | ||
|
|
||
| <link rel="stylesheet" href="/react/css/react.css"> | ||
| <link rel="stylesheet" href="/react/css/syntax.css"> | ||
| <link rel="stylesheet" href="/react/css/codemirror.css"> | ||
|
|
||
| <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script> | ||
| <script type="text/javascript">try{Typekit.load();}catch(e){}</script> | ||
|
|
||
| <script type="text/javascript" src="/react/js/codemirror.js"></script> | ||
| <script type="text/javascript" src="/react/js/javascript.js"></script> | ||
| <script type="text/javascript" src="/react/js/react.min.js"></script> | ||
| <script type="text/javascript" src="/react/js/JSXTransformer.js"></script> | ||
| <script type="text/javascript" src="/react/js/live_editor.js"></script> | ||
| <script type="text/javascript" src="/react/js/showdown.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
|
|
||
| <div class="nav-main"> | ||
| <div class="wrap"> | ||
| <a class="nav-home" href="/react/index.html"> | ||
| <img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38"> | ||
| React | ||
| </a> | ||
| <ul class="nav-site"> | ||
| <li><a href="/react/docs/getting-started.html">docs</a></li> | ||
| <li><a href="/react/support.html">support</a></li> | ||
| <li><a href="/react/downloads.html">download</a></li> | ||
| <li><a href="/react/blog/" class="active">blog</a></li> | ||
| <li><a href="http://github.com/facebook/react">github</a> | ||
| </ul> | ||
| <!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> --> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <section class="content wrap blogContent"> | ||
| <div class="nav-docs"> | ||
| <div class="nav-docs-section"> | ||
| <h3>Recent posts</h3> | ||
| <ul> | ||
|
|
||
| <li><a href="/react/blog/2013/07/03/community-roundup-4.html" class="active">Community Round-up #4</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></li> | ||
|
|
||
| <li><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></li> | ||
|
|
||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="inner-content"> | ||
| <h1>Community Round-up #4</h1> | ||
| <p class="meta">July 3, 2013 by Vjeux</p> | ||
|
|
||
| <hr> | ||
|
|
||
| <div class="post"> | ||
| <p>React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.</p> | ||
|
|
||
| <h2>Khan Academy</h2> | ||
|
|
||
| <p><a href="http://bjk5.com/">Ben Kamens</a> explains how <a href="http://benalpert.com/">Ben Alpert</a> and <a href="http://joelburget.com/">Joel Burget</a> are promoting React inside of <a href="https://www.khanacademy.org/">Khan Academy</a>. They now have three projects in the works using React.</p> | ||
|
|
||
| <blockquote> | ||
| <p>Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.</p> | ||
|
|
||
| <p>"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"</p> | ||
|
|
||
| <p><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology">Read the full post...</a></p> | ||
| </blockquote> | ||
|
|
||
| <p>The best part is the demo of how React reconciliation process makes live editing more user-friendly.</p> | ||
|
|
||
| <blockquote> | ||
| <p>Our renderer, post-React, is on the left. A typical math editor's preview is on the right. | ||
| <figure><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology"><img src="/react/img/blog/monkeys.gif" width="70%" /></a></figure></p> | ||
| </blockquote> | ||
|
|
||
| <h2>React Snippets</h2> | ||
|
|
||
| <p>Over the past several weeks, members of our team, <a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="http://zpao.com/">Paul O'Shannessy</a>, answered many questions that were asked in the <a href="https://groups.google.com/forum/#!forum/reactjs">React group</a>. They give a good overview of how to integrate React with other libraries and APIs through the use of <a href="/react/docs/mixins.html">Mixins</a> and <a href="/react/docs/advanced-components.html">Lifecycle Methods</a>.</p> | ||
|
|
||
| <blockquote> | ||
| <p><a href="https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk">Listening Scroll Event</a></p> | ||
|
|
||
| <ul> | ||
| <li><a href="http://jsfiddle.net/aabeL/1/">JSFiddle</a>: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.</li> | ||
| </ul> | ||
|
|
||
| <p><a href="https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo">Fade-in Transition</a></p> | ||
|
|
||
| <ul> | ||
| <li><a href="http://jsfiddle.net/ufe8k/1/">JSFiddle</a>: Creating a new <code><FadeInWhenAdded></code> component and using jQuery <code>.fadeIn()</code> function on the DOM node.</li> | ||
| <li><a href="http://jsfiddle.net/R8f5L/5/">JSFiddle</a>: Using CSS transition instead.</li> | ||
| </ul> | ||
|
|
||
| <p><a href="https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4">Socket.IO Integration</a></p> | ||
|
|
||
| <ul> | ||
| <li><a href="https://gist.github.com/zpao/5686416">Gist</a>: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.</li> | ||
| <li><a href="https://gist.github.com/petehunt/5687230">Gist</a>: This example is doing everything -- including the IO -- inside of a single React component.</li> | ||
| <li><a href="https://gist.github.com/petehunt/5687276">Gist</a>: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.</li> | ||
| </ul> | ||
|
|
||
| <p><a href="https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4">Sortable jQuery Plugin Integration</a></p> | ||
|
|
||
| <ul> | ||
| <li><a href="http://jsfiddle.net/LQxy7/">JSFiddle</a>: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().</li> | ||
| </ul> | ||
| </blockquote> | ||
|
|
||
| <h2>Introduction to React Screencast</h2> | ||
|
|
||
| <p><a href="http://www.petehunt.net/">Pete Hunt</a> recorded himself implementing a simple <code><Blink></code> tag in React.</p> | ||
|
|
||
| <figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure> | ||
|
|
||
| <h2>Snake in React</h2> | ||
|
|
||
| <p><a href="http://tomocchino.com/">Tom Occhino</a> implemented Snake in 150 lines with React.</p> | ||
|
|
||
| <blockquote> | ||
| <p><a href="https://github.com/tomocchino/react-snake/blob/master/src/snake.js">Check the source on Github</a> | ||
| <figure><a href="http://tomocchino.github.io/react-snake/"><img src="/react/img/blog/snake.png" alt=""></a></figure></p> | ||
| </blockquote> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div> | ||
| <div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/blog/2013/07/03/community-roundup-4.html"></div> | ||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
| <footer class="wrap"> | ||
| <div class="left">A Facebook & Instagram collaboration.</div> | ||
| <div class="right">© 2013 Facebook Inc.</div> | ||
| </footer> | ||
| </div> | ||
| <div id="fb-root"></div> | ||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
| ga('create', 'UA-41298772-1', 'facebook.github.io'); | ||
| ga('send', 'pageview'); | ||
|
|
||
| !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); | ||
|
|
||
| (function(d, s, id) { | ||
| var js, fjs = d.getElementsByTagName(s)[0]; | ||
| if (d.getElementById(id)) return; | ||
| js = d.createElement(s); js.id = id; | ||
| js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527"; | ||
| fjs.parentNode.insertBefore(js, fjs); | ||
| }(document, 'script', 'facebook-jssdk')); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.