Today we're happy to announce the initial release of
+ReactJS.NET, which makes it easier to use React and JSX
+in .NET applications, focusing specifically on ASP.NET MVC web applications.
+It has several purposes:
+
+
+
On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+will be compiled and cached server-side.
JSX to JavaScript compilation via popular minification/combination libraries
+(Cassette and ASP.NET Bundling and Minification). This is suggested for
+production websites.
+
Server-side component rendering to make your initial render super fast.
+
+
+
Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
+Web Forms applications as well as non-web applications (for example, in build
+scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
+on support for Linux and Mac OS X via Mono as well.
ReactJS.NET is packaged in NuGet. Simply run Install-Package React.Mvc4 in the
+package manager console or search NuGet for "React" to install it.
+See the documentation for more information. The
+GitHub project contains
+a sample website
+demonstrating all of the features.
+
+
Let us know what you think, and feel free to send through any feedback and
+report bugs on GitHub.
Today we're happy to announce the initial release of
+ReactJS.NET, which makes it easier to use React and JSX
+in .NET applications, focusing specifically on ASP.NET MVC web applications.
+It has several purposes:
+
+
+
On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+will be compiled and cached server-side.
JSX to JavaScript compilation via popular minification/combination libraries
+(Cassette and ASP.NET Bundling and Minification). This is suggested for
+production websites.
+
Server-side component rendering to make your initial render super fast.
+
+
+
Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
+Web Forms applications as well as non-web applications (for example, in build
+scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
+on support for Linux and Mac OS X via Mono as well.
ReactJS.NET is packaged in NuGet. Simply run Install-Package React.Mvc4 in the
+package manager console or search NuGet for "React" to install it.
+See the documentation for more information. The
+GitHub project contains
+a sample website
+demonstrating all of the features.
+
+
Let us know what you think, and feel free to send through any feedback and
+report bugs on GitHub.
It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
Large parts of Facebook's web frontend are already powered by React. The recently released Facebook Lookback video and its corresponding editor are great examples of a complex, real-world React app.
Relato by Ben Ripkens 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!
John Lynch (@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.
-
Sproutsheet 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.
Emanuele Rampichini's ReactJS Gallery 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.
react-input=placeholder by enigma-io is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
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/)
It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
Large parts of Facebook's web frontend are already powered by React. The recently released Facebook Lookback video and its corresponding editor are great examples of a complex, real-world React app.
Relato by Ben Ripkens 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!
John Lynch (@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.
+
Sproutsheet 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.
Emanuele Rampichini's ReactJS Gallery 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.
react-input=placeholder by enigma-io is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
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/)
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.
React is only one-piece of your web application stack. Mark Lussier 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.
-
-
-
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
-
-
I encourage you to fork, and make it right and submit a pull request!
-
-
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
Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
-
<InfiniteScroll
- pageStart={0}
- loadMore={loadFunc}
- hasMore={true||false}
- loader={<divclassName="loader">Loading...</div>}>
- {items}// <-- This is the "stuff" you want to load
-</InfiniteScroll>
-
React is often compared with Angular. Pete Hunt wrote an opinionated post on the subject.
-
-
-
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.
-
-
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.
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.
React is only one-piece of your web application stack. Mark Lussier 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.
+
+
+
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
+
+
I encourage you to fork, and make it right and submit a pull request!
+
+
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
Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
+
<InfiniteScroll
+ pageStart={0}
+ loadMore={loadFunc}
+ hasMore={true||false}
+ loader={<divclassName="loader">Loading...</div>}>
+ {items}// <-- This is the "stuff" you want to load
+</InfiniteScroll>
+
React is often compared with Angular. Pete Hunt wrote an opinionated post on the subject.
+
+
+
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.
+
+
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.
Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically "safe" data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
-
-
This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.
-
-
Updated versions are available for immediate download via npm, bower, and on our download page.
-
-
We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.
-
-
While we've encouraged responsible disclosure as part of Facebook's whitehat bounty program since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has an excellent policy which we may use as our model.
-
-
You can learn more about the vulnerability discussed here: CVE-2013-7035.
Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically "safe" data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
+
+
This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.
+
+
Updated versions are available for immediate download via npm, bower, and on our download page.
+
+
We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.
+
+
While we've encouraged responsible disclosure as part of Facebook's whitehat bounty program since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has an excellent policy which we may use as our model.
+
+
You can learn more about the vulnerability discussed here: CVE-2013-7035.
This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
-
-
The biggest change you'll notice as a developer is that we no longer support class in JSX as a way to provide CSS classes. Since this prop was being converted to className at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are a few exceptions where we deviate slightly in an attempt to be consistent internally.
-
-
The other major change in v0.5 is that we've added an additional build - react-with-addons - which adds support for some extras that we've been working on including animations and two-way binding. Read more about these addons in the docs.
We added 22 new people to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our AUTHORS file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
-
-
It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
Memory usage improvements - reduced allocations in core which will help with GC pauses
-
Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
-
Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
Support for additional DOM properties (charSet, content, form, httpEquiv, rowSpan, autoCapitalize).
-
Support for additional SVG properties (rx, ry).
-
Support for using getInitialState and getDefaultProps in mixins.
-
Support mounting into iframes.
-
Bug fixes for controlled form components.
-
Bug fixes for SVG element creation.
-
Added React.version.
-
Added React.isValidClass - Used to determine if a value is a valid component constructor.
-
Removed React.autoBind - This was deprecated in v0.4 and now properly removed.
-
Renamed React.unmountAndReleaseReactRootNode to React.unmountComponentAtNode.
-
Began laying down work for refined performance analysis.
-
Better support for server-side rendering - react-page has helped improve the stability for server-side rendering.
-
Made it possible to use React in environments enforcing a strict Content Security Policy. This also makes it possible to use React to build Chrome extensions.
Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. Read more in the docs.
No longer transform class to className as part of the transform! This is a breaking change - if you were using class, you must change this to className or your components will be visually broken.
-
Added warnings to the in-browser transformer to make it clear it is not intended for production use.
-
Improved compatibility for Windows
-
Improved support for maintaining line numbers when transforming.
This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
+
+
The biggest change you'll notice as a developer is that we no longer support class in JSX as a way to provide CSS classes. Since this prop was being converted to className at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are a few exceptions where we deviate slightly in an attempt to be consistent internally.
+
+
The other major change in v0.5 is that we've added an additional build - react-with-addons - which adds support for some extras that we've been working on including animations and two-way binding. Read more about these addons in the docs.
We added 22 new people to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our AUTHORS file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
+
+
It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
Memory usage improvements - reduced allocations in core which will help with GC pauses
+
Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
+
Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
Support for additional DOM properties (charSet, content, form, httpEquiv, rowSpan, autoCapitalize).
+
Support for additional SVG properties (rx, ry).
+
Support for using getInitialState and getDefaultProps in mixins.
+
Support mounting into iframes.
+
Bug fixes for controlled form components.
+
Bug fixes for SVG element creation.
+
Added React.version.
+
Added React.isValidClass - Used to determine if a value is a valid component constructor.
+
Removed React.autoBind - This was deprecated in v0.4 and now properly removed.
+
Renamed React.unmountAndReleaseReactRootNode to React.unmountComponentAtNode.
+
Began laying down work for refined performance analysis.
+
Better support for server-side rendering - react-page has helped improve the stability for server-side rendering.
+
Made it possible to use React in environments enforcing a strict Content Security Policy. This also makes it possible to use React to build Chrome extensions.
Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. Read more in the docs.
No longer transform class to className as part of the transform! This is a breaking change - if you were using class, you must change this to className or your components will be visually broken.
+
Added warnings to the in-browser transformer to make it clear it is not intended for production use.
+
Improved compatibility for Windows
+
Improved support for maintaining line numbers when transforming.
Caleb Cassel wrote a step-by-step tutorial about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
-
Daniel Steigerwald is now using React within Este, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
I'm the author of "Land of Lisp" and I love your framework. I built a somewhat similar framework a year ago WebFUI aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)
-
-
Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
-
Caleb Cassel wrote a step-by-step tutorial about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
+
Daniel Steigerwald is now using React within Este, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
I'm the author of "Land of Lisp" and I love your framework. I built a somewhat similar framework a year ago WebFUI aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)
+
+
Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
+
Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.
Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.
-
-
React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
-
React.createClass({
- propTypes:{
- // An optional string prop named "description".
- description:React.PropTypes.string,
-
- // A required enum prop named "category".
- category:React.PropTypes.oneOf(['News','Photos']).isRequired,
-
- // A prop named "dialog" that requires an instance of Dialog.
- dialog:React.PropTypes.instanceOf(Dialog).isRequired
- },
- ...
-});
-
Do this for a few props across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
We will use the cached result of this function before each render. We also perform all validations before each render to ensure that you have all of the data you need in the right form before you try to use it.
-
-
-
-
Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.
Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.
Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.
+
+
React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
+
React.createClass({
+ propTypes:{
+ // An optional string prop named "description".
+ description:React.PropTypes.string,
+
+ // A required enum prop named "category".
+ category:React.PropTypes.oneOf(['News','Photos']).isRequired,
+
+ // A prop named "dialog" that requires an instance of Dialog.
+ dialog:React.PropTypes.instanceOf(Dialog).isRequired
+ },
+ ...
+});
+
Do this for a few props across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
We will use the cached result of this function before each render. We also perform all validations before each render to ensure that you have all of the data you need in the right form before you try to use it.
+
+
+
+
Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.
Andrew Greig 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.
Danial Khosravi 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 which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in EchoJS 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.
-
Pete Hunt 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.
Mozilla and Google are actively working on Web Components. Vjeux wrote a proof of concept that shows how to implement them using React.
-
-
-
Using x-tags 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 to have them being rendered in React.
-
TodoMVC.com is a website that collects various implementations of the same basic Todo app. Pete Hunt 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.
-
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:
Andrew Greig 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.
Danial Khosravi 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 which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in EchoJS 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.
+
Pete Hunt 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.
Mozilla and Google are actively working on Web Components. Vjeux wrote a proof of concept that shows how to implement them using React.
+
+
+
Using x-tags 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 to have them being rendered in React.
+
TodoMVC.com is a website that collects various implementations of the same basic Todo app. Pete Hunt 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.
+
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:
diff --git a/css/react.css b/css/react.css
index 814d619695..9a80eb9b7f 100644
--- a/css/react.css
+++ b/css/react.css
@@ -1 +1 @@
-html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:17px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#268bd2}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#637c84}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1;font-weight:bold}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{*zoom:1;background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:before,.nav-main:after{content:" ";display:table}.nav-main:after{clear:both}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px}.nav-main .nav-logo{background-image:url("../img/logo_small.png");vertical-align:middle}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-main .nav-logo{background-image:url("../img/logo_small@2x.png");background-size:38px 38px}}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin-left:20px}.nav-docs li{margin:0}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:400px}.marketing-row{*zoom:1;margin:50px 0}.marketing-row:before,.marketing-row:after{content:" ";display:table}.marketing-row:after{clear:both}.marketing-col{float:left;margin-left:40px;width:280px}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev{*zoom:1}.docs-nextprev:before,.docs-nextprev:after{content:" ";display:table}.docs-nextprev:after{clear:both}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{*zoom:1;padding-top:20px}.blogContent:before,.blogContent:after{content:" ";display:table}.blogContent:after{clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{*zoom:1;padding-top:20px}.documentationContent:before,.documentationContent:after{content:" ";display:table}.documentationContent:after{clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}.jsxCompiler .playgroundError{padding:15px 20px}.button{background:-webkit-linear-gradient( #9a9a9a,#646464);background:linear-gradient( #9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient( #77a3d2,#4783c2);background:linear-gradient( #77a3d2,#4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:650px}.nosidebar .inner-content{float:none;margin:0 auto}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}div.CodeMirror-linenumber:after{content:'.'}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}.cm-s-default span.cm-string-2{color:inherit}.playground{*zoom:1}.playground:before,.playground:after{content:" ";display:table}.playground:after{clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !important}.three-column{*zoom:1}.three-column:before,.three-column:after{content:" ";display:table}.three-column:after{clear:both}.three-column>ul{float:left;margin-left:30px;width:190px}.three-column>ul:first-child{margin-left:20px}
+html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:17px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#268bd2}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#637c84}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1;font-weight:bold}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{*zoom:1;background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:before,.nav-main:after{content:" ";display:table}.nav-main:after{clear:both}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px}.nav-main .nav-logo{background-image:url("../img/logo_small.png");vertical-align:middle}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-main .nav-logo{background-image:url("../img/logo_small@2x.png");background-size:38px 38px}}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin-left:20px}.nav-docs li{margin:0}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:400px}.marketing-row{*zoom:1;margin:50px 0}.marketing-row:before,.marketing-row:after{content:" ";display:table}.marketing-row:after{clear:both}.marketing-col{float:left;margin-left:40px;width:280px}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev{*zoom:1}.docs-nextprev:before,.docs-nextprev:after{content:" ";display:table}.docs-nextprev:after{clear:both}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{*zoom:1;padding-top:20px}.blogContent:before,.blogContent:after{content:" ";display:table}.blogContent:after{clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{*zoom:1;padding-top:20px}.documentationContent:before,.documentationContent:after{content:" ";display:table}.documentationContent:after{clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}.jsxCompiler .playgroundError{padding:15px 20px}.button{background:-webkit-linear-gradient( #9a9a9a,#646464);background:linear-gradient( #9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient( #77a3d2,#4783c2);background:linear-gradient( #77a3d2,#4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:650px}.nosidebar .inner-content{float:none;margin:0 auto}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}div.CodeMirror-linenumber:after{content:'.'}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}.cm-s-default span.cm-string-2{color:inherit}.playground{*zoom:1}.playground:before,.playground:after{content:" ";display:table}.playground:after{clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{background:none;font-size:inherit;padding:0}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !important}.three-column{*zoom:1}.three-column:before,.three-column:after{content:" ";display:table}.three-column:after{clear:both}.three-column>ul{float:left;margin-left:30px;width:190px}.three-column>ul:first-child{margin-left:20px}
diff --git a/feed.xml b/feed.xml
index e2ad268745..c621cd2e8e 100644
--- a/feed.xml
+++ b/feed.xml
@@ -6,6 +6,44 @@
http://facebook.github.io/react
+
+ Use React and JSX in ASP.NET MVC
+ <p>Today we're happy to announce the initial release of
+<a href="http://reactjs.net/">ReactJS.NET</a>, which makes it easier to use React and JSX
+in .NET applications, focusing specifically on ASP.NET MVC web applications.
+It has several purposes:</p>
+
+<ul>
+<li><p>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+will be compiled and cached server-side.</p>
+<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"@Url.Content("</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">")"</span><span class="nt">></script></span>
+</code></pre></div></li>
+<li><p>JSX to JavaScript compilation via popular minification/combination libraries
+(Cassette and ASP.NET Bundling and Minification). This is suggested for
+production websites.</p></li>
+<li><p>Server-side component rendering to make your initial render super fast.</p></li>
+</ul>
+
+<p>Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
+Web Forms applications as well as non-web applications (for example, in build
+scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
+on support for Linux and Mac OS X via Mono as well.</p>
+<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
+<p>ReactJS.NET is packaged in NuGet. Simply run <code>Install-Package React.Mvc4</code> in the
+package manager console or search NuGet for "React" to install it.
+<a href="http://reactjs.net/docs">See the documentation</a> for more information. The
+GitHub project contains
+<a href="https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4">a sample website</a>
+demonstrating all of the features.</p>
+
+<p>Let us know what you think, and feel free to send through any feedback and
+report bugs <a href="https://github.com/reactjs/React.NET">on GitHub</a>.</p>
+
+ 2014-04-04T00:00:00-07:00
+ http://facebook.github.io/react/blog/2014/04/04/reactnet.html
+ http://facebook.github.io/react/blog/2014/04/04/reactnet.html
+
+
The Road to 1.0<p>When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined <a href="https://github.com/facebook/react/wiki/Projects">several projects</a> that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.</p>
@@ -633,7 +671,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
<h2><a class="anchor" name="building-a-complex-react-component"></a>Building a complex React component <a class="hash-link" href="#building-a-complex-react-component">#</a></h2>
<p><a href="http://matt-harrison.com/">Matt Harrison</a> walks through the process of <a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/">creating an SVG-based Resistance Calculator</a> using React. <figure><a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/"><img src="/react/img/blog/resistance-calculator.png" alt=""></a></figure></p>
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>— Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
+<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>— Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>— Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
@@ -753,85 +791,12 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
-<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
+<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
2014-02-05T00:00:00-08:00
http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html
http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html
-
- Community Round-up #14
- <p>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.</p>
-<h2><a class="anchor" name="react-baseline"></a>React Baseline <a class="hash-link" href="#react-baseline">#</a></h2>
-<p>React is only one-piece of your web application stack. <a href="https://github.com/intabulas">Mark Lussier</a> 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.</p>
-
-<blockquote>
-<p>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</p>
-
-<p>I encourage you to fork, and make it right and submit a pull request!</p>
-
-<p>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</p>
-
-<p><a href="https://github.com/intabulas/reactjs-baseline">Check it out on GitHub...</a></p>
-</blockquote>
-<h2><a class="anchor" name="animal-sounds"></a>Animal Sounds <a class="hash-link" href="#animal-sounds">#</a></h2>
-<p><a href="http://joshduck.com/">Josh Duck</a> used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
-<figure><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9"><img src="/react/img/blog/animal-sounds.jpg" alt=""></a></figure></p>
-
-<p><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9">Download the app...</a></p>
-<h2><a class="anchor" name="react-rails-tutorial"></a>React Rails Tutorial <a class="hash-link" href="#react-rails-tutorial">#</a></h2>
-<p><a href="http://selem.im">Selem Delul</a> bundled the <a href="http://facebook.github.io/react/docs/tutorial.html">React Tutorial</a> into a rails app. This is a good example on how to get started with a rails project.</p>
-
-<blockquote>
-<div class="highlight"><pre><code class="text language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
-cd react-rails-tutorial
-bundle install
-rake db:migrate
-rails s
-</code></pre></div>
-<p>Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!</p>
-
-<p><a href="https://github.com/necrodome/react-rails-tutorial">View on GitHub...</a></p>
-</blockquote>
-<h2><a class="anchor" name="mixing-with-backbone"></a>Mixing with Backbone <a class="hash-link" href="#mixing-with-backbone">#</a></h2>
-<p><a href="http://eldar.djafarov.com/">Eldar Djafarov</a> implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.</p>
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-<p><a href="http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/">Check out the blog post...</a></p>
-<h2><a class="anchor" name="react-infinite-scroll"></a>React Infinite Scroll <a class="hash-link" href="#react-infinite-scroll">#</a></h2>
-<p><a href="https://twitter.com/guillaumervls">Guillaume Rivals</a> implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.</p>
-<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">InfiniteScroll</span>
- <span class="nx">pageStart</span><span class="o">=</span><span class="p">{</span><span class="mi">0</span><span class="p">}</span>
- <span class="nx">loadMore</span><span class="o">=</span><span class="p">{</span><span class="nx">loadFunc</span><span class="p">}</span>
- <span class="nx">hasMore</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span><span class="p">}</span>
- <span class="nx">loader</span><span class="o">=</span><span class="p">{</span><span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"loader"</span><span class="o">></span><span class="nx">Loading</span> <span class="p">...</span><span class="o"><</span><span class="err">/div>}></span>
- <span class="p">{</span><span class="nx">items</span><span class="p">}</span> <span class="c1">// <-- This is the "stuff" you want to load</span>
-<span class="o"><</span><span class="err">/InfiniteScroll></span>
-</code></pre></div>
-<p><a href="https://github.com/guillaumervls/react-infinite-scroll">Try it out on GitHub!</a></p>
-<h2><a class="anchor" name="web-components-style"></a>Web Components Style <a class="hash-link" href="#web-components-style">#</a></h2>
-<p><a href="http://subtlegradient.com/">Thomas Aylott</a> implemented an API that looks like Web Components but using React underneath.</p>
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-<h2><a class="anchor" name="react-vs-angular"></a>React vs Angular <a class="hash-link" href="#react-vs-angular">#</a></h2>
-<p>React is often compared with Angular. <a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Pete Hunt</a> wrote an opinionated post on the subject.</p>
-
-<blockquote>
-<p>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.</p>
-
-<p>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.</p>
-
-<p><a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Read the full post...</a></p>
-</blockquote>
-<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
-<div><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></div>
-
- 2014-01-06T00:00:00-08:00
- http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html
- http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html
-
-
+ React
+ 
