1b3b432d64 · samitouri/QOS-React-2

README.md

-1

@@ -13,7 +13,6 @@ React is a JavaScript library for building user interfaces.

13 We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:

14

15 ```js

16 -/** @jsx React.DOM */

16 var HelloMessage = React.createClass({

17 render: function() {

18 return <div>Hello {this.props.name}</div>;

docs/_js/examples/hello.js

-5

@@ -1,9 +1,4 @@

1 -/**

2 - * @jsx React.DOM

3 - */

4 -

1 var HELLO_COMPONENT = "\

6 -/** @jsx React.DOM */\n\

2 var HelloMessage = React.createClass({\n\

3 render: function() {\n\

4 return <div>Hello {this.props.name}</div>;\n\

docs/_js/examples/markdown.js

-6

@@ -1,10 +1,4 @@

1 -/**

2 - * @jsx React.DOM

3 - */

4 -

1 var MARKDOWN_COMPONENT = "\

6 -/** @jsx React.DOM */\n\

7 -\n\

2 var converter = new Showdown.converter();\n\

3 \n\

4 var MarkdownEditor = React.createClass({\n\

docs/_js/examples/timer.js

-5

@@ -1,9 +1,4 @@

1 -/**

2 - * @jsx React.DOM

3 - */

4 -

1 var TIMER_COMPONENT = "\

6 -/** @jsx React.DOM */\n\

2 var Timer = React.createClass({\n\

3 getInitialState: function() {\n\

4 return {secondsElapsed: 0};\n\

docs/_js/examples/todo.js

-5

@@ -1,9 +1,4 @@

1 -/**

2 - * @jsx React.DOM

3 - */

4 -

1 var TODO_COMPONENT = "\

6 -/** @jsx React.DOM */\n\

2 var TodoList = React.createClass({\n\

3 render: function() {\n\

4 var createItem = function(itemText) {\n\

docs/_js/html-jsx.js

-2

@@ -5,8 +5,6 @@

5 * This source code is licensed under the BSD-style license found in the

6 * LICENSE file in the root directory of this source tree. An additional grant

7 * of patent rights can be found in the PATENTS file in the same directory.

8 - *

9 - * @jsx React.DOM

8 */

9

10 /**

docs/_js/jsx-compiler.js

-5

@@ -1,9 +1,4 @@

1 -/**

2 - * @jsx React.DOM

3 - */

4 -

1 var HELLO_COMPONENT = "\

6 -/** @jsx React.DOM */\n\

2 var HelloMessage = React.createClass({\n\

3 render: function() {\n\

4 return <div>Hello {this.props.name}</div>;\n\

docs/_js/live_editor.js

-5

@@ -1,8 +1,3 @@

1 -/**

2 - * @jsx React.DOM

3 - */

4 -

5 -

1 var IS_MOBILE = (

2 navigator.userAgent.match(/Android/i)

3 || navigator.userAgent.match(/webOS/i)

docs/docs/02-displaying-data.md

-2

@@ -35,8 +35,6 @@ Let's look at a really simple example. Create a `hello-react.html` file with the

35 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:

36

37 ```javascript

38 -/** @jsx React.DOM */

39 -

