text: webpackJsonp([0xa50e91911998],{720:function(t,e){t.exports={data:{markdownRemark:{html:'<p>React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the <a href="/docs/getting-started.html">docs</a> and do not hesitate to ask questions on the <a href="https://groups.google.com/group/reactjs">Google Group</a>, <a href="irc://chat.freenode.net/reactjs">IRC</a> or <a href="http://stackoverflow.com/questions/tagged/reactjs">Stack Overflow</a>. We are trying our best to help you out!</p>\n<h2 id="the-future-of-javascript-mvc"><a href="#the-future-of-javascript-mvc" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Future of JavaScript MVC</h2>\n<p><a href="https://swannodette.github.io/">David Nolen</a> announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient <a href="/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>\n<blockquote>\n<p>We’ve known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it’s no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.</p>\n<p>Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?</p>\n<p>A whole lot.</p>\n<figure><a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">\n  <a class="gatsby-resp-image-link" href="/static/om-backbone-334ad2139d1fc85a09b69771780e90b4-38f05.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 500px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 52.400000000000006%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAACBUlEQVQozz2Q6U/bQBDF/f9/aKUGELRJk4hWkRpVSiNSKBWHSMAJuHYO54LYDia2Wd/2eg+HOO5SpD7NzPtppLerXQ4mMA6jyPVhEOMoQREkEGGI14hShMMwgBDFMEGIYEyZxXEMIYyiCGPMUUKTlFg0YvW8hoCyiueer8IwyVKEqOkkloMtBxl2EkF2JGHChFBKuTzPLDNuNR5OGsrNuX9xZpy21J+Nh8tj29TTPN9m2fZV2atn//UPWTj3lvb1zs3tR2H6Zd6vDhjw+71RSQ7GQf6a3r6J4TZnk3n+tuEYaCOz825wtze7rzz3i4vbvSlfkMf7K2+IsnxDEGFPW69fWLPJ7kyZ03Sz2XBpnp31lPY+3y0Lo9pU+jrolu86xa5UHZmyu3ThZAkU038CgWJFugufnFAHjmayn6TcS7b5/jg+GPQOF8P6SqlNh+WhUJKFQ2XyJwRdXz0Fk0tnfm0vroDKe1rHVYVAuXFVHQUcxutDcPYeNPai42J6ceCf7thHBbv5IW4J6Xz5NBzpvGz2J9ZgvBJnuvhgSPdWf2aIZqBzimFUlWJlVfiWfK4n5RooVR53q8ZuDX2aJDySfsdSM5n+8uUjr9+IpKYnNoHwA9zW0UrmQKiKDi+6PZmIYyINQ0F0epLXHRHRxtpa61LtKtXaVGkTtc0YKR1/dpncnyNj8hc/cwvV6VusoQAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="om backbone" title="" src="/static/om-backbone-334ad2139d1fc85a09b69771780e90b4-38f05.png" srcset="/static/om-backbone-334ad2139d1fc85a09b69771780e90b4-23e95.png 210w,\n/static/om-backbone-334ad2139d1fc85a09b69771780e90b4-a78cd.png 420w,\n/static/om-backbone-334ad2139d1fc85a09b69771780e90b4-38f05.png 500w" sizes="(max-width: 500px) 100vw, 500px">\n    </span>\n  </span>\n  \n  </a>\n    </a></figure>\n<p><a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">Read the full article…</a></p>\n</blockquote>\n<h2 id="scroll-position-with-react"><a href="#scroll-position-with-react" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Scroll Position with React</h2>\n<p>Managing the scroll position when new content is inserted is usually very tricky to get right. <a href="http://blog.vjeux.com/">Vjeux</a> discovered that <a href="/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="/docs/component-specs.html#updating-componentdidupdate">componentDidUpdate</a> were triggered exactly at the right time to manage the scroll position.</p>\n<blockquote>\n<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-jsx"><code class="gatsby-code-jsx">componentWillUpdate<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">var</span> node <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDOMNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">this</span><span class="token punctuation">.</span>shouldScrollBottom <span class="token operator">=</span>\n    <span class="token punctuation">(</span>node<span class="token punctuation">.</span>scrollTop <span class="token operator">+</span> node<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">)</span> <span class="token operator">===</span> node<span class="token punctuation">.</span>scrollHeight<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span>\ncomponentDidUpdate<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>shouldScrollBottom<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">var</span> node <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDOMNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    node<span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> node<span class="token punctuation">.</span>scrollHeight\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre>\n      </div>\n<p><a href="http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html">Check out the blog article…</a></p>\n</blockquote>\n<h2 id="lights-out"><a href="#lights-out" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Lights Out</h2>\n<p>React declarative approach is well suited to write games. <a href="https://github.com/chenglou">Cheng Lou</a> wrote the famous Lights Out game in React. It’s a good example of use of <a href="/docs/animation.html">TransitionGroup</a> to implement animations.</p>\n<figure><a href="https://chenglou.github.io/react-lights-out/">\n  <a class="gatsby-resp-image-link" href="/static/lights-out-e52d4d2e3aabc23b2e91f37049044467-66098.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 206px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 109.70873786407766%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAIAAABPIytRAAAACXBIWXMAAAsSAAALEgHS3X78AAAEb0lEQVQ4y01U7W8URRjfv8WEVKQFJIJ+kfgJY0hUohK0IC8JkNAialUIGE2taICYgIoxVYxt764tVoS+ePSF4+56ba+9K5Zyfbnbnd2725ndmb19v73btibG565+cDIfnvnN89ud32+eZzjEo3wRl3TDsmxNNxzH1TSNMVYyTEBkTDBWRClv2876+josILEgFZim+77PEUlMT05OR+P5pcVofPrxwmJ6LhWNxlOJhCoJj2amZ2Ox0bGJlZWs47qzialUIpmMTC4k01XX4tJsrX1Wv5zSf1xy7LJXgqEba557V3A7UsZX89YA8jzHZpomyzKl9PosvhgrfvRAGhct7qeM1dCN9vRJrwxiHlNREFZ5waL4XIw1BlBTAJ2KUKoQXkAwKNNe+1PZ3Z9vDErXHhk18jM96IV+af8QyclUREJWQCYl52J0R0h6NiSejgAX8wgJgkBU9dVhvKdfbAqiq/M6d7/gHQyTI2NK25Ru2nZJwSrBG7Z+K2MdHlWOjCrfP7Z826AEMwVXbOvSjN48qhwMK78JZW6tWtGZqjF1w9HvIfdMlLXG2M1FqzfrfBBn78dZYNXpzNitUQZbvTl33TFKTAWK75U5wzRzuVwWdCrFL5Jsa0CE0x4fV848VJuCUlNQbInSo+MKgNsC4vkpxnCRFwSe58HZOpnnQaelyh1JrTEo7uqVTkworVG6MyTtDIlnYxS+BeD2oHhhSqNEBv05QdBKOletVDBRilipmPqQ6J6MqKcj6g+LZjDrnIqosOxatsHUzbg/53iWAclA8cplbrRQOTymnJhQ2+f0TQKQv10wf1mqEWAC8+aiebpOBv2XU8bxCRUM/h0M+zljwWXCVb1zn3yc0HaE/jt2y/+Ofax+bNg6P6UdCmNIBvzavMF1ZqwtXQjy3hypkUHz9rphLQ/ppmEg/ljdMNj6JKG9MYIhfrpHvJI2uDla/XSafT7DbmXMcL7cNslg/rps30Xuh5MM5m3eCWWdtno8KJa7lq3PZhhQorjCQRnbqmxS/I/NAivWoTBpvk++TunfLZgg5O0wufGXeTWtAwhbnU+svy0GxQsUv2xzumEuZ/mlHCoR+ctkTTPU+ckHytkoBZ27esX3YhQs2N1Xiy9Oa0SWV3i0nBOgKznbMiUhByXtUbk9qW3pFrcFpKNjNfKmZgjeHVMAbOgWzyc0UynmRSGPeEMHslfNFNligZGSmSTe9Xntxrw2jJwRybs0rcGv/kDuqOQCeD2txbGn6DYkPykyw61w/bz74h355UHcPAE1Y3hqAeoU9MNNvD6EDwzLHSl9zWS2WnTVQsXSj0e0fYN47x25M+NwUAy7QuJLA/kDIySLKTTtqiCaVGmL0+f68s/3SS1RRgjJIRFamlD2VpjsHciDBd9s9vNTXQh82ncPCwQeAz5bfwzAp4YetLUHnaw9Bpivd4NK6f4hDEW+pRtdgX4W7Y3bOWeAd8aLlaq/5jqO7TgbfmWe+YDDTFJ/3a869bHm+w9xBZIBXzXX/wVp0/f6AcpAZAAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="lights out" title="" src="/static/lights-out-e52d4d2e3aabc23b2e91f37049044467-66098.png" srcset="/static/lights-out-e52d4d2e3aabc23b2e91f37049044467-66098.png 206w" sizes="(max-width: 206px) 100vw, 206px">\n    </span>\n  </span>\n  \n  </a>\n    </a></figure>\n<p><a href="https://chenglou.github.io/react-lights-out/">Try it out!</a></p>\n<h2 id="reactive-table-bookmarklet"><a href="#reactive-table-bookmarklet" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reactive Table Bookmarklet</h2>\n<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> wrote a bookmarklet to process tables on the internet. It adds a little “pop” button that expands to a full-screen view with sorting, editing and export to csv and json.</p>\n<figure><a href="http://www.phpied.com/reactivetable-bookmarklet/">\n  <a class="gatsby-resp-image-link" href="/static/reactive-bookmarklet-6551549bffc01c354de58e2e2c52dcef-36751.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 641px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 19.03276131045242%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAAsSAAALEgHS3X78AAAA80lEQVQI1x3Oy07CQACF4b62iQs1EZ5A3KDsCI0ypNFFEzeKxgVFUYNRQluY6fRip3Oht9gLrRPPA3znV3Zf0yhfeMmLnxhePMd8FqQG5kb0+za5GfbOzgeDS1VVRyO1378AAGiaNvmfruuK8XTwsTi8Xx494+7D+vRueTzzu9N153F7cnXbsy28gShO0sAPIIRZluV5Xtd1URRt2yor+J1yUjmmoD5yN01bMhH+hJhQfwyu56/vnyvb2iKMMaXUtm1CiFRc143jWHEcVDf7ttnvBEMOkh7nzAs8xiIAxpZpEkmFoRBCfjLGyrLknMuCqqr+ANcfy3JZUhNJAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="reactive bookmarklet" title="" src="/static/reactive-bookmarklet-6551549bffc01c354de58e2e2c52dcef-36751.png" srcset="/static/reactive-bookmarklet-6551549bffc01c354de58e2e2c52dcef-5eda9.png 210w,\n/static/reactive-bookmarklet-6551549bffc01c354de58e2e2c52dcef-74b72.png 420w,\n/static/reactive-bookmarklet-6551549bffc01c354de58e2e2c52dcef-36751.png 641w" sizes="(max-width: 641px) 100vw, 641px">\n    </span>\n  </span>\n  \n  </a>\n    </a></figure>\n<p><a href="http://www.phpied.com/reactivetable-bookmarklet/">Check out the blog post…</a></p>\n<h2 id="montagejs-tutorial-in-react"><a href="#montagejs-tutorial-in-react" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>MontageJS Tutorial in React</h2>\n<p><a href="https://twitter.com/ssorallen">Ross Allen</a> implemented <a href="http://montagejs.org/">MontageJS</a>’s <a href="http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html">Reddit tutorial</a> in React. This is a good opportunity to compare the philosophies of the two libraries.</p>\n<p><a href="https://jsfiddle.net/ssorallen/fEsYt/">View the source on JSFiddle…</a></p>\n<h2 id="writing-good-react-components"><a href="#writing-good-react-components" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing Good React Components</h2>\n<p><a href="http://blog.whn.se/">William Högman Rudenmalm</a> wrote an article on how to write good React components. This is full of good advice.</p>\n<blockquote>\n<p>The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.</p>\n<p>The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.</p>\n<p>You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.</p>\n<p><a href="http://blog.whn.se/post/69621609605/writing-good-react-components">Read the full article …</a></p>\n</blockquote>\n<h2 id="hoodie-react-todomvc"><a href="#hoodie-react-todomvc" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Hoodie React TodoMVC</h2>\n<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>\n<div class="gatsby-highlight">\n      <pre class="gatsby-code-text"><code class="gatsby-code-text">hoodie new todomvc -t &quot;hoodiehq/hoodie-react-todomvc&quot;</code></pre>\n      </div>\n<p><a href="https://github.com/hoodiehq/hoodie-react-todomvc">Check out on GitHub…</a></p>\n<h2 id="jsx-compiler"><a href="#jsx-compiler" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>JSX Compiler</h2>\n<p>Ever wanted to have a quick way to see what a JSX tag would be converted to? <a href="http://www.yungsters.com/">Tim Yung</a> made a page for it.</p>\n<figure><a href="/react/jsx-compiler.html">\n  <a class="gatsby-resp-image-link" href="/static/jsx-compiler-37ce6d8aee23d1828ba57953662522fe-527d5.png" style="display: block" target="_blank" rel="noopener">\n  \n  <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; ; max-width: 595px; margin-left: auto; margin-right: auto;">\n    <span class="gatsby-resp-image-background-image" style="padding-bottom: 37.14285714285714%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAAA/klEQVQY00WQ2XLDIAxF+f9vbJI6ttmFAYEEb5VpphV3QDraZlBYEgRTyzXnZB7/tgLm+5lyFuDfWMgyhdml8M5JN4RWo4j7NSkzFXE6gggXp5YmZ9GgPOkaXBSWGMPb2m/RcX55t6V0AuyEwnetH+f5MOZllyDuF5y1mBh3LF5xS9a+jH4GvxGG0SP12NBRg1699dtunx52rE6yrbouTgt3AYIaPXl/GGdc0AmOnE25jIwQ3jE4r00wCc57YbbcwiRY2TgoqY7Rug3ANowlG9kg40cP3OULfMm+loDFlaxlpzR/Ors4STHhYJxcB1VxbhEyVV73gh++4J+KFPwA0/SKUfUfu9wAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;">\n      <img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="jsx compiler" title="" src="/static/jsx-compiler-37ce6d8aee23d1828ba57953662522fe-527d5.png" srcset="/static/jsx-compiler-37ce6d8aee23d1828ba57953662522fe-2583d.png 210w,\n/static/jsx-compiler-37ce6d8aee23d1828ba57953662522fe-7370c.png 420w,\n/static/jsx-compiler-37ce6d8aee23d1828ba57953662522fe-527d5.png 595w" sizes="(max-width: 595px) 100vw, 595px">\n    </span>\n  </span>\n  \n  </a>\n    </a></figure>\n<p><a href="/jsx-compiler.html">Try it out!</a></p>\n<h2 id="random-tweet"><a href="#random-tweet" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Random Tweet</h2>\n<center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>',excerpt:"React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the  docs  and do not hesitate to ask questions on the  Google Group ,  IRC  or  Stack Overflow . We are trying our best to help you out! The Future of JavaScript MVC David Nolen  announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient…",frontmatter:{title:"Community Round-up #12",next:null,prev:null,author:[{frontmatter:{name:"Vjeux",url:"https://twitter.com/vjeux"}}]},fields:{date:"December 22, 2013",path:null,slug:"/blog/2013/12/23/community-roundup-12.html"}},allMarkdownRemark:{edges:[{node:{frontmatter:{title:"You Probably Don't Need Derived State"},fields:{slug:"/blog/2018/06/07/you-probably-dont-need-derived-state.html"}}},{node:{frontmatter:{title:"React v16.4.0: Pointer Events"},fields:{slug:"/blog/2018/05/23/react-v-16-4.html"}}},{node:{frontmatter:{title:"React v16.3.0: New lifecycles and context API"},fields:{slug:"/blog/2018/03/29/react-v-16-3.html"}}},{node:{frontmatter:{title:"Update on Async Rendering"},fields:{slug:"/blog/2018/03/27/update-on-async-rendering.html"}}},{node:{frontmatter:{title:"Sneak Peek: Beyond React 16"},fields:{slug:"/blog/2018/03/01/sneak-peek-beyond-react-16.html"}}},{node:{frontmatter:{title:"Behind the Scenes: Improving the Repository Infrastructure"},fields:{slug:"/blog/2017/12/15/improving-the-repository-infrastructure.html"}}},{node:{frontmatter:{title:"Introducing the React RFC Process"},fields:{slug:"/blog/2017/12/07/introducing-the-react-rfc-process.html"}}},{node:{frontmatter:{title:"React v16.2.0: Improved Support for Fragments"},fields:{slug:"/blog/2017/11/28/react-v16.2.0-fragment-support.html"}}},{node:{frontmatter:{title:"React v16.0"},fields:{slug:"/blog/2017/09/26/react-v16.0.html"}}},{node:{frontmatter:{title:"React v15.6.2"},fields:{slug:"/blog/2017/09/25/react-v15.6.2.html"}}}]}},pathContext:{slug:"/blog/2013/12/23/community-roundup-12.html"}}}});
  //# sourceMappingURL=path---blog-2013-12-23-community-roundup-12-html-19dd611279b3094340db.js.map