Community Round-up # 17
Jonas Gebhardt committed
Feb 24, 2014 at 13:54 UTC
5049fc6b059e25ebad4dc4fe9a2d3c0dd4794ea3
3 files changed
+95
docs/_posts/2014-02-24-community-roundup-17.md
new
+95
@@ -0,0 +1,95 @@
1
+---
2
+title: "Community Round-up #17"
3
+layout: post
4
+author: Jonas Gebhardt
5
+---
6
+
7
+
8
+It's exciting to see the number of real-world React applications and components skyrocket over the pasts months! This community round-up features a few examples of inspiring React applications and components.
9
+
10
+## React in the Real World
11
+
12
+### Facebook Lookback video editor
13
+Large parts of Facebook's web frontend are already powered by React. The recently released Facebook [Lookback video and its corresponding editor](https://www.facebook.com/lookback/edit/) are great examples of a complex, real-world React app.
14
+
15
+### Russia's largest bank is now powered by React
16
+Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
17
+
18
+### Relato
19
+[Relato](http://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) 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!
20
+
21
+### Makona Editor
22
+
23
+ John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) 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.
24
+<figure>[](http://johnthethird.github.io/makona-editor/)</figure>
25
+
26
+### Create Chrome extensions using React
27
+React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
28
+
29
+
30
+### Twitter Streaming Client
31
+
32
+Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a simple [twitter streaming client using node, socket.io and React](http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/).
33
+
34
+
35
+### Sproutsheet
36
+
37
+[Sproutsheet](http://sproutsheet.com/) 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.
38
+
39
+### Instant Domain Search
40
+[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
41
+
42
+
43
+### SVG-based graphical node editor
44
+[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](http://forresto.github.io/prototyping/react/) in React.
45
+ <figure>[](http://forresto.github.io/prototyping/react/)</figure>
46
+
47
+
48
+### Ultimate Tic-Tac-Toe Game in React
49
+Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](http://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
50
+
51
+
52
+
53
+### ReactJS Gallery
54
+
55
+[Emanuele Rampichini](https://github.com/lele85)'s [ReactJS Gallery](https://github.com/lele85/ReactGallery) 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.
56
+
57
+Emanuele shared this awesome demo video with us:
58
+
59
+<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
60
+
61
+
62
+
63
+## React Components
64
+
65
+
66
+### Table Sorter
67
+[Table Sorter](http://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
68
+
69
+### Static-search
70
+
71
+Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search indexer](https://github.com/dchest/static-search) in Go, along with a [React-based web front-end](http://www.codingrobots.com/search/) that consumes search result via JSON.
72
+
73
+### Lorem Ipsum component
74
+
75
+[Martin Andert](https://github.com/martinandert) created [react-lorem-component](https://github.com/martinandert/react-lorem-component), a simple component for all your placeholding needs.
76
+
77
+### Input with placeholder shim
78
+[react-input=placeholder](https://github.com/enigma-io/react-input-placeholder) by [enigma-io](https://github.com/enigma-io) is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
79
+
80
+### diContainer
81
+
82
+[dicontainer](https://github.com/SpektrumFM/dicontainer) provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.
83
+
84
+
85
+## React server rendering
86
+
87
+Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](http://twitter.com/hichaelmart)) walks through the necessary steps.
88
+
89
+Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
90
+
91
+
92
+
93
+## Random Tweet
94
+
95
+<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>— Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
docs/img/blog/makona-editor.png
Binary files /dev/null and b/docs/img/blog/makona-editor.png differ
docs/img/blog/react-svg-fbp.png
Binary files /dev/null and b/docs/img/blog/react-svg-fbp.png differ