38 var HelloWorld = React.createClass({

39 render: function() {

40 return (

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

+1 -3

@@ -35,8 +35,6 @@ next: jsx-in-depth.html

35 在接下去的文档中，我们只关注 JavaScript 代码，假设我们把代码插入到上面那个模板中。用下面的代码替换掉上面用来占位的注释。

36

37 ```javascript

38 -/** @jsx React.DOM */

39 -

38 var HelloWorld = React.createClass({

39 render: function() {

40 return (

@@ -84,4 +82,4 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性

82

83 JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。

84

87 -最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。

\ No newline at end of file

85 +最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。

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

+3 -14

@@ -9,12 +9,6 @@ next: jsx-gotchas.html

9 JSX is a JavaScript XML syntax transform recommended for use

10 with React.

11

12 -> Note:

13 ->

14 -> Don't forget the `/** @jsx React.DOM */` pragma at the beginning of your file! This tells JSX to process the file for React.

15 ->

16 -> 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.

17 -

12 ## Why JSX?

13

14 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"));

51 ```

52

53 Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it

60 -desugars into native JavaScript, and the

54 +desugars into native JavaScript, and the

55 [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to

56 JSX.

57

@@ -113,13 +107,9 @@ See [Multiple Components](/react/docs/multiple-components.html) to learn more ab

107

108 Having to define variables for every type of DOM element can get tedious

109 (e.g. `var div, span, h1, h2, ...`). JSX provides a convenience to address this

116 -problem by allowing you to specify a variable in an `@jsx` docblock field. JSX

117 -will use that field to find DOM components.

110 +problem:

111

112 ```javascript

120 -/**

121 - * @jsx React.DOM

122 - */

113 var Nav;

114 // Input (JSX):

115 var tree = <Nav><span /></Nav>;

@@ -130,8 +120,7 @@ var tree = Nav(null, React.DOM.span(null));

120 > Remember:

121 >

122 > JSX simply transforms elements into function calls and has no notion of the

133 -> DOM. The docblock parameter is only a convenience to resolve the most commonly

134 -> used elements. In general, JSX has no notion of the DOM.

123 +> DOM.

124

125 ## JavaScript Expressions

126

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

-2

@@ -12,8 +12,6 @@ You've already [learned how to display data](/react/docs/displaying-data.html) w

12 ## A Simple Example

13

14 ```javascript

15 -/** @jsx React.DOM */

16 -

15 var LikeButton = React.createClass({

16 getInitialState: function() {

17 return {liked: false};

docs/docs/04-multiple-components.md

+2 -4

@@ -19,8 +19,6 @@ By building modular components that reuse other components with well-defined int

19 Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.

20

21 ```javascript

22 -/** @jsx React.DOM */

23 -

22 var Avatar = React.createClass({

23 render: function() {

24 return (

@@ -178,14 +176,14 @@ You can also key children by passing an object. The object keys will be used as

176 ```javascript

177 render: function() {

178 var items = {};

181 -

179 +

180 this.props.results.forEach(function(result) {

181 // If result.id can look like a number (consider short hashes), then

182 // object iteration order is not guaranteed. In this case, we add a prefix

183 // to ensure the keys are strings.

184 items['result-' + result.id] = <li>{result.text}</li>;

185 });

188 -

186 +

187 return (

188 <ol>

189 {items}

docs/docs/05-reusable-components.md

-4

@@ -103,8 +103,6 @@ The result of `getDefaultProps()` will be cached and used to ensure that `this.p

103 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.

104

105 ```javascript

106 -/** @jsx React.DOM */

107 -

106 var CheckLink = React.createClass({

107 render: function() {

108 // 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

148 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.

149

150 ```javascript

153 -/** @jsx React.DOM */

154 -

151 var SetIntervalMixin = {

152 componentWillMount: function() {

153 this.intervals = [];

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

-2

@@ -29,8 +29,6 @@ To interact with the browser, you'll need a reference to a DOM node. Every mount

29 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:

30

31 ```javascript

32 -/** @jsx React.DOM */

33 -

32 var MyComponent = React.createClass({

33 handleClick: function() {

34 // Explicitly focus the text input using the raw DOM API.

docs/docs/08-tooling-integration.md

+1 -1

@@ -23,7 +23,7 @@ We have instructions for building from `master` [in our GitHub repository](https

23

24 ### In-browser JSX Transform

25

26 -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.

26 +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.

27

28 > Note:

29 >

docs/docs/09.1-animation.md

+3 -7

@@ -16,9 +16,7 @@ React provides a `ReactTransitionGroup` addon component as a low-level API for a

16

17 `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.

18

19 -```javascript{30-32}

20 -/** @jsx React.DOM */

21 -

19 +```javascript{28-30}

20 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

21

22 var TodoList = React.createClass({

@@ -87,7 +85,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep

85

86 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.

87

90 -```javascript{12-14}

88 +```javascript{12-15}

89 render: function() {

90 var items = this.state.items.map(function(item, i) {

91 return (

@@ -111,9 +109,7 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro

109

110 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:

111

114 -```javascript{12-14}

115 -/** @jsx React.DOM */

116 -

112 +```javascript{10-12}

113 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

114

115 var ImageCarousel = React.createClass({

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

+3 -11

@@ -6,7 +6,7 @@ prev: animation.html

6 next: class-name-manipulation.html

7 ---

8

9 -`ReactLink` is an easy way to express two-way binding with React.

9 +`ReactLink` is an easy way to express two-way binding with React.

10

11 > Note:

12 >

@@ -29,8 +29,6 @@ Two-way binding -- implicitly enforcing that some value in the DOM is always con

29 Here's a simple form example without using `ReactLink`:

30

31 ```javascript

32 -/** @jsx React.DOM */

33 -

32 var NoLink = React.createClass({

33 getInitialState: function() {

34 return {message: 'Hello!'};

@@ -47,9 +45,7 @@ var NoLink = React.createClass({

45

46 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:

47

50 -```javascript{4,9}

51 -/** @jsx React.DOM */

52 -

48 +```javascript{2,7}

49 var WithLink = React.createClass({

50 mixins: [React.addons.LinkedStateMixin],

51 getInitialState: function() {

@@ -77,9 +73,7 @@ There are two sides to `ReactLink`: the place where you create the `ReactLink` i

73

74 ### ReactLink Without LinkedStateMixin

75

80 -```javascript{7-9,11-14}

81 -/** @jsx React.DOM */

82 -

76 +```javascript{5-7,9-12}

77 var WithoutMixin = React.createClass({

78 getInitialState: function() {

79 return {message: 'Hello!'};

@@ -102,8 +96,6 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va

96 ### ReactLink Without valueLink

97

98 ```javascript

105 -/** @jsx React.DOM */

106 -

99 var WithoutLink = React.createClass({

100 mixins: [React.addons.LinkedStateMixin],

101 getInitialState: function() {

docs/docs/getting-started.md

+1 -9

@@ -34,7 +34,6 @@ In the root directory of the starter kit, create a `helloworld.html` with the fo

34 <body>

35 <div id="example"></div>

36 <script type="text/jsx">

37 - /** @jsx React.DOM */

37 React.renderComponent(

38 <h1>Hello, world!</h1>,

39 document.getElementById('example')

@@ -51,18 +50,12 @@ The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/r

50 Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.

51

52 ```javascript

54 -/** @jsx React.DOM */

53 React.renderComponent(

54 <h1>Hello, world!</h1>,

55 document.getElementById('example')

56 );

57 ```

58

61 -> Note:

62 ->

63 -> ```/** @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.

64 -

65 -

59 Then reference it from `helloworld.html`:

60

61 ```html{10}

@@ -86,8 +79,7 @@ jsx --watch src/ build/

79

80 The file `build/helloworld.js` is autogenerated whenever you make a change.

81

89 -```javascript{3}

90 -/** @jsx React.DOM */

82 +```javascript{2}

83 React.renderComponent(

84 React.DOM.h1(null, 'Hello, world!'),

85 document.getElementById('example')

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

+2 -9

@@ -33,7 +33,6 @@ next: tutorial.html

33 <body>

34 <div id="example"></div>

35 <script type="text/jsx">

36 - /** @jsx React.DOM */

36 React.renderComponent(

37 <h1>Hello, world!</h1>,

38 document.getElementById('example')

@@ -50,7 +49,6 @@ next: tutorial.html

49 你的 React JSX 代码文件可以写在另外的文件里。新建下面的 `src/helloworld.js`。

50

51 ```javascript

53 -/** @jsx React.DOM */

52 React.renderComponent(

53 <h1>Hello, world!</h1>,

54 document.getElementById('example')

@@ -58,7 +56,7 @@ React.renderComponent(

56 ```

57

58 然后在 `helloworld.html` 引用该文件：

61 -

59 +

60 ```html{10}

61 <script type="text/jsx" src="src/helloworld.js"></script>

62 ```

@@ -80,18 +78,13 @@ jsx --watch src/ build/

78

79 只要你修改了， `build/helloworld.js` 文件会自动生成。

80

83 -```javascript{3}

84 -/** @jsx React.DOM */

81 +```javascript{2}

82 React.renderComponent(

83 React.DOM.h1(null, 'Hello, world!'),

84 document.getElementById('example')

85 );

86 ```

87

91 -> 注意:

92 ->

93 -> 目前注释解析器还是非常严格；为了让它能够找出 `@jsx` 修饰符，有两个限制是必须的。`@jsx` 注释块必须是代码文件第一个注释。注释必须以 `/**` (`/*` 和 `//` 不起作用) 开头。如果解析器找不到 `@jsx` 注释，它就不会转换代码，直接原样输出到文件。

94 -

88 对照下面更新你的 HTML 代码

89

90 ```html{6,10}

docs/docs/tutorial.md

-2

@@ -39,8 +39,6 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav

39 <body>

40 <div id="content"></div>

41 <script type="text/jsx">

42 - /** @jsx React.DOM */

43 - // The above declaration must remain intact at the top of the script.

42 // Your code here

43 </script>

44 </body>

docs/tips/02-inline-styles.md

-2

@@ -10,8 +10,6 @@ prev: introduction.html

10 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)):

11

12 ```js

13 -/** @jsx React.DOM */

14 -

13 var divStyle = {

14 color: 'white',

15 backgroundImage: 'url(' + imgUrl + ')',

docs/tips/03-if-else-in-JSX.md

+5 -13

@@ -10,8 +10,6 @@ next: self-closing-tag.html

10 `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:

11

12 ```js

13 -/** @jsx React.DOM */

14 -

13 // This JSX:

14 React.renderComponent(<div id="msg">Hello World!</div>, mountNode);

15

@@ -22,8 +20,6 @@ React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);

20 This means that `if` statements don't fit in. Take this example:

21

22 ```js

25 -/** @jsx React.DOM */

26 -

23 // This JSX:

24 <div id={if (condition) { 'msg' }}>Hello World!</div>

25

@@ -34,22 +30,18 @@ React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!");

30 That's not valid JS. You probably want to make use of a ternary expression:

31

32 ```js

37 -/** @jsx React.DOM */

38 -

33 React.renderComponent(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

34 ```

35

42 -If a ternary expression isn't robust enough, you can use `if` statements to determine which

36 +If a ternary expression isn't robust enough, you can use `if` statements to determine which

37 components should be used.

38

39 ```js

46 -/** @jsx React.DOM */

47 -

40 var loginButton;

49 -if (loggedIn) {

50 - loginButton = <LogoutButton />;

51 -} else {

52 - loginButton = <LoginButton />;

41 +if (loggedIn) {

42 + loginButton = <LogoutButton />;

43 +} else {

44 + loginButton = <LoginButton />;

45 }

46

47 return (

docs/tips/06-style-props-value-px.md

-2

@@ -10,8 +10,6 @@ next: children-props-type.html

10 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:

11

12 ```js

13 -/** @jsx React.DOM */

14 -

13 var divStyle = {height: 10}; // rendered as "height:10px"

14 React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);

15 ```

docs/tips/07-children-props-type.md

-4

@@ -10,8 +10,6 @@ next: controlled-input-null-value.html

10 Usually, a component's children (`this.props.children`) is an array of components:

11

12 ```js

13 -/** @jsx React.DOM */

14 -

13 var GenericWrapper = React.createClass({

14 componentDidMount: function() {

15 console.log(Array.isArray(this.props.children)); // => true

@@ -31,8 +29,6 @@ React.renderComponent(

29 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.

30

31 ```js

34 -/** @jsx React.DOM */

35 -

32 var GenericWrapper = React.createClass({

33 componentDidMount: function() {

34 console.log(Array.isArray(this.props.children)); // => false

docs/tips/08-controlled-input-null-value.md

-2

@@ -14,8 +14,6 @@ You might have run into a problem where `value` is specified, but the input can

14 The snippet below shows this phenomenon; after a second, the text becomes editable.

15

16 ```js

17 -/** @jsx React.DOM */

18 -

17 React.renderComponent(<input value="hi" />, mountNode);

18

19 setTimeout(function() {

docs/tips/10-props-in-getInitialState-as-anti-pattern.md

-6

@@ -16,8 +16,6 @@ Using props, passed down from parent, to generate state in `getInitialState` oft

16 **Bad example:**

17

18 ```js

19 -/** @jsx React.DOM */

20 -

19 var MessageBox = React.createClass({

20 getInitialState: function() {

21 return {nameWithQualifier: 'Mr. ' + this.props.name};

@@ -34,8 +32,6 @@ React.renderComponent(<MessageBox name="Rogers"/>, mountNode);

32 Better:

33

34 ```js

37 -/** @jsx React.DOM */

38 -

35 var MessageBox = React.createClass({

36 render: function() {

37 return <div>{'Mr. ' + this.props.name}</div>;

@@ -50,8 +46,6 @@ React.renderComponent(<MessageBox name="Rogers"/>, mountNode);

46 However, it's **not** an anti-pattern if you make it clear that synchronization's not the goal here:

47

48 ```js

53 -/** @jsx React.DOM */

54 -

49 var Counter = React.createClass({

50 getInitialState: function() {

51 // naming it initialX clearly indicates that the only purpose

docs/tips/11-dom-event-listeners.md

-2

@@ -14,8 +14,6 @@ next: initial-ajax.html

14 Try to resize the window:

15

16 ```js

17 -/** @jsx React.DOM */

18 -

17 var Box = React.createClass({

18 getInitialState: function() {

19 return {windowWidth: window.innerWidth};

docs/tips/12-initial-ajax.md

-2

@@ -14,8 +14,6 @@ When processing the response of an asynchronous request, be sure to check that t

14 This example fetches the desired Github user's latest gist:

15

16 ```js

17 -/** @jsx React.DOM */

18 -

17 var UserGist = React.createClass({

18 getInitialState: function() {

19 return {

docs/tips/13-false-in-jsx.md

-3

@@ -12,21 +12,18 @@ Here's how `false` renders in different contexts:

12 Renders as `id="false"`:

13

14 ```js

15 -/** @jsx React.DOM */

15 React.renderComponent(<div id={false} />, mountNode);

16 ```

17

18 String `"false"` as input value:

19

20 ```js

22 -/** @jsx React.DOM */

21 React.renderComponent(<input value={false} />, mountNode);

22 ```

23

24 No child:

25

26 ```js

29 -/** @jsx React.DOM */

27 React.renderComponent(<div>{false}</div>, mountNode);

28 ```

29

docs/tips/14-communicate-between-components.md

-2

@@ -13,8 +13,6 @@ For child-parent communication:

13 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:

14

15 ```js

16 -/** @jsx React.DOM */

17 -

16 var GroceryList = React.createClass({

17 handleClick: function(i) {

18 console.log('You clicked: ' + this.props.items[i]);

docs/tips/15-expose-component-functions.md

-2

@@ -12,8 +12,6 @@ There's another (uncommon) way of [communicating between components](/react/tips

12 Say a list of todos, which upon clicking get removed. If there's only one unfinished todo left, animate it:

13

14 ```js

15 -/** @jsx React.DOM */

16 -

15 var Todo = React.createClass({

16 render: function() {

17 return <div onClick={this.props.onClick}>{this.props.title}</div>;

docs/tips/16-references-to-components.md

-4

@@ -10,16 +10,12 @@ next: children-undefined.html

10 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:

11

12 ```js

13 -/** @jsx React.DOM */

14 -

13 var myComponent = React.renderComponent(<MyComponent />, myContainer);

14 ```

15

16 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.

17

18 ```js

21 -/** @jsx React.DOM */

22 -

19 var myComponent = <MyComponent />; // This is just a descriptor.

20

21 // Some code here...

docs/tips/17-children-undefined.md

-2

@@ -9,8 +9,6 @@ prev: references-to-components.html

9 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:

10

11 ```js

12 -/** @jsx React.DOM */

13 -

12 var App = React.createClass({

13 componentDidMount: function() {

14 // This doesn't refer to the `span`s! It refers to the children between

[Docs] Remove most of @jsx