The library for web and native user interfaces.
Update jsx-is-not-html.md
petehunt committed
Jun 17, 2013 at 03:11 UTC
fad7d58fc9ef8da03acc6f4d1a11a2844f4cd2ce
1 file changed
+12
-12
docs/docs/jsx-is-not-html.md
+12
-12
@@ -10,13 +10,13 @@ JSX looks like HTML but there are some important differences you may run into.
10
11
## Whitespace removal
12
13
-JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all the whitespaces between two curly braces expressions. If you want to have a white space, a work-around is to add `{' '}`.
13
+JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add `{' '}`.
14
15
```javascript
16
<div>{this.props.name} {' '} {this.props.surname}</div>
17
```
18
19
-This behavior is still being debated. Follow [Issue #65](https://github.com/facebook/react/issues/65) to be updated on the situation.
19
+Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
20
21
## HTML Entities
22
@@ -26,20 +26,20 @@ You can insert HTML entities within literal text in JSX:
26
<div>First · Second</div>
27
```
28
29
-If you want to display an HTML entity within a dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
29
+If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
30
31
```javascript
32
// Bad: It displays "First · Second"
33
<div>{'First · Second'}</div>
34
```
35
36
-There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You've got to make sure that the file is saved as UTF-8 and that the propers UTF-8 directives are set so the browser will display it correctly.
36
+There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
37
38
```javascript
39
<div>{'First · Second'}</div>
40
```
41
42
-A safer alternative is to find the <a href="http://www.fileformat.info/info/unicode/char/b7/index.htm">unicode number corresponding to the entity</a> and use it inside of a Javascript string.
42
+A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
43
44
```javascript
45
<div>{'First \u00b7 Second'}</div>
@@ -52,29 +52,29 @@ You can use mixed arrays with strings and JSX elements.
52
<div>{['First ', <span>·</span>, ' Second']}</div>
53
```
54
55
-In last resort, you always have the ability to insert raw HTML inside of the div.
55
+As a last resort, you always have the ability to insert raw HTML.
56
57
```javascript
58
-<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
58
+<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
59
```
60
61
## Comments
62
63
-JSX supports both single-line and multi-lines Javascript comments within a tag declaration:
63
+JSX supports both single-line and multi-line JavaScript comments within a tag declaration:
64
65
```javascript
66
-<div // This is a single line comment:
66
+<div // This is a single-line comment:
67
/*
68
- And a multiline
68
+ And a multi-line
69
comment
70
*/
71
/>
72
```
73
74
-As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following way to write comments:
74
+As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following:
75
76
```javascript
77
-// Note: The following is not implemented yet!
77
+// Note: This is not implemented yet!
78
<div>
79
{/* This is a comment */}
80
</div>