You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
61
62
62
63
```js
63
-
React.render(
64
+
ReactDOM.render(
64
65
<h1>Hello, world!</h1>,
65
66
document.getElementById('example')
66
67
);
67
68
```
68
69
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.
70
71
71
72
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)).
72
73
@@ -77,7 +78,7 @@ You could also use JavaScript in JSX. It takes angle brackets (<) as the begi
77
78
```js
78
79
var names = ['Alice', 'Emily', 'Kate'];
79
80
80
-
React.render(
81
+
ReactDOM.render(
81
82
<div>
82
83
{
83
84
names.map(function (name) {
@@ -98,15 +99,15 @@ var arr = [
98
99
<h1>Hello world!</h1>,
99
100
<h2>React is awesome</h2>,
100
101
];
101
-
React.render(
102
+
ReactDOM.render(
102
103
<div>{arr}</div>,
103
104
document.getElementById('example')
104
105
);
105
106
```
106
107
107
108
## Demo04: Define a component ([source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html))
108
109
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.
110
111
111
112
```js
112
113
var HelloMessage =React.createClass({
@@ -115,7 +116,7 @@ var HelloMessage = React.createClass({
115
116
}
116
117
});
117
118
118
-
React.render(
119
+
ReactDOM.render(
119
120
<HelloMessage name="John"/>,
120
121
document.getElementById('example')
121
122
);
@@ -142,7 +143,7 @@ var NotesList = React.createClass({
142
143
}
143
144
});
144
145
145
-
React.render(
146
+
ReactDOM.render(
146
147
<NotesList>
147
148
<span>hello</span>
148
149
<span>world</span>
@@ -157,7 +158,7 @@ Please be minded that only if the component has more than one child node, you co
157
158
158
159
Components have many specific attributes which are called ”props” in React and can be of any type.
159
160
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.
161
162
162
163
React has a solution for this and it's called PropTypes.
163
164
@@ -173,14 +174,14 @@ var MyTitle = React.createClass({
173
174
});
174
175
```
175
176
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.
177
178
178
179
Now we give `Title` a number value.
179
180
180
181
```javascript
181
182
var data =123;
182
183
183
-
React.render(
184
+
ReactDOM.render(
184
185
<MyTitle title={data} />,
185
186
document.body
186
187
);
@@ -209,20 +210,20 @@ var MyTitle = React.createClass({
209
210
}
210
211
});
211
212
212
-
React.render(
213
+
ReactDOM.render(
213
214
<MyTitle />,
214
215
document.body
215
216
);
216
217
```
217
218
218
219
## Demo07: Finding a DOM node ([source](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html))
219
220
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.
@@ -234,13 +235,13 @@ var MyComponent = React.createClass({
234
235
}
235
236
});
236
237
237
-
React.render(
238
+
ReactDOM.render(
238
239
<MyComponent />,
239
240
document.getElementById('example')
240
241
);
241
242
```
242
243
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`.
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.
399
400
400
401
```bash
401
-
# install the dependencies in demo11 directory
402
+
# install the dependencies in demo12 directory
402
403
$ npm install
403
404
404
405
# 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/
420
421
$ npm install -g babel
421
422
```
422
423
423
-
Then precompile your JSXfiles(.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 JSXfiles(.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
425
425
426
```bash
426
427
$ babel src --out-dir build
@@ -434,6 +435,7 @@ Put the compiled JS files into HTML.
0 commit comments