{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2014/02/24/community-roundup-17.html","result":{"data":{"markdownRemark":{"html":"<p>It’s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.</p>\n<h2 id=\"react-in-the-real-world\"><a href=\"#react-in-the-real-world\" 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 in the Real World </h2>\n<h3 id=\"facebook-lookback-video-editor\"><a href=\"#facebook-lookback-video-editor\" 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>Facebook Lookback video editor </h3>\n<p>Large parts of Facebook’s web frontend are already powered by React. The recently released Facebook <a href=\"https://www.facebook.com/lookback/edit/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Lookback video and its corresponding editor</a> are great examples of a complex, real-world React app.</p>\n<h3 id=\"russias-largest-bank-is-now-powered-by-react\"><a href=\"#russias-largest-bank-is-now-powered-by-react\" 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>Russia’s largest bank is now powered by React </h3>\n<p>Sberbank, Russia’s largest bank, recently switched large parts of their site to use React, as detailed in <a href=\"https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">this post by Vyacheslav Slinko</a>.</p>\n<h3 id=\"relato\"><a href=\"#relato\" 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>Relato </h3>\n<p><a href=\"https://bripkens.github.io/relato/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Relato</a> by <a href=\"https://github.com/bripkens\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ben Ripkens</a> shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it’s super fast!</p>\n<h3 id=\"makona-editor\"><a href=\"#makona-editor\" 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>Makona Editor </h3>\n<p> John Lynch (<a href=\"https://twitter.com/johnrlynch\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@johnrlynch</a>) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.\n<a href=\"https://johnthethird.github.io/makona-editor/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 600px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 58.0952380952381%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAABYlAAAWJQFJUiTwAAABB0lEQVQoz5WR226DMBBE/f//FvoCASQXhBC3xDY1gRbwhQ5YokkqleZIwBrv7Ni7ZNmw1s7zrJRCbDawHMdxmiaXgKXWenmEQIYP8oIgyLJMCBFFUVmWwzDUdeP73ulkk2Q5n98ofXc2P+Ld+WsDVaCXUvZ9Pwyft5vk3LStFYLhp8sExqwlSJIkVVXBijGW53lRFPB8dLB77JQ4P2Mcb+J5HqU0DENUSdPU933O+XKnewpcU+CilCYwfNo7BMlSdihB4NN1nb7DHIEcZ0Z+n9CBIbnJ/QHBbdONpmnQz62TByit2g+5HjuOY7R6H8N/7gxZWdVrt/Fgti82zFyubBU7mXkRp/oGrTi7ihfAXTsAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"makona editor\"\n        title=\"\"\n        src=\"/static/3b358d6c45562d5595b516172bd942b0/0a47e/makona-editor.png\"\n        srcset=\"/static/3b358d6c45562d5595b516172bd942b0/65ed1/makona-editor.png 210w,\n/static/3b358d6c45562d5595b516172bd942b0/d10fb/makona-editor.png 420w,\n/static/3b358d6c45562d5595b516172bd942b0/0a47e/makona-editor.png 600w\"\n        sizes=\"(max-width: 600px) 100vw, 600px\"\n      />\n    </span>\n  </span>\n  </a></p>\n<h3 id=\"create-chrome-extensions-using-react\"><a href=\"#create-chrome-extensions-using-react\" 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>Create Chrome extensions using React </h3>\n<p>React is in no way limited to just web pages. Brandon Tilley (<a href=\"https://twitter.com/BinaryMuse\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@BinaryMuse</a>) just released a detailed walk-through of <a href=\"http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">how he built his Chrome extension “Fast Tab Switcher” using React</a>.</p>\n<h3 id=\"twitter-streaming-client\"><a href=\"#twitter-streaming-client\" 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>Twitter Streaming Client </h3>\n<p>Javier Aguirre (<a href=\"https://twitter.com/javaguirre\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@javaguirre</a>) put together a simple <a href=\"http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">twitter streaming client using node, socket.io and React</a>.</p>\n<h3 id=\"sproutsheet\"><a href=\"#sproutsheet\" 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>Sproutsheet </h3>\n<p><a href=\"http://sproutsheet.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Sproutsheet</a> is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It’s currently in beta and supports localStorage, and data/image import and export.</p>\n<h3 id=\"instant-domain-search\"><a href=\"#instant-domain-search\" 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>Instant Domain Search </h3>\n<p><a href=\"https://instantdomainsearch.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Instant Domain Search</a> also uses React. It sure is instant!</p>\n<h3 id=\"svg-based-graphical-node-editor\"><a href=\"#svg-based-graphical-node-editor\" 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>SVG-based graphical node editor </h3>\n<p><a href=\"http://noflojs.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">NoFlo</a> and <a href=\"http://meemoo.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Meemoo</a> developer <a href=\"http://www.forresto.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Forresto Oliphant</a> built an awesome SVG-based <a href=\"https://forresto.github.io/prototyping/react/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">node editor</a> in React.\n<a href=\"https://forresto.github.io/prototyping/react/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 640px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 41.904761904761905%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAABYlAAAWJQFJUiTwAAABZ0lEQVQY013QjW7aMBAH8HM+CIR0pUAaohFoEvvOTgM4JI356to32LT3f5jFRZOmWZZ1svTT/e8Avo7jREniSQUKoyx7LsslIUOEv9cjCol8oikKIOWKV6dtnu7SHXAcg1LAOUi11rVQGIj/8RTRtXjny4P3wgOLXXfE2OSOEZ3bOT93GxT/dnaIvg3+q2Z0DLQJjHm22PcjAG/AUoISU+SuxImSLiEIYbMQOlImtu1Q7zxpokotDjqxOAxnhK+b7aSuV3WVCcEUPqXpOC88Vc21fhHEBK0IU05jdQ3rLjrsFcmVxVH08Ovnb07z45H3fVMUUKnZdvM952H7xm+3E9V+tY/rSqFeShNczOPptO3f0ntsP46TbB30ZnG5rIlY284+P4uunRuTXq+Z4ND3yY+PvNk/UDsyH4vruemMsJgx+y6XIAnK0m5oSJ7noPVjXY+Hn2Hy3W5YtVcWcGhGuoveb+f+vfoDqYo1ZTCNKfAAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"react svg fbp\"\n        title=\"\"\n        src=\"/static/c6e36bd8c08ad65a23cdb74716dd8055/6af66/react-svg-fbp.png\"\n        srcset=\"/static/c6e36bd8c08ad65a23cdb74716dd8055/65ed1/react-svg-fbp.png 210w,\n/static/c6e36bd8c08ad65a23cdb74716dd8055/d10fb/react-svg-fbp.png 420w,\n/static/c6e36bd8c08ad65a23cdb74716dd8055/6af66/react-svg-fbp.png 640w\"\n        sizes=\"(max-width: 640px) 100vw, 640px\"\n      />\n    </span>\n  </span>\n  </a></p>\n<h3 id=\"ultimate-tic-tac-toe-game-in-react\"><a href=\"#ultimate-tic-tac-toe-game-in-react\" 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>Ultimate Tic-Tac-Toe Game in React </h3>\n<p>Rafał Cieślak (<a href=\"https://twitter.com/Ravicious\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@Ravicious</a>) wrote a <a href=\"https://ravicious.github.io/ultimate-ttt/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React version</a> of <a href=\"http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ultimate Tic Tac Toe</a>. Find the source <a href=\"https://github.com/ravicious/ultimate-ttt\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">here</a>.</p>\n<h3 id=\"reactjs-gallery\"><a href=\"#reactjs-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>ReactJS Gallery </h3>\n<p><a href=\"https://github.com/lele85\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Emanuele Rampichini</a>’s <a href=\"https://github.com/lele85/ReactGallery\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ReactJS Gallery</a> is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.</p>\n<p>Emanuele shared this awesome demo video with us:</p>\n<div class=\"gatsby-resp-iframe-wrapper\" style=\"padding-bottom: 48.46153846153846%; position: relative; height: 0; overflow: hidden; \" > <iframe src=\"//www.youtube-nocookie.com/embed/jYcpaemt90M\" frameborder=\"0\" allowfullscreen style=\" position: absolute; top: 0; left: 0; width: 100%; height: 100%; \"></iframe> </div>\n<h2 id=\"react-components\"><a href=\"#react-components\" 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 Components </h2>\n<h3 id=\"table-sorter\"><a href=\"#table-sorter\" 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>Table Sorter </h3>\n<p><a href=\"https://bgerm.github.io/react-table-sorter-demo/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Table Sorter</a> by <a href=\"https://github.com/bgerm\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">bgerm</a> [<a href=\"https://github.com/bgerm/react-table-sorter-demo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">source</a>] is another helpful React component.</p>\n<h3 id=\"static-search\"><a href=\"#static-search\" 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>Static-search </h3>\n<p>Dmitry Chestnykh <a href=\"https://twitter.com/dchest\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@dchest</a> wrote a <a href=\"https://github.com/dchest/static-search\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">static search indexer</a> in Go, along with a <a href=\"http://www.codingrobots.com/search/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React-based web front-end</a> that consumes search result via JSON.</p>\n<h3 id=\"lorem-ipsum-component\"><a href=\"#lorem-ipsum-component\" 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>Lorem Ipsum component </h3>\n<p><a href=\"https://github.com/martinandert\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Martin Andert</a> created <a href=\"https://github.com/martinandert/react-lorem-component\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">react-lorem-component</a>, a simple component for all your placeholding needs.</p>\n<h3 id=\"input-with-placeholder-shim\"><a href=\"#input-with-placeholder-shim\" 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>Input with placeholder shim </h3>\n<p><a href=\"enigma-io/react-input-placeholder\">react-input-placeholder</a> by <a href=\"@enigma-io\">enigma-io</a> is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don’t natively support it.</p>\n<h3 id=\"dicontainer\"><a href=\"#dicontainer\" 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>diContainer </h3>\n<p><a href=\"https://github.com/SpektrumFM/dicontainer\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">dicontainer</a> provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.</p>\n<h2 id=\"react-server-rendering\"><a href=\"#react-server-rendering\" 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 server rendering </h2>\n<p>Ever wonder how to pre-render React components on the server? <a href=\"https://github.com/mhart/react-server-example\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">react-server-example</a> by Michael Hart (<a href=\"https://twitter.com/hichaelmart\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@hichaelmart</a>) walks through the necessary steps.</p>\n<p>Similarly, Alan deLevie (<a href=\"https://twitter.com/adelevie\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@adelevie</a>) created <a href=\"https://github.com/adelevie/react-client-server-starter\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">react-client-server-starter</a>, another detailed walk-through of how to server-render your app.</p>\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<div><blockquote class=\"twitter-tweet\" lang=\"en\"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href=\"https://twitter.com/Camlistore/status/423925795820539904\">January 16, 2014</a></blockquote></div>","excerpt":"It’s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components. React in the Real World  Facebook Lookback video editor  Large parts of Facebook’s web frontend are already powered by React. The recently released Facebook Lookback video and its corresponding editor are great examples of a complex, real-world React app. Russia’s largest bank is now powered…","frontmatter":{"title":"Community Round-up #17","next":null,"prev":null,"author":[{"frontmatter":{"name":"Jonas Gebhardt","url":"https://twitter.com/jonasgebhardt"}}]},"fields":{"date":"February 24, 2014","path":"content/blog/2014-02-24-community-roundup-17.md","slug":"/blog/2014/02/24/community-roundup-17.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/02/24/community-roundup-17.html"}},"staticQueryHashes":[]}