diff --git a/_posts/2013-06-19-community-roundup-2.md b/_posts/2013-06-19-community-roundup-2.md new file mode 100644 index 00000000..57b322e1 --- /dev/null +++ b/_posts/2013-06-19-community-roundup-2.md @@ -0,0 +1,71 @@ +--- +title: "Community Round-up #2" +layout: post +author: Vjeux +--- + +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. + +## Some quick thoughts on React + +[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is. + +> 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. +> +> 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. +> +> 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. +> +> 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. +> +> [Read the full post...](http://www.andrewgreig.com/637/) + +## React and Socket.IO Chat Application + +[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO. + +> 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. +>
[![](/react/img/blog/chatapp.png)](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
+> +> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/) + +## React and Other Frameworks + +[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. + +> 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. [...] +> +> 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. +> +> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look) + +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/). + +## Web Components: React & x-tags + +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. + +> 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. +>
[![](/react/img/blog/xreact.png)](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
+> +> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html) + +## React TodoMVC Example + +[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. + +> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. +> +> 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. +>
[![](/react/img/blog/todomvc.png)](http://todomvc.com/labs/architecture-examples/react/)
+> +> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react) + +## JSX is not HTML + +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: + + - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html) + - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html) + - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html) + - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html) diff --git a/docs/jsx-is-not-html.md b/docs/jsx-is-not-html.md index 084c9719..e8d0d7ba 100644 --- a/docs/jsx-is-not-html.md +++ b/docs/jsx-is-not-html.md @@ -80,7 +80,7 @@ As of React 0.3, there is no good way to insert comments within the children sec ``` -## Custom HTML attributes +## Custom HTML Attributes If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`. diff --git a/img/blog/chatapp.png b/img/blog/chatapp.png new file mode 100644 index 00000000..55edf29d Binary files /dev/null and b/img/blog/chatapp.png differ diff --git a/img/blog/todomvc.png b/img/blog/todomvc.png new file mode 100644 index 00000000..9c03bc0f Binary files /dev/null and b/img/blog/todomvc.png differ diff --git a/img/blog/xreact.png b/img/blog/xreact.png new file mode 100644 index 00000000..59fbb6f2 Binary files /dev/null and b/img/blog/xreact.png differ