Skip to content

Commit bb6aecb

Browse files
committed
update to React 0.14.0
1 parent 8dab4fd commit bb6aecb

File tree

24 files changed

+26625
-7764
lines changed

24 files changed

+26625
-7764
lines changed

README.md

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ Then play with the source files under the repo's demo* directories.
2525
<html>
2626
<head>
2727
<script src="../build/react.js"></script>
28+
<script src="../build/react-dom.js"></script>
2829
<script src="../build/browser.min.js"></script>
2930
</head>
3031
<body>
@@ -57,16 +58,16 @@ Then play with the source files under the repo's demo* directories.
5758

5859
## Demo01: Render JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html))
5960

60-
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.
61+
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.
6162

6263
```js
63-
React.render(
64+
ReactDOM.render(
6465
<h1>Hello, world!</h1>,
6566
document.getElementById('example')
6667
);
6768
```
6869

69-
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.
70+
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.
7071

7172
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)).
7273

@@ -77,7 +78,7 @@ You could also use JavaScript in JSX. It takes angle brackets (&lt;) as the begi
7778
```js
7879
var names = ['Alice', 'Emily', 'Kate'];
7980

80-
React.render(
81+
ReactDOM.render(
8182
<div>
8283
{
8384
names.map(function (name) {
@@ -98,15 +99,15 @@ var arr = [
9899
<h1>Hello world!</h1>,
99100
<h2>React is awesome</h2>,
100101
];
101-
React.render(
102+
ReactDOM.render(
102103
<div>{arr}</div>,
103104
document.getElementById('example')
104105
);
105106
```
106107

107108
## Demo04: Define a component ([source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html))
108109

109-
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.
110+
`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.
110111

111112
```js
112113
var HelloMessage = React.createClass({
@@ -115,7 +116,7 @@ var HelloMessage = React.createClass({
115116
}
116117
});
117118

118-
React.render(
119+
ReactDOM.render(
119120
<HelloMessage name="John" />,
120121
document.getElementById('example')
121122
);
@@ -142,7 +143,7 @@ var NotesList = React.createClass({
142143
}
143144
});
144145

145-
React.render(
146+
ReactDOM.render(
146147
<NotesList>
147148
<span>hello</span>
148149
<span>world</span>
@@ -157,7 +158,7 @@ Please be minded that only if the component has more than one child node, you co
157158

158159
Components have many specific attributes which are called ”props” in React and can be of any type.
159160

160-
Sometimes you need a way to validate these props. You don't want users input anything into your components.
161+
Sometimes you need a way to validate these props. You don't want users have the freedom to input anything into your components.
161162

162163
React has a solution for this and it's called PropTypes.
163164

@@ -173,14 +174,14 @@ var MyTitle = React.createClass({
173174
});
174175
```
175176

176-
The above component of `Mytitle` has a props of `title`. PropTypes tells React that the title is required and its value should be string.
177+
The above component of `Mytitle` has a props of `title`. PropTypes tells React that the title is required and its value should be string.
177178

178179
Now we give `Title` a number value.
179180

180181
```javascript
181182
var data = 123;
182183

183-
React.render(
184+
ReactDOM.render(
184185
<MyTitle title={data} />,
185186
document.body
186187
);
@@ -209,20 +210,20 @@ var MyTitle = React.createClass({
209210
}
210211
});
211212

212-
React.render(
213+
ReactDOM.render(
213214
<MyTitle />,
214215
document.body
215216
);
216217
```
217218

218219
## Demo07: Finding a DOM node ([source](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html))
219220

220-
Sometimes you need to reference a DOM node in a component. React gives you React.findDOMNode() to find it.
221+
Sometimes you need to reference a DOM node in a component. React gives you `ReactDOM.findDOMNode()` to find it.
221222

222223
```js
223224
var MyComponent = React.createClass({
224225
handleClick: function() {
225-
React.findDOMNode(this.refs.myTextInput).focus();
226+
ReactDOM.findDOMNode(this.refs.myTextInput).focus();
226227
},
227228
render: function() {
228229
return (
@@ -234,13 +235,13 @@ var MyComponent = React.createClass({
234235
}
235236
});
236237

237-
React.render(
238+
ReactDOM.render(
238239
<MyComponent />,
239240
document.getElementById('example')
240241
);
241242
```
242243

243-
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`.
244+
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`.
244245

245246
## Demo08: this.state ([source](https://github.com/ruanyf/react-demos/blob/master/demo08/index.html))
246247

@@ -264,7 +265,7 @@ var LikeButton = React.createClass({
264265
}
265266
});
266267

267-
React.render(
268+
ReactDOM.render(
268269
<LikeButton />,
269270
document.getElementById('example')
270271
);
@@ -297,7 +298,7 @@ var Input = React.createClass({
297298
}
298299
});
299300

300-
React.render(<Input/>, document.body);
301+
ReactDOM.render(<Input/>, document.body);
301302
```
302303

303304
More information on [official document](http://facebook.github.io/react/docs/forms.html).
@@ -336,7 +337,7 @@ var Hello = React.createClass({
336337
}
337338
});
338339

339-
React.render(
340+
ReactDOM.render(
340341
<Hello name="world"/>,
341342
document.body
342343
);
@@ -387,7 +388,7 @@ var UserGist = React.createClass({
387388
}
388389
});
389390
390-
React.render(
391+
ReactDOM.render(
391392
<UserGist source="https://api.github.com/users/octocat/gists" />,
392393
document.body
393394
);
@@ -398,7 +399,7 @@ React.render(
398399
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.
399400
400401
```bash
401-
# install the dependencies in demo11 directory
402+
# install the dependencies in demo12 directory
402403
$ npm install
403404
404405
# 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/
420421
$ npm install -g babel
421422
```
422423

423-
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.
424+
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`.
424425

425426
```bash
426427
$ babel src --out-dir build
@@ -434,6 +435,7 @@ Put the compiled JS files into HTML.
434435
<head>
435436
<title>Hello React!</title>
436437
<script src="build/react.js"></script>
438+
<script src="build/react-dom.js"></script>
437439
<!-- No need for Browser.js! -->
438440
</head>
439441
<body>

0 commit comments

Comments
 (0)