diff --git a/_js/examples/hello.js b/_js/examples/hello.js index 040a04ac..3805db43 100644 --- a/_js/examples/hello.js +++ b/_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
Hello {this.props.name}
;\n\ diff --git a/_js/examples/markdown.js b/_js/examples/markdown.js index 7ea69a61..6be96d5c 100644 --- a/_js/examples/markdown.js +++ b/_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\ diff --git a/_js/examples/timer.js b/_js/examples/timer.js index 00e60f95..2ca876a2 100644 --- a/_js/examples/timer.js +++ b/_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\ diff --git a/_js/examples/todo.js b/_js/examples/todo.js index ebc08d5f..3db2b29a 100644 --- a/_js/examples/todo.js +++ b/_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\ diff --git a/_js/html-jsx.js b/_js/html-jsx.js index b7152cab..b76d0254 100644 --- a/_js/html-jsx.js +++ b/_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 */ /** diff --git a/_js/jsx-compiler.js b/_js/jsx-compiler.js index 99cf318c..6eb2f1e6 100644 --- a/_js/jsx-compiler.js +++ b/_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
Hello {this.props.name}
;\n\ diff --git a/_js/live_editor.js b/_js/live_editor.js index 4d6c6670..bfd8595d 100644 --- a/_js/live_editor.js +++ b/_js/live_editor.js @@ -1,8 +1,3 @@ -/** - * @jsx React.DOM - */ - - var IS_MOBILE = ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md index d101a6d9..c0763ef3 100644 --- a/docs/02-displaying-data.md +++ b/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 ( diff --git a/docs/02-displaying-data.zh-CN.md b/docs/02-displaying-data.zh-CN.md index 4fd98fd8..5023a000 100644 --- a/docs/02-displaying-data.zh-CN.md +++ b/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) 包来预编译你的代码。 \ No newline at end of file +最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。 diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index 14924f74..93cf2731 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/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 = ; @@ -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 diff --git a/docs/03-interactivity-and-dynamic-uis.md b/docs/03-interactivity-and-dynamic-uis.md index d415400f..975871f9 100644 --- a/docs/03-interactivity-and-dynamic-uis.md +++ b/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}; diff --git a/docs/04-multiple-components.md b/docs/04-multiple-components.md index 0b3d9bf6..74f25b23 100644 --- a/docs/04-multiple-components.md +++ b/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] =
  • {result.text}
    • ; }); - + return (
      {items} diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index 2e5750f6..3430a348 100644 --- a/docs/05-reusable-components.md +++ b/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 = []; diff --git a/docs/07-working-with-the-browser.md b/docs/07-working-with-the-browser.md index e3780fe6..3b4966bf 100644 --- a/docs/07-working-with-the-browser.md +++ b/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. diff --git a/docs/08-tooling-integration.md b/docs/08-tooling-integration.md index 8973df58..1814bc2e 100644 --- a/docs/08-tooling-integration.md +++ b/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 ` ``` @@ -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} diff --git a/docs/tutorial.md b/docs/tutorial.md index 8ca60436..4beb6973 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -39,8 +39,6 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav
      diff --git a/tips/02-inline-styles.md b/tips/02-inline-styles.md index 01d80285..bc9d8823 100644 --- a/tips/02-inline-styles.md +++ b/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 + ')', diff --git a/tips/03-if-else-in-JSX.md b/tips/03-if-else-in-JSX.md index 91105b65..19c9aa1d 100644 --- a/tips/03-if-else-in-JSX.md +++ b/tips/03-if-else-in-JSX.md @@ -10,8 +10,6 @@ next: self-closing-tag.html `if-else` statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example: ```js -/** @jsx React.DOM */ - // This JSX: React.renderComponent(
      Hello World!
      , mountNode); @@ -22,8 +20,6 @@ React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode); This means that `if` statements don't fit in. Take this example: ```js -/** @jsx React.DOM */ - // This JSX:
      Hello World!
      @@ -34,22 +30,18 @@ React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!"); That's not valid JS. You probably want to make use of a ternary expression: ```js -/** @jsx React.DOM */ - React.renderComponent(
      Hello World!
      , mountNode); ``` -If a ternary expression isn't robust enough, you can use `if` statements to determine which +If a ternary expression isn't robust enough, you can use `if` statements to determine which components should be used. ```js -/** @jsx React.DOM */ - var loginButton; -if (loggedIn) { - loginButton = ; -} else { - loginButton = ; +if (loggedIn) { + loginButton = ; +} else { + loginButton = ; } return ( diff --git a/tips/06-style-props-value-px.md b/tips/06-style-props-value-px.md index 38124545..57d57040 100644 --- a/tips/06-style-props-value-px.md +++ b/tips/06-style-props-value-px.md @@ -10,8 +10,6 @@ next: children-props-type.html When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works: ```js -/** @jsx React.DOM */ - var divStyle = {height: 10}; // rendered as "height:10px" React.renderComponent(
      Hello World!
      , mountNode); ``` diff --git a/tips/07-children-props-type.md b/tips/07-children-props-type.md index 16edcce5..2fbd47ca 100644 --- a/tips/07-children-props-type.md +++ b/tips/07-children-props-type.md @@ -10,8 +10,6 @@ next: controlled-input-null-value.html Usually, a component's children (`this.props.children`) is an array of components: ```js -/** @jsx React.DOM */ - var GenericWrapper = React.createClass({ componentDidMount: function() { console.log(Array.isArray(this.props.children)); // => true @@ -31,8 +29,6 @@ React.renderComponent( However, when there is only a single child, `this.props.children` will be the single child component itself _without the array wrapper_. This saves an array allocation. ```js -/** @jsx React.DOM */ - var GenericWrapper = React.createClass({ componentDidMount: function() { console.log(Array.isArray(this.props.children)); // => false diff --git a/tips/08-controlled-input-null-value.md b/tips/08-controlled-input-null-value.md index 34312508..fec5051e 100644 --- a/tips/08-controlled-input-null-value.md +++ b/tips/08-controlled-input-null-value.md @@ -14,8 +14,6 @@ You might have run into a problem where `value` is specified, but the input can The snippet below shows this phenomenon; after a second, the text becomes editable. ```js -/** @jsx React.DOM */ - React.renderComponent(, mountNode); setTimeout(function() { diff --git a/tips/10-props-in-getInitialState-as-anti-pattern.md b/tips/10-props-in-getInitialState-as-anti-pattern.md index bb8a3aef..166cbb8e 100644 --- a/tips/10-props-in-getInitialState-as-anti-pattern.md +++ b/tips/10-props-in-getInitialState-as-anti-pattern.md @@ -16,8 +16,6 @@ Using props, passed down from parent, to generate state in `getInitialState` oft **Bad example:** ```js -/** @jsx React.DOM */ - var MessageBox = React.createClass({ getInitialState: function() { return {nameWithQualifier: 'Mr. ' + this.props.name}; @@ -34,8 +32,6 @@ React.renderComponent(, mountNode); Better: ```js -/** @jsx React.DOM */ - var MessageBox = React.createClass({ render: function() { return
      {'Mr. ' + this.props.name}
      ; @@ -50,8 +46,6 @@ React.renderComponent(, mountNode); However, it's **not** an anti-pattern if you make it clear that synchronization's not the goal here: ```js -/** @jsx React.DOM */ - var Counter = React.createClass({ getInitialState: function() { // naming it initialX clearly indicates that the only purpose diff --git a/tips/11-dom-event-listeners.md b/tips/11-dom-event-listeners.md index 63bc957b..de7401fa 100644 --- a/tips/11-dom-event-listeners.md +++ b/tips/11-dom-event-listeners.md @@ -14,8 +14,6 @@ next: initial-ajax.html Try to resize the window: ```js -/** @jsx React.DOM */ - var Box = React.createClass({ getInitialState: function() { return {windowWidth: window.innerWidth}; diff --git a/tips/12-initial-ajax.md b/tips/12-initial-ajax.md index b649c3e6..f0413682 100644 --- a/tips/12-initial-ajax.md +++ b/tips/12-initial-ajax.md @@ -14,8 +14,6 @@ When processing the response of an asynchronous request, be sure to check that t This example fetches the desired Github user's latest gist: ```js -/** @jsx React.DOM */ - var UserGist = React.createClass({ getInitialState: function() { return { diff --git a/tips/13-false-in-jsx.md b/tips/13-false-in-jsx.md index ae5f831c..09cadc98 100644 --- a/tips/13-false-in-jsx.md +++ b/tips/13-false-in-jsx.md @@ -12,21 +12,18 @@ Here's how `false` renders in different contexts: Renders as `id="false"`: ```js -/** @jsx React.DOM */ React.renderComponent(
      , mountNode); ``` String `"false"` as input value: ```js -/** @jsx React.DOM */ React.renderComponent(, mountNode); ``` No child: ```js -/** @jsx React.DOM */ React.renderComponent(
      {false}
      , mountNode); ``` diff --git a/tips/14-communicate-between-components.md b/tips/14-communicate-between-components.md index 08582f96..265b47c3 100644 --- a/tips/14-communicate-between-components.md +++ b/tips/14-communicate-between-components.md @@ -13,8 +13,6 @@ For child-parent communication: Say your `GroceryList` component has a list of items generated through an array. When a list item is clicked, you want to display its name: ```js -/** @jsx React.DOM */ - var GroceryList = React.createClass({ handleClick: function(i) { console.log('You clicked: ' + this.props.items[i]); diff --git a/tips/15-expose-component-functions.md b/tips/15-expose-component-functions.md index a63880cd..11a4a21b 100644 --- a/tips/15-expose-component-functions.md +++ b/tips/15-expose-component-functions.md @@ -12,8 +12,6 @@ There's another (uncommon) way of [communicating between components](/react/tips Say a list of todos, which upon clicking get removed. If there's only one unfinished todo left, animate it: ```js -/** @jsx React.DOM */ - var Todo = React.createClass({ render: function() { return
      {this.props.title}
      ; diff --git a/tips/16-references-to-components.md b/tips/16-references-to-components.md index 8749170b..9c0046a5 100644 --- a/tips/16-references-to-components.md +++ b/tips/16-references-to-components.md @@ -10,16 +10,12 @@ next: children-undefined.html If you're using React components in a larger non-React application or transitioning your code to React, you may need to keep references to components. `React.renderComponent` returns a reference to the mounted component: ```js -/** @jsx React.DOM */ - var myComponent = React.renderComponent(, myContainer); ``` Keep in mind, however, that the "constructor" of a component doesn't return a component instance! It's just a **descriptor**: a lightweight representation that tells React what the mounted component should look like. ```js -/** @jsx React.DOM */ - var myComponent = ; // This is just a descriptor. // Some code here... diff --git a/tips/17-children-undefined.md b/tips/17-children-undefined.md index 5ed9c938..7843fcd8 100644 --- a/tips/17-children-undefined.md +++ b/tips/17-children-undefined.md @@ -9,8 +9,6 @@ prev: references-to-components.html You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner: ```js -/** @jsx React.DOM */ - var App = React.createClass({ componentDidMount: function() { // This doesn't refer to the `span`s! It refers to the children between