|
| 1 | +--- |
| 2 | +title: "Community Round-up #2" |
| 3 | +layout: post |
| 4 | +author: Vjeux |
| 5 | +--- |
| 6 | + |
| 7 | +Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week. |
| 8 | + |
| 9 | +## Some quick thoughts on React |
| 10 | + |
| 11 | +[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is. |
| 12 | + |
| 13 | +> I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem. |
| 14 | +> |
| 15 | +> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality. |
| 16 | +> |
| 17 | +> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own. |
| 18 | +> |
| 19 | +> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that. |
| 20 | +> |
| 21 | +> [Read the full post...](http://www.andrewgreig.com/637/) |
| 22 | +
|
| 23 | +## React and Socket.IO Chat Application |
| 24 | + |
| 25 | +[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO. |
| 26 | + |
| 27 | +> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app. |
| 28 | +> <figure>[](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure> |
| 29 | +> |
| 30 | +> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/) |
| 31 | +
|
| 32 | +## React and Other Frameworks |
| 33 | + |
| 34 | +[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React. |
| 35 | + |
| 36 | +> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...] |
| 37 | +> |
| 38 | +> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive. |
| 39 | +> |
| 40 | +> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look) |
| 41 | +
|
| 42 | +In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/). |
| 43 | + |
| 44 | +## Web Components: React & x-tags |
| 45 | + |
| 46 | +Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React. |
| 47 | + |
| 48 | +> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React. |
| 49 | +> <figure>[](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)</figure> |
| 50 | +> |
| 51 | +> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html) |
| 52 | +
|
| 53 | +## React TodoMVC Example |
| 54 | + |
| 55 | +[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version. |
| 56 | + |
| 57 | +> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. |
| 58 | +> |
| 59 | +> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today. |
| 60 | +> <figure>[](http://todomvc.com/labs/architecture-examples/react/)</figure> |
| 61 | +> |
| 62 | +> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react) |
| 63 | +
|
| 64 | +## JSX is not HTML |
| 65 | + |
| 66 | +Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences: |
| 67 | + |
| 68 | + - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html) |
| 69 | + - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html) |
| 70 | + - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html) |
| 71 | + - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html) |
0 commit comments