Community Round-up #14
Vjeux committed
Dec 21, 2013 at 20:48 UTC
c7c72d1a7afc121eaedbbf95b5e399e9ca5dbb43
2 files changed
+92
docs/_posts/2014-01-06-community-roundup-14.md
new
+92
@@ -0,0 +1,92 @@
1
+---
2
+title: "Community Round-up #14"
3
+layout: post
4
+author: Vjeux
5
+---
6
+
7
+The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
8
+
9
+## React Baseline
10
+
11
+React is only one-piece of your web application stack. [Mark Lussier](https://github.com/intabulas) shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.
12
+
13
+> As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github
14
+>
15
+> I encourage you to fork, and make it right and submit a pull request!
16
+>
17
+> My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
18
+>
19
+> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
20
+
21
+
22
+## Animal Sounds
23
+
24
+[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
25
+<figure>[](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)</figure>
26
+
27
+[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
28
+
29
+
30
+## React Rails Tutorial
31
+
32
+[Selem Delul](http://selem.im) bundled the [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
33
+
34
+> ```
35
+git clone https://github.com/necrodome/react-rails-tutorial
36
+cd react-rails-tutorial
37
+bundle install
38
+rake db:migrate
39
+rails s
40
+```
41
+> Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!
42
+>
43
+> [View on GitHub...](https://github.com/necrodome/react-rails-tutorial)
44
+
45
+## Mixing with Backbone
46
+
47
+[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
48
+
49
+<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
50
+
51
+[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
52
+
53
+
54
+## React Infinite Scroll
55
+
56
+[Guillaume Rivals](https://twitter.com/guillaumervls) implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
57
+
58
+```javascript
59
+<InfiniteScroll
60
+ pageStart={0}
61
+ loadMore={loadFunc}
62
+ hasMore={true || false}
63
+ loader={<div className="loader">Loading ...</div>}>
64
+ {items} // <-- This is the "stuff" you want to load
65
+</InfiniteScroll>
66
+```
67
+
68
+[Try it out on GitHub!](https://github.com/guillaumervls/react-infinite-scroll)
69
+
70
+
71
+## Web Components Style
72
+
73
+[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
74
+
75
+<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
76
+
77
+
78
+## React vs Angular
79
+
80
+React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31/react-vs-angular/) wrote an opinionated post on the subject.
81
+
82
+> First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.
83
+>
84
+> I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.
85
+>
86
+> [Read the full post...](http://skulbuny.com/2013/10/31/react-vs-angular/)
87
+
88
+
89
+
90
+## Random Tweet
91
+
92
+<figure><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></figure>
docs/img/blog/animal-sounds.jpg
Binary files /dev/null and b/docs/img/blog/animal-sounds.jpg differ