[Docs] Remove most of @jsx

I kept some places intact (search for @jsx) because they require other bigger changes:

- ref-01-top-level-api.md
- grunt/tasks/npm.js
- old blog posts (don't change those)
- examples/ folder, as they have their own package.json that rely on old dependencies (node-jsx, reactify) that haven't upgraded to 0.12

README.md

@@ -13,7 +13,6 @@ React is a JavaScript library for building user interfaces.
 We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
 
 ```js
-/** @jsx React.DOM */
 var HelloMessage = React.createClass({
   render: function() {
     return <div>Hello {this.props.name}</div>;

docs/_js/examples/hello.js

@@ -1,9 +1,4 @@
-/**
- * @jsx React.DOM
- */
-
 var HELLO_COMPONENT = "\
-/** @jsx React.DOM */\n\
 var HelloMessage = React.createClass({\n\
   render: function() {\n\
     return <div>Hello {this.props.name}</div>;\n\

docs/_js/examples/markdown.js

@@ -1,10 +1,4 @@
-/**
- * @jsx React.DOM
- */
-
 var MARKDOWN_COMPONENT = "\
-/** @jsx React.DOM */\n\
-\n\
 var converter = new Showdown.converter();\n\
 \n\
 var MarkdownEditor = React.createClass({\n\

docs/_js/examples/timer.js

@@ -1,9 +1,4 @@
-/**
- * @jsx React.DOM
- */
-
 var TIMER_COMPONENT = "\
-/** @jsx React.DOM */\n\
 var Timer = React.createClass({\n\
   getInitialState: function() {\n\
     return {secondsElapsed: 0};\n\

docs/_js/examples/todo.js

@@ -1,9 +1,4 @@
-/**
- * @jsx React.DOM
- */
-
 var TODO_COMPONENT = "\
-/** @jsx React.DOM */\n\
 var TodoList = React.createClass({\n\
   render: function() {\n\
     var createItem = function(itemText) {\n\

docs/_js/html-jsx.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 /**

docs/_js/jsx-compiler.js

@@ -1,9 +1,4 @@
-/**
- * @jsx React.DOM
- */
-
 var HELLO_COMPONENT = "\
-/** @jsx React.DOM */\n\
 var HelloMessage = React.createClass({\n\
   render: function() {\n\
     return <div>Hello {this.props.name}</div>;\n\

docs/_js/live_editor.js

@@ -1,8 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
-
 var IS_MOBILE = (
   navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/webOS/i)

docs/docs/02-displaying-data.md

@@ -35,8 +35,6 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
 For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
 
 ```javascript
-/** @jsx React.DOM */
-
 var HelloWorld = React.createClass({
   render: function() {
     return (

docs/docs/02-displaying-data.zh-CN.md

@@ -35,8 +35,6 @@ next: jsx-in-depth.html
 在接下去的文档中，我们只关注 JavaScript 代码，假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。
 
 ```javascript
-/** @jsx React.DOM */
-
 var HelloWorld = React.createClass({
   render: function() {
     return (
@@ -84,4 +82,4 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性
 
 JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。
 
-最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。
+最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。

docs/docs/02.1-jsx-in-depth.md

@@ -9,12 +9,6 @@ next: jsx-gotchas.html
 JSX is a JavaScript XML syntax transform recommended for use
 with React.
 
-> Note:
->
-> Don't forget the `/** @jsx React.DOM */` pragma at the beginning of your file! This tells JSX to process the file for React.
->
-> If you don't include the pragma, your source will remain untouched, so it's safe to run the JSX transformer on all JS files in your codebase if you want to.
-
 ## Why JSX?
 
 React works out of the box without JSX. Simply construct your markup using the
@@ -57,7 +51,7 @@ var app = Nav({color:"blue"}, Profile(null, "click"));
 ```
 
 Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
-desugars into native JavaScript, and the 
+desugars into native JavaScript, and the
 [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
 JSX.
 
@@ -113,13 +107,9 @@ See [Multiple Components](/react/docs/multiple-components.html) to learn more ab
 
 Having to define variables for every type of DOM element can get tedious
 (e.g. `var div, span, h1, h2, ...`). JSX provides a convenience to address this
-problem by allowing you to specify a variable in an `@jsx` docblock field. JSX
-will use that field to find DOM components.
+problem:
 
 ```javascript
-/**
- * @jsx React.DOM
- */
 var Nav;
 // Input (JSX):
 var tree = <Nav><span /></Nav>;
@@ -130,8 +120,7 @@ var tree = Nav(null, React.DOM.span(null));
 > Remember:
 >
 > JSX simply transforms elements into function calls and has no notion of the
-> DOM. The docblock parameter is only a convenience to resolve the most commonly
-> used elements. In general, JSX has no notion of the DOM.
+> DOM.
 
 ## JavaScript Expressions
 

docs/docs/03-interactivity-and-dynamic-uis.md

@@ -12,8 +12,6 @@ You've already [learned how to display data](/react/docs/displaying-data.html) w
 ## A Simple Example
 
 ```javascript
-/** @jsx React.DOM */
-
 var LikeButton = React.createClass({
   getInitialState: function() {
     return {liked: false};

docs/docs/04-multiple-components.md

@@ -19,8 +19,6 @@ By building modular components that reuse other components with well-defined int
 Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
 
 ```javascript
-/** @jsx React.DOM */
-
 var Avatar = React.createClass({
   render: function() {
     return (
@@ -178,14 +176,14 @@ You can also key children by passing an object. The object keys will be used as
 ```javascript
   render: function() {
     var items = {};
-    
+
     this.props.results.forEach(function(result) {
       // If result.id can look like a number (consider short hashes), then
       // object iteration order is not guaranteed. In this case, we add a prefix
       // to ensure the keys are strings.
       items['result-' + result.id] = <li>{result.text}</li>;
     });
-    
+
     return (
       <ol>
         {items}

docs/docs/05-reusable-components.md

@@ -103,8 +103,6 @@ The result of `getDefaultProps()` will be cached and used to ensure that `this.p
 A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
 
 ```javascript
-/** @jsx React.DOM */
-
 var CheckLink = React.createClass({
   render: function() {
     // transferPropsTo() will take any props passed to CheckLink
@@ -150,8 +148,6 @@ Components are the best way to reuse code in React, but sometimes very different
 One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
 
 ```javascript
-/** @jsx React.DOM */
-
 var SetIntervalMixin = {
   componentWillMount: function() {
     this.intervals = [];

docs/docs/07-working-with-the-browser.md

@@ -29,8 +29,6 @@ To interact with the browser, you'll need a reference to a DOM node. Every mount
 In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use refs to refer to a component you own. They work like this:
 
 ```javascript
-/** @jsx React.DOM */
-
 var MyComponent = React.createClass({
   handleClick: function() {
     // Explicitly focus the text input using the raw DOM API.

docs/docs/08-tooling-integration.md

@@ -23,7 +23,7 @@ We have instructions for building from `master` [in our GitHub repository](https
 
 ### In-browser JSX Transform
 
-If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer. Be sure to include the `/** @jsx React.DOM */` comment as well, otherwise the transformer will not run the transforms.
+If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer.
 
 > Note:
 >

docs/docs/09.1-animation.md

@@ -16,9 +16,7 @@ React provides a `ReactTransitionGroup` addon component as a low-level API for a
 
 `ReactCSSTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
 
-```javascript{30-32}
-/** @jsx React.DOM */
-
+```javascript{28-30}
 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
 var TodoList = React.createClass({
@@ -87,7 +85,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
 
 In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM. The example below would not work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.
 
-```javascript{12-14}
+```javascript{12-15}
   render: function() {
     var items = this.state.items.map(function(item, i) {
       return (
@@ -111,9 +109,7 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro
 
 Although in the example above we rendered a list of items into `ReactCSSTransitionGroup`, the children of `ReactCSSTransitionGroup` can be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element, with the new element animating in while the current animates out. For example, we can implement a simple image carousel like this:
 
-```javascript{12-14}
-/** @jsx React.DOM */
-
+```javascript{10-12}
 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
 var ImageCarousel = React.createClass({

docs/docs/09.2-form-input-binding-sugar.md

@@ -6,7 +6,7 @@ prev: animation.html
 next: class-name-manipulation.html
 ---
 
-`ReactLink` is an easy way to express two-way binding with React. 
+`ReactLink` is an easy way to express two-way binding with React.
 
 > Note:
 >
@@ -29,8 +29,6 @@ Two-way binding -- implicitly enforcing that some value in the DOM is always con
 Here's a simple form example without using `ReactLink`:
 
 ```javascript
-/** @jsx React.DOM */
-
 var NoLink = React.createClass({
   getInitialState: function() {
     return {message: 'Hello!'};
@@ -47,9 +45,7 @@ var NoLink = React.createClass({
 
 This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use `ReactLink` to save us some typing:
 
-```javascript{4,9}
-/** @jsx React.DOM */
-
+```javascript{2,7}
 var WithLink = React.createClass({
   mixins: [React.addons.LinkedStateMixin],
   getInitialState: function() {
@@ -77,9 +73,7 @@ There are two sides to `ReactLink`: the place where you create the `ReactLink` i
 
 ### ReactLink Without LinkedStateMixin
 
-```javascript{7-9,11-14}
-/** @jsx React.DOM */
-
+```javascript{5-7,9-12}
 var WithoutMixin = React.createClass({
   getInitialState: function() {
     return {message: 'Hello!'};
@@ -102,8 +96,6 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va
 ### ReactLink Without valueLink
 
 ```javascript
-/** @jsx React.DOM */
-
 var WithoutLink = React.createClass({
   mixins: [React.addons.LinkedStateMixin],
   getInitialState: function() {

docs/docs/getting-started.md

@@ -34,7 +34,6 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo
   <body>
     <div id="example"></div>
     <script type="text/jsx">
-      /** @jsx React.DOM */
       React.renderComponent(
         <h1>Hello, world!</h1>,
         document.getElementById('example')
@@ -51,18 +50,12 @@ The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/r
 Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.
 
 ```javascript
-/** @jsx React.DOM */
 React.renderComponent(
   <h1>Hello, world!</h1>,
   document.getElementById('example')
 );
 ```
 
-> Note:
->
-> ```/** @jsx React.DOM */``` is *required*. The comment parser is very strict right now; in order for it to pick up the `@jsx` modifier, two conditions are required. The `@jsx` comment block must be the first comment on the file. The comment must start with `/**` (`/*` and `//` will not work). If the parser can't find the `@jsx` comment, it will output the file without transforming it.
-
-
 Then reference it from `helloworld.html`:
 
 ```html{10}
@@ -86,8 +79,7 @@ jsx --watch src/ build/
 
 The file `build/helloworld.js` is autogenerated whenever you make a change.
 
-```javascript{3}
-/** @jsx React.DOM */
+```javascript{2}
 React.renderComponent(
   React.DOM.h1(null, 'Hello, world!'),
   document.getElementById('example')

docs/docs/getting-started.zh-CN.md

@@ -33,7 +33,6 @@ next: tutorial.html
   <body>
     <div id="example"></div>
     <script type="text/jsx">
-      /** @jsx React.DOM */
       React.renderComponent(
         <h1>Hello, world!</h1>,
         document.getElementById('example')
@@ -50,15 +49,14 @@ next: tutorial.html
 你的 React JSX 代码文件可以写在另外的文件里。新建下面的 `src/helloworld.js`。
 
 ```javascript
-/** @jsx React.DOM */
 React.renderComponent(
   <h1>Hello, world!</h1>,
   document.getElementById('example')
 );
 ```
 
 然后在 `helloworld.html` 引用该文件：
- 
+
 ```html{10}
 <script type="text/jsx" src="src/helloworld.js"></script>
 ```
@@ -80,18 +78,13 @@ jsx --watch src/ build/
 
 只要你修改了， `build/helloworld.js` 文件会自动生成。
 
-```javascript{3}
-/** @jsx React.DOM */
+```javascript{2}
 React.renderComponent(
   React.DOM.h1(null, 'Hello, world!'),
   document.getElementById('example')
 );
 ```
 
-> 注意:
->
-> 目前注释解析器还是非常严格；为了让它能够找出 `@jsx` 修饰符，有两个限制是必须的。`@jsx` 注释块必须是代码文件第一个注释。注释必须以 `/**` (`/*` 和 `//` 不起作用) 开头。如果解析器找不到 `@jsx` 注释，它就不会转换代码，直接原样输出到文件。
-
 对照下面更新你的 HTML 代码
 
 ```html{6,10}

docs/docs/tutorial.md

@@ -39,8 +39,6 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav
   <body>
     <div id="content"></div>
     <script type="text/jsx">
-      /** @jsx React.DOM */
-      // The above declaration must remain intact at the top of the script.
       // Your code here
     </script>
   </body>

docs/tips/02-inline-styles.md

@@ -10,8 +10,6 @@ prev: introduction.html
 In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string ([more on that later](/react/tips/style-props-value-px.html)):
 
 ```js
-/** @jsx React.DOM */
-
 var divStyle = {
   color: 'white',
   backgroundImage: 'url(' + imgUrl + ')',