update to React 0.14.0

chenlei0813 · Oct 17, 2015 · bb6aecb · bb6aecb
1 parent 8dab4fd
commit bb6aecb
Show file tree

Hide file tree

Showing 24 changed files with 26,625 additions and 7,764 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ Then play with the source files under the repo's demo* directories.
 <html>
   <head>
     <script src="../build/react.js"></script>
+    <script src="../build/react-dom.js"></script>
     <script src="../build/browser.min.js"></script>
   </head>
   <body>
@@ -57,16 +58,16 @@ Then play with the source files under the repo's demo* directories.
 
 ## Demo01: Render JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html))
 
-The template syntax in React is called [JSX](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). It is allowed in JSX to put HTML tags directly into JavaScript codes. `React.render()` is the method which translates JSX into HTML, and renders it into the specified DOM node.
+The template syntax in React is called [JSX](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). It is allowed in JSX to put HTML tags directly into JavaScript codes. `ReactDOM.render()` is the method which translates JSX into HTML, and renders it into the specified DOM node.
 
 ```js
-React.render(
+ReactDOM.render(
   <h1>Hello, world!</h1>,
   document.getElementById('example')
 );
 ```
 
-Attention, you have to use `<script type="text/babel">` to indicate JSX codes, and include `browser.min.js`, which is a [browser version](https://babeljs.io/docs/usage/browser/) of Babel which could be get inside a [babel-core](https://www.npmjs.com/package/babel-core) npm release, to actually perform the transformation in the browser.
+Attention, you have to use `<script type="text/babel">` to indicate JSX codes, and include `browser.min.js`, which is a [browser version](https://babeljs.io/docs/usage/browser/) of Babel and could be get inside a [babel-core](https://www.npmjs.com/package/babel-core) npm release, to actually perform the transformation in the browser.
 
 Before v0.14, React use `JSTransform.js` to translate `<script type="text/jsx">`. It has been deprecated ([more info](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)).
 
@@ -77,7 +78,7 @@ You could also use JavaScript in JSX. It takes angle brackets (&lt;) as the begi
 ```js
 var names = ['Alice', 'Emily', 'Kate'];
 
-React.render(
+ReactDOM.render(
   <div>
   {
     names.map(function (name) {
@@ -98,15 +99,15 @@ var arr = [
   <h1>Hello world!</h1>,
   <h2>React is awesome</h2>,
 ];
-React.render(
+ReactDOM.render(
   <div>{arr}</div>,
   document.getElementById('example')
 );
 ```
 
 ## Demo04: Define a component ([source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html))
 
-React.createClass() creates a component class, which implements a render method to return an component instance of the class. You don't need to call `new` on the class in order to get an instance, just use it as a normal HTML tag.
+`React.createClass()` creates a component class, which implements a render method to return an component instance of the class. You don't need to call `new` on the class in order to get an instance, just use it as a normal HTML tag.
 
 ```js
 var HelloMessage = React.createClass({
@@ -115,7 +116,7 @@ var HelloMessage = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <HelloMessage name="John" />,
   document.getElementById('example')
 );
@@ -142,7 +143,7 @@ var NotesList = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <NotesList>
     <span>hello</span>
     <span>world</span>
@@ -157,7 +158,7 @@ Please be minded that only if the component has more than one child node, you co
 
 Components have many specific attributes which are called ”props” in React and can be of any type.
 
-Sometimes you need a way to validate these props. You don't want users input anything into your components.
+Sometimes you need a way to validate these props. You don't want users have the freedom to input anything into your components.
 
 React has a solution for this and it's called PropTypes.
 
@@ -173,14 +174,14 @@ var MyTitle = React.createClass({
 });
 ```
 
-The above component of `Mytitle` has a props of `title`.  PropTypes tells React that the title is required and its value should be string.
+The above component of `Mytitle` has a props of `title`. PropTypes tells React that the title is required and its value should be string.
 
 Now we give `Title` a number value.
 
 ```javascript
 var data = 123;
 
-React.render(
+ReactDOM.render(
   <MyTitle title={data} />,
   document.body
 );
@@ -209,20 +210,20 @@ var MyTitle = React.createClass({
    }
 });
 
-React.render(
+ReactDOM.render(
   <MyTitle />,
   document.body
 );
 ```
 
 ## Demo07: Finding a DOM node ([source](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html))
 
-Sometimes you need to reference a DOM node in a component. React gives you React.findDOMNode() to find it.
+Sometimes you need to reference a DOM node in a component. React gives you `ReactDOM.findDOMNode()` to find it.
 
 ```js
 var MyComponent = React.createClass({
   handleClick: function() {
-    React.findDOMNode(this.refs.myTextInput).focus();
+    ReactDOM.findDOMNode(this.refs.myTextInput).focus();
   },
   render: function() {
     return (
@@ -234,13 +235,13 @@ var MyComponent = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <MyComponent />,
   document.getElementById('example')
 );
 ```
 
-The desired DOM node should have a `ref` attribute, and `React.findDOMNode(this.refs.[refName])` would return the corresponding DOM node. Please be minded that you could do that only after this component has been mounted into the DOM, otherwise you get `null`.
+The desired DOM node should have a `ref` attribute, and `ReactDOM.findDOMNode(this.refs.[refName])` would return the corresponding DOM node. Please be minded that you could do that only after this component has been mounted into the DOM, otherwise you get `null`.
 
 ## Demo08: this.state ([source](https://github.com/ruanyf/react-demos/blob/master/demo08/index.html))
 
@@ -264,7 +265,7 @@ var LikeButton = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <LikeButton />,
   document.getElementById('example')
 );
@@ -297,7 +298,7 @@ var Input = React.createClass({
   }
 });
 
-React.render(<Input/>, document.body);
+ReactDOM.render(<Input/>, document.body);
 ```
 
 More information on [official document](http://facebook.github.io/react/docs/forms.html).
@@ -336,7 +337,7 @@ var Hello = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <Hello name="world"/>,
   document.body
 );
@@ -387,7 +388,7 @@ var UserGist = React.createClass({
   }
 });
 
-React.render(
+ReactDOM.render(
   <UserGist source="https://api.github.com/users/octocat/gists" />,
   document.body
 );
@@ -398,7 +399,7 @@ React.render(
 This demo is copied from [github.com/mhart/react-server-example](https://github.com/mhart/react-server-example), but I rewrote it with JSX syntax.
 
 ```bash
-# install the dependencies in demo11 directory
+# install the dependencies in demo12 directory
 $ npm install
 
 # translate all jsx file in src subdirectory to js file
@@ -420,7 +421,7 @@ First, install the command-line tools [Babel](https://babeljs.io/docs/usage/cli/
 $ npm install -g babel
 ```
 
-Then precompile your JSX files(.jsx) into JavaScript(.js). Compiling the entire src directory and output it to the build directory, you may use the option --out-dir or -d.
+Then precompile your JSX files(.jsx) into JavaScript(.js). Compiling the entire src directory and output it to the build directory, you may use the option `--out-dir` or `-d`.
 
 ```bash
 $ babel src --out-dir build
@@ -434,6 +435,7 @@ Put the compiled JS files into HTML.
   <head>
     <title>Hello React!</title>
     <script src="build/react.js"></script>
+    <script src="build/react-dom.js"></script>
     <!-- No need for Browser.js! -->
   </head>
   <body>