{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2013/11/18/community-roundup-11.html","result":{"data":{"markdownRemark":{"html":"<p>This round-up is the proof that React has taken off from its Facebook’s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>\n<h2 id=\"super-vanjs-2013-talk\"><a href=\"#super-vanjs-2013-talk\" aria-hidden 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>Super VanJS 2013 Talk </h2>\n<p><a href=\"https://github.com/steveluscher\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Steve Luscher</a> working at <a href=\"https://leanpub.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">LeanPub</a> made a 30 min talk at <a href=\"https://twitter.com/vanjs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Super VanJS</a>. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.</p>\n<div class=\"gatsby-resp-iframe-wrapper\" style=\"padding-bottom: 52%; position: relative; height: 0; overflow: hidden; \" > <figure><iframe src=\"//www.youtube-nocookie.com/embed/1OeXsL5mr4g\" frameborder=\"0\" allowfullscreen style=\" position: absolute; top: 0; left: 0; width: 100%; height: 100%; \"></iframe></figure> </div>\n<h2 id=\"react-tips\"><a href=\"#react-tips\" aria-hidden 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>React Tips </h2>\n<p><a href=\"http://connormcsheffrey.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Connor McSheffrey</a> and <a href=\"https://github.com/chenglou\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Cheng Lou</a> added a new section to the documentation. It’s a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we <a href=\"/tips/introduction.html\">encourage you to contribute</a>!</p>\n<ul>\n<li><a href=\"/tips/inline-styles.html\">Inline Styles</a></li>\n<li><a href=\"/tips/if-else-in-JSX.html\">If-Else in JSX</a></li>\n<li><a href=\"/tips/self-closing-tag.html\">Self-Closing Tag</a></li>\n<li><a href=\"/tips/maximum-number-of-jsx-root-nodes.html\">Maximum Number of JSX Root Nodes</a></li>\n<li><a href=\"/tips/style-props-value-px.html\">Shorthand for Specifying Pixel Values in style props</a></li>\n<li><a href=\"/tips/children-props-type.html\">Type of the Children props</a></li>\n<li><a href=\"/tips/controlled-input-null-value.html\">Value of null for Controlled Input</a></li>\n<li><a href=\"/tips/componentWillReceiveProps-not-triggered-after-mounting.html\"><code class=\"gatsby-code-text\">componentWillReceiveProps</code> Not Triggered After Mounting</a></li>\n<li><a href=\"/tips/props-in-getInitialState-as-anti-pattern.html\">Props in getInitialState Is an Anti-Pattern</a></li>\n<li><a href=\"/tips/dom-event-listeners.html\">DOM Event Listeners in a Component</a></li>\n<li><a href=\"/tips/initial-ajax.html\">Load Initial Data via AJAX</a></li>\n<li><a href=\"/tips/false-in-jsx.html\">False in JSX</a></li>\n</ul>\n<h2 id=\"intro-to-the-react-framework\"><a href=\"#intro-to-the-react-framework\" aria-hidden 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>Intro to the React Framework </h2>\n<p><a href=\"http://blog.pixelingene.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Pavan Podila</a> wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.</p>\n<blockquote>\n<p>Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.</p>\n</blockquote>\n<figure><a href=\"http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660\">\n  <span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block;  max-width: 591px; margin-left: auto; margin-right: auto;\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 58.0952380952381%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAAsSAAALEgHS3X78AAABsElEQVQoz52S20/CMBTG96d7edJofPGaiLcHTEy8JPrgkyhERGEDr0AGTBiC4aa7tF3btbPrdEr0yaVZ2q/nd87X0yoeRpyz4F+fojcf9NajmHHOI4lSHyICEEEeicW/YUxQo11hcXHOtg61qZXz2URmYum8avSExuIUUZiZChxTwtSLbDP2WUZ/7mVVPVesXZcMx8VC9Nk43DwLbAm76B1TJG0z36eWZREPfoVi7ntjRiN4UA7QKITf3B7xkQPwYvJmYed6Zj2zmMxDhLWnztqetnGgru+X8vftz6ZE3t4agWeFcN8yEbEJZZl8PZXTU7laplAXLm4rne0jbfdY3T4qlMovY7DdDjwnhDujuiM9iN3YHZOHxB6kRFwlEJhQZFNkDOgFNDya0uw/WWAgWxruxo0lGIkhE/mC/0ot/8TFVlfEKoXG6ctI/3nPtdawWO5eFeulShdAbHbfs2rj5q51W3213TCdbWojIxtWNocVGw1iWNRJ7KvTq+n5rezUSvq5PUie3Inl3Obl5PJF1Rhy1B8auShY+f1uMCYugGJAKOpwSqjrQgCQWH4/ODn5AJTjoaES5/otAAAAAElFTkSuQmCC&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=\"tutsplus\" title src=\"/static/665d6cdd9250ec273690046a14392189/e4c9a/tutsplus.png\" srcset=\"/static/665d6cdd9250ec273690046a14392189/65ed1/tutsplus.png 210w,\n/static/665d6cdd9250ec273690046a14392189/d10fb/tutsplus.png 420w,\n/static/665d6cdd9250ec273690046a14392189/e4c9a/tutsplus.png 591w\" sizes=\"(max-width: 591px) 100vw, 591px\">\n    </span>\n  </span>\n  </a></figure>\n&gt;\n&gt; [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)\n<h2 id=\"140-characters-textarea\"><a href=\"#140-characters-textarea\" aria-hidden 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>140-characters textarea </h2>\n<p><a href=\"https://github.com/brainkim\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Brian Kim</a> wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.</p>\n<p data-height=\"178\" data-theme-id=\"0\" data-slug-hash=\"FECGb\" data-user=\"brainkim\" data-default-tab=\"result\" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>\n<script async src=\"//codepen.io/assets/embed/ei.js\"></script>\n<h2 id=\"genesis-skeleton\"><a href=\"#genesis-skeleton\" aria-hidden 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>Genesis Skeleton </h2>\n<p><a href=\"https://ericclemmons.github.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Eric Clemmons</a> is working on a “Modern, opinionated, full-stack starter kit for rapid, streamlined application development”. The version 0.4.0 has just been released and has first-class support for React.</p>\n<figure><a href=\"http://genesis-skeleton.com/\">\n  <span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block;  max-width: 473px; margin-left: auto; margin-right: auto;\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 41.42857142857143%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAABwElEQVQY0w3Q6W+aYACAcZIu2ZZ0R5xH2cosovAqXoByi8glIIgCHgiS6WqXLJqsm/9/5vP99+WBPt4/oE/tShl79+bT27v793cfatXWbL4YaTZa6wPAsYJueYEZRKCvlOF2GSYLJeLzl3qhWIcqpSeS5FodqUVQKNJAYBSrdVRzMY0zydvG+5/58TnL88PLLy9OdWfNSx7ZHRMtoVQBULHwSLaHrhfOvXAkqCNJoylFVJducpyuNofj4fX1z+V8/nv9l7+cLX+n6KGiLTlxilR7EFxBuYFkjC26w4isqE8sjjecIAt/nDZ5fno+Xa/X37cuF2994MaBOUsmZsxJLtYYQijSZBllSMkE1ungXZaWKXo8HLkjJ/JWN57vdrt0v59vUn2RyHbEjueMNGtTWhUbQg9FpPoIKFrRDX9q+yyvEaRAtCXQVVQ/CnfpNktVP+ad2E1SNdiK9lq0Y4yUkRuGSyjyFQeAlmXL9aN1kuvmkiR5rMF0WUP1N7q3EoxwoIXaMrNWe9VPGDVoMgagNAiBG99hDP2GgwZF3VZJpiTbg4GON/k64Lus2WMtWpoJZmSv9vMkE7SgLzg90cH7k//LoHNa9Jx0hgAAAABJRU5ErkJggg==&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=\"genesis skeleton\" title src=\"/static/259206cbb4fb491a332101fe243eed3c/c7c3c/genesis_skeleton.png\" srcset=\"/static/259206cbb4fb491a332101fe243eed3c/65ed1/genesis_skeleton.png 210w,\n/static/259206cbb4fb491a332101fe243eed3c/d10fb/genesis_skeleton.png 420w,\n/static/259206cbb4fb491a332101fe243eed3c/c7c3c/genesis_skeleton.png 473w\" sizes=\"(max-width: 473px) 100vw, 473px\">\n    </span>\n  </span>\n  </a>a&gt;</figure>\n<h2 id=\"agflow-talk\"><a href=\"#agflow-talk\" aria-hidden 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>AgFlow Talk </h2>\n<p><a href=\"http://rz.scale-it.pl/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Robert Zaremba</a> working on <a href=\"http://www.agflow.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">AgFlow</a> recently talked in Poland about React.</p>\n<blockquote>\n<p>In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone …) in AgFlow, where I’m leading an application development.</p>\n<p>During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!</p>\n<p><a href=\"http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Read the full article…</a></p>\n</blockquote>\n<figure><iframe src=\"https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false\" frameborder=\"0\" width=\"100%\" height=\"468\" allowfullscreen=\"true\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"> </iframe></figure>\n<h2 id=\"jsx\"><a href=\"#jsx\" aria-hidden 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 </h2>\n<p><a href=\"http://tck.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Todd Kennedy</a> working at Condé Nast wrote <a href=\"https://github.com/CondeNast/JSXHint\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JSXHint</a> and explains in a blog post his perspective on JSX.</p>\n<blockquote>\n<p>Lets start with the elephant in the room: JSX?\nIs this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.</p>\n<p>Creating elements in memory is quick — copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we’re dealing with something that needs to update the DOM frequently.</p>\n<p><a href=\"http://tck.io/posts/jsxhint_and_react.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Read the full article…</a></p>\n</blockquote>\n<h2 id=\"photo-gallery\"><a href=\"#photo-gallery\" aria-hidden 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>Photo Gallery </h2>\n<p><a href=\"http://miekd.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Maykel Loomans</a>, designer at Instagram, wrote a gallery for photos he shot using React.</p>\n<figure><a href=\"http://photos.miekd.com/xoxo2013/\">\n  <span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block;  max-width: 550px; margin-left: auto; margin-right: auto;\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 54.761904761904766%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACf0lEQVQozyWQ20sUcRzFx9W10d11Zt2d+87t95vrzsxeI9bdzdwVXRcxvFCJd+1BrSwLevFFCOrBQMwgDK2MggyhqCShnqKg17AQg8iXIHrqX+gnfTmct885Xw4GNR1omqyqMoCWHW8iAlDl+qtt/dVSsSVV7ciXWrOnWrPJpC5KtK7rtuMahmGapm3HMQVAXhQYnuNFCcEME4Y6UymnlxZm7ty4NjRQnJ+uzk62z5yvdHZkFNQhCRwdpimSbA5hrCgS4RAewCmWMS2b5SMKoBVIeSllrLdtcfLMwsXBuamuiZFyuZwBQDVUHsaiIksSwXqMQSHhULApyAkx9I2mCcm0ms9buYLRngPbtxenxrqnxyvDQ6ViWwoCAGVOVzhd5oAQwRz36JA7juMlkoViuqcnV273xicG1leWP73d2dremrs8fPXKyOhorxN3AAoAKoRHwuy447ie6yW8RMLxkoVS8cL85KXZ8bXVtf2vh3tfvv/5/ff+w3vDg6f7OlsVRa7D/ZgPw2qxIzctNBNKdJESybQMQb6QWr+7urv95v3uh4ODw58/fi2vLIM40E3F0KAfr/fV+f4LMyzbQrDrITiVzrJijGjyd3WefHB9euflu/29g4+bGyN91YjI8qpo6hAPNvj8vpraGiRMBrIEZKBBDQLX9UQ5FuPJYxGyv3zi8+bGt9evHi3d8lLQzbiUwFuGTjSTiA8QoRrUTDMRLsZIUkxSZMuy0PYIpvloMtdy81z3i8fPnzx9drZs2ZBRRda1TTISxkOBxjCJ+jGKpiAEoiyxAg81jYhEg81RgmLMeDxzPNtSKObSniHzUOYNRbAtk2Lp+kbcH8Abgg3/AEbTjl9MaeMjAAAAAElFTkSuQmCC&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=\"xoxo2013\" title src=\"/static/c49a2228158e7329a62e140b3ae56b81/dd45a/xoxo2013.png\" srcset=\"/static/c49a2228158e7329a62e140b3ae56b81/65ed1/xoxo2013.png 210w,\n/static/c49a2228158e7329a62e140b3ae56b81/d10fb/xoxo2013.png 420w,\n/static/c49a2228158e7329a62e140b3ae56b81/dd45a/xoxo2013.png 550w\" sizes=\"(max-width: 550px) 100vw, 550px\">\n    </span>\n  </span>\n  </a>a&gt;</figure>\n<h2 id=\"random-tweet\"><a href=\"#random-tweet\" aria-hidden 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<img src=\"/9a234bbe4d23c11a99f5b334b3f25f9b/steve_reverse.gif\" style=\"float: right;\">\n<div style=\"width: 320px;\"><blockquote class=\"twitter-tweet\"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href=\"http://t.co/JoX0XqSXX3\">http://t.co/JoX0XqSXX3</a></p>&#x2014; Ryan Seddon (@ryanseddon) <a href=\"https://twitter.com/ryanseddon/statuses/398572848802852864\">November 7, 2013</a></blockquote></div>","excerpt":"This round-up is the proof that React has taken off from its Facebook’s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming! Super VanJS 2013 Talk  Steve Luscher working at LeanPub made a 30 min talk at Super VanJS. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API. React Tips  Connor McSheffrey and Cheng Lou added a new section to the documentation. It’s a list of small…","frontmatter":{"title":"Community Round-up #11","next":null,"prev":null,"author":[{"frontmatter":{"name":"Vjeux","url":"https://twitter.com/vjeux"}}]},"fields":{"date":"November 18, 2013","path":"content/blog/2013-11-18-community-roundup-11.md","slug":"/blog/2013/11/18/community-roundup-11.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/2013/11/18/community-roundup-11.html"}},"staticQueryHashes":[]}