|
| 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> |
0 commit comments