52494f9d72 · samitouri/QOS-React-2

docs/docs/02-displaying-data.md

+1 -1

@@ -47,7 +47,7 @@ var HelloWorld = React.createClass({

47 });

48

49 setInterval(function() {

50 - React.renderComponent(

50 + React.render(

51 <HelloWorld date={new Date()} />,

52 document.getElementById('example')

53 );

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

+1 -1

@@ -47,7 +47,7 @@ var HelloWorld = React.createClass({

47 });

48

49 setInterval(function() {

50 - React.renderComponent(

50 + React.render(

51 <HelloWorld date={new Date()} />,

52 document.getElementById('example')

53 );

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

+1 -1

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({

29 }

30 });

31

32 -React.renderComponent(

32 +React.render(

33 <LikeButton />,

34 document.getElementById('example')

35 );

docs/docs/04-multiple-components.md

+1 -1

@@ -48,7 +48,7 @@ var ProfileLink = React.createClass({

48 }

49 });

50

51 -React.renderComponent(

51 +React.render(

52 <Avatar username="pwh" />,

53 document.getElementById('example')

54 );

docs/docs/05-reusable-components.md

+6 -7

@@ -100,19 +100,18 @@ The result of `getDefaultProps()` will be cached and used to ensure that `this.p

100

101 ## Transferring Props: A Shortcut

102

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.

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. You can use the JSX _spread_ syntax to achieve this:

104

105 ```javascript

106 var CheckLink = React.createClass({

107 render: function() {

108 - // transferPropsTo() will take any props passed to CheckLink

109 - // and copy them to <a>

110 - return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);

108 + // This takes any props passed to CheckLink and copies them to <a>

109 + return <a {...this.props}>{'√ '}{this.props.children}</a>;

110 }

111 });

112

114 -React.renderComponent(

115 - <CheckLink href="javascript:alert('Hello, world!');">

113 +React.render(

114 + <CheckLink href="/checked.html">

115 Click here!

116 </CheckLink>,

117 document.getElementById('example')

@@ -180,7 +179,7 @@ var TickTock = React.createClass({

179 }

180 });

181

183 -React.renderComponent(

182 +React.render(

183 <TickTock />,

184 document.getElementById('example')

185 );

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

+1 -1

@@ -50,7 +50,7 @@ var MyComponent = React.createClass({

50 }

51 });

52

53 -React.renderComponent(

53 +React.render(

54 <MyComponent />,

55 document.getElementById('example')

56 );

docs/docs/09.5-clone-with-props.md

+4 -4

@@ -10,12 +10,12 @@ In rare situations a component may want to change the props of a component that

10

11 #### `ReactComponent React.addons.cloneWithProps(ReactComponent component, object? extraProps)`

12

13 -Do a shallow copy of `component` and merge any props provided by `extraProps`. Props are merged in the same manner as [`transferPropsTo()`](/react/docs/component-api.html#transferpropsto), so props like `className` will be merged intelligently.

13 +Do a shallow copy of `component` and merge any props provided by `extraProps`. The `className` and `style` props will be merged intelligently.

14

15 > Note:

16 >

17 -> `cloneWithProps` does not transfer the `key` prop to the cloned component. If you wish to preserve the key, add it to the `extraProps` object:

17 +> `cloneWithProps` does not transfer `key` to the cloned component. If you wish to preserve the key, add it to the `extraProps` object:

18 > ```js

19 -> var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.props.key });

19 +> var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.key });

20 > ```

21 -> `ref` is another prop that is not preserved either.

21 +> `ref` is similarly not preserved.

docs/docs/getting-started.md

+3 -3

@@ -34,7 +34,7 @@ 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 - React.renderComponent(

37 + React.render(

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

39 document.getElementById('example')

40 );

@@ -50,7 +50,7 @@ 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

53 -React.renderComponent(

53 +React.render(

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

55 document.getElementById('example')

56 );

@@ -80,7 +80,7 @@ jsx --watch src/ build/

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

81

82 ```javascript{2}

83 -React.renderComponent(

83 +React.render(

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

85 document.getElementById('example')

86 );

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

+3 -3

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

33 <body>

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

35 <script type="text/jsx">

36 - React.renderComponent(

36 + React.render(

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

38 document.getElementById('example')

39 );

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

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

50

51 ```javascript

52 -React.renderComponent(

52 +React.render(

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

54 document.getElementById('example')

55 );

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

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

80

81 ```javascript{2}

82 -React.renderComponent(

82 +React.render(

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

84 document.getElementById('example')

85 );

docs/docs/ref-01-top-level-api.md

+9 -9

@@ -22,10 +22,10 @@ Create a component given a specification. A component implements a `render` meth

22 For more information about the specification object, see [Component Specs and Lifecycle](/react/docs/component-specs.html).

23

24

25 -### React.renderComponent

25 +### React.render

26

27 ```javascript

28 -ReactComponent renderComponent(

28 +ReactComponent render(

29 ReactComponent component,

30 DOMElement container,

31 [function callback]

@@ -40,7 +40,7 @@ If the optional callback is provided, it will be executed after the component is

40

41 > Note:

42 >

43 -> `React.renderComponent()` replaces the contents of the container node you

43 +> `React.render()` replaces the contents of the container node you

44 > pass in. In the future, it may be possible to insert a component to an

45 > existing DOM node without overwriting the existing children.

46

@@ -54,24 +54,24 @@ boolean unmountComponentAtNode(DOMElement container)

54 Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.

55

56

57 -### React.renderComponentToString

57 +### React.renderToString

58

59 ```javascript

60 -string renderComponentToString(ReactComponent component)

60 +string renderToString(ReactComponent component)

61 ```

62

63 Render a component to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

64

65 -If you call `React.renderComponent()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

65 +If you call `React.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

66

67

68 -### React.renderComponentToStaticMarkup

68 +### React.renderToStaticMarkup

69

70 ```javascript

71 -string renderComponentToStaticMarkup(ReactComponent component)

71 +string renderToStaticMarkup(ReactComponent component)

72 ```

73

74 -Similar to `renderComponentToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

74 +Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

75

76 ### React.isValidClass

77

docs/docs/ref-02-component-api.md

+5 -5

@@ -8,7 +8,7 @@ next: component-specs.html

8

9 ## ReactComponent

10

11 -Instances of a React Component are created internally in React when rendering. These instances are reused in subsequent renders, and can be accessed in your component methods as `this`. The only way to get a handle to a React Component instance outside of React is by storing the return value of `React.renderComponent`. Inside other Components, you may use [refs](/react/docs/more-about-refs.html) to achieve the same result.

11 +Instances of a React Component are created internally in React when rendering. These instances are reused in subsequent renders, and can be accessed in your component methods as `this`. The only way to get a handle to a React Component instance outside of React is by storing the return value of `React.render`. Inside other Components, you may use [refs](/react/docs/more-about-refs.html) to achieve the same result.

12

13

14 ### setState

@@ -103,15 +103,15 @@ Properties that are specified directly on the target component instance (such as

103 setProps(object nextProps[, function callback])

104 ```

105

106 -When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `React.renderComponent()`.

106 +When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `React.render()`.

107

108 -Though calling `React.renderComponent()` again on the same node is the preferred way to update a root-level component, you can also call `setProps()` to change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once `setProps` is completed and the component is re-rendered.

108 +Though calling `React.render()` again on the same node is the preferred way to update a root-level component, you can also call `setProps()` to change its properties and trigger a re-render. In addition, you can supply an optional callback function that is executed once `setProps` is completed and the component is re-rendered.

109

110 > Note:

111 >

112 -> When possible, the declarative approach of calling `React.renderComponent()` again is preferred; it tends to make updates easier to reason about. (There's no significant performance difference between the two approaches.)

112 +> When possible, the declarative approach of calling `React.render()` again is preferred; it tends to make updates easier to reason about. (There's no significant performance difference between the two approaches.)

113 >

114 -> This method can only be called on a root-level component. That is, it's only available on the component passed directly to `React.renderComponent()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.

114 +> This method can only be called on a root-level component. That is, it's only available on the component passed directly to `React.render()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.

115

116

117 ### replaceProps

docs/docs/thinking-in-react.md

+1 -1

@@ -68,7 +68,7 @@ To build a static version of your app that renders your data model you'll want t

68

69 You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.

70

71 -At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.

71 +At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `React.render()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.

72

73 Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.

74

docs/docs/tutorial.md

+7 -7

@@ -75,7 +75,7 @@ var CommentBox = React.createClass({

75 );

76 }

77 });

78 -React.renderComponent(

78 +React.render(

79 <CommentBox />,

80 document.getElementById('content')

81 );

@@ -96,7 +96,7 @@ var CommentBox = React.createClass({displayName: 'CommentBox',

96 );

97 }

98 });

99 -React.renderComponent(

99 +React.render(

100 CommentBox(null),

101 document.getElementById('content')

102 );

@@ -112,7 +112,7 @@ The `<div>` tags are not actual DOM nodes; they are instantiations of React `div

112

113 You do not have to return basic HTML. You can return a tree of components that you (or someone else) built. This is what makes React **composable**: a key tenet of maintainable frontends.

114

115 -`React.renderComponent()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

115 +`React.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

116

117 ## Composing components

118

@@ -278,7 +278,7 @@ var data = [

278 ];

279 ```

280

281 -We need to get this data into `CommentList` in a modular way. Modify `CommentBox` and the `renderComponent()` call to pass this data into the `CommentList` via props:

281 +We need to get this data into `CommentList` in a modular way. Modify `CommentBox` and the `React.render()` call to pass this data into the `CommentList` via props:

282

283 ```javascript{7,15}

284 // tutorial9.js

@@ -294,7 +294,7 @@ var CommentBox = React.createClass({

294 }

295 });

296

297 -React.renderComponent(

297 +React.render(

298 <CommentBox data={data} />,

299 document.getElementById('content')

300 );

@@ -330,7 +330,7 @@ Let's replace the hard-coded data with some dynamic data from the server. We wil

330

331 ```javascript{3}

332 // tutorial11.js

333 -React.renderComponent(

333 +React.render(

334 <CommentBox url="comments.json" />,

335 document.getElementById('content')

336 );

@@ -446,7 +446,7 @@ var CommentBox = React.createClass({

446 }

447 });

448

449 -React.renderComponent(

449 +React.render(

450 <CommentBox url="comments.json" pollInterval={2000} />,

451 document.getElementById('content')

452 );

docs/downloads.md

+1 -1

@@ -71,7 +71,7 @@ If you're using an npm-compatible packaging system like browserify or webpack, y

71

72 ```js

73 var React = require('react');

74 -React.renderComponent(...);

74 +React.render(...);

75 ```

76

77 If you'd like to use any [add-ons](/react/docs/addons.html), use `var React = require('react/addons');` instead.

docs/tips/02-inline-styles.md

+1 -1

@@ -17,7 +17,7 @@ var divStyle = {

17 msTransition: 'all' // 'ms' is the only lowercase vendor prefix

18 };

19

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

20 +React.render(<div style={divStyle}>Hello World!</div>, mountNode);

21 ```

22

23 Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".

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

+3 -3

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

11

12 ```js

13 // This JSX:

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

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

15

16 // Is transformed to this JS:

17 -React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);

17 +React.render(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);

18 ```

19

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

@@ -30,7 +30,7 @@ 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

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

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

34 ```

35

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

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

+1 -1

@@ -11,7 +11,7 @@ When specifying a pixel value for your inline `style` prop, React automatically

11

12 ```js

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

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

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

15 ```

16

17 See [Inline Styles](/react/tips/inline-styles.html) for more info.

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

+2 -2

@@ -20,7 +20,7 @@ var GenericWrapper = React.createClass({

20 }

21 });

22

23 -React.renderComponent(

23 +React.render(

24 <GenericWrapper><span/><span/><span/></GenericWrapper>,

25 mountNode

26 );

@@ -43,7 +43,7 @@ var GenericWrapper = React.createClass({

43 }

44 });

45

46 -React.renderComponent(<GenericWrapper>hello</GenericWrapper>, mountNode);

46 +React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

47 ```

48

49 To make `this.props.children` easy to deal with, we've provided the [React.Children utilities](/react/docs/top-level-api.html#react.children).

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

+2 -2

@@ -14,9 +14,9 @@ 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 -React.renderComponent(<input value="hi" />, mountNode);

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

18

19 setTimeout(function() {

20 - React.renderComponent(<input value={null} />, mountNode);

20 + React.render(<input value={null} />, mountNode);

21 }, 1000);

22 ```

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

+3 -3

@@ -26,7 +26,7 @@ var MessageBox = React.createClass({

26 }

27 });

28

29 -React.renderComponent(<MessageBox name="Rogers"/>, mountNode);

29 +React.render(<MessageBox name="Rogers"/>, mountNode);

30 ```

31

32 Better:

@@ -38,7 +38,7 @@ var MessageBox = React.createClass({

38 }

39 });

40

41 -React.renderComponent(<MessageBox name="Rogers"/>, mountNode);

41 +React.render(<MessageBox name="Rogers"/>, mountNode);

42 ```

43

44 (For more complex logic, simply isolate the computation in a method.)

@@ -62,5 +62,5 @@ var Counter = React.createClass({

62 }

63 });

64

65 -React.renderComponent(<Counter initialCount={7}/>, mountNode);

65 +React.render(<Counter initialCount={7}/>, mountNode);

66 ```

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

+1 -1

@@ -36,7 +36,7 @@ var Box = React.createClass({

36 }

37 });

38

39 -React.renderComponent(<Box />, mountNode);

39 +React.render(<Box />, mountNode);

40 ```

41

42 `componentDidMount` is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.

docs/tips/12-initial-ajax.md

+1 -1

@@ -44,7 +44,7 @@ var UserGist = React.createClass({

44 }

45 });

46

47 -React.renderComponent(

47 +React.render(

48 <UserGist source="https://api.github.com/users/octocat/gists" />,

49 mountNode

50 );

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

+3 -3

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

12 Renders as `id="false"`:

13

14 ```js

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

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

16 ```

17

18 String `"false"` as input value:

19

20 ```js

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

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

22 ```

23

24 No child:

25

26 ```js

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

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

28 ```

29

30 The reason why this one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && 'You have more than one item'}</div>`.

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

+1 -1

@@ -31,7 +31,7 @@ var GroceryList = React.createClass({

31 }

32 });

33

34 -React.renderComponent(

34 +React.render(

35 <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode

36 );

37 ```

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

+1 -1

@@ -53,7 +53,7 @@ var Todos = React.createClass({

53 }

54 });

55

56 -React.renderComponent(<Todos />, mountNode);

56 +React.render(<Todos />, mountNode);

57 ```

58

59 Alternatively, you could have achieved this by passing the `todo` an `isLastUnfinishedItem` prop, let it check this prop in `componentDidUpdate`, then animate itself; however, this quickly gets messy if you pass around different props to control animations.

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

+3 -3

@@ -7,10 +7,10 @@ prev: expose-component-functions.html

7 next: children-undefined.html

8 ---

9

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:

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.render` returns a reference to the mounted component:

11

12 ```js

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

13 +var myComponent = React.render(<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.

@@ -20,7 +20,7 @@ var myComponent = <MyComponent />; // This is just a descriptor.

20

21 // Some code here...

22

23 -myComponent = React.renderComponent(myComponent, myContainer);

23 +myComponent = React.render(myComponent, myContainer);

24 ```

25

26 > Note:

docs/tips/17-children-undefined.md

+1 -1

@@ -21,7 +21,7 @@ var App = React.createClass({

21 }

22 });

23

24 -React.renderComponent(<App></App>, mountNode);

24 +React.render(<App></App>, mountNode);

25 ```

26

27 To access your own subcomponents (the `span`s), place [refs](http://facebook.github.io/react/docs/more-about-refs.html) on them.

Update docs to align with 0.12 better