Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9eed65d

Browse files
petehuntzpao
authored andcommitted
Update jsx-is-not-html.md
1 parent f09a068 commit 9eed65d

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

docs/docs/jsx-is-not-html.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ JSX looks like HTML but there are some important differences you may run into.
1010

1111
## Whitespace removal
1212

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 `{' '}`.
1414

1515
```javascript
1616
<div>{this.props.name} {' '} {this.props.surname}</div>
1717
```
1818

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.
2020

2121
## HTML Entities
2222

@@ -26,20 +26,20 @@ You can insert HTML entities within literal text in JSX:
2626
<div>First &middot; Second</div>
2727
```
2828

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.
3030

3131
```javascript
3232
// Bad: It displays "First &middot; Second"
3333
<div>{'First &middot; Second'}</div>
3434
```
3535

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.
3737

3838
```javascript
3939
<div>{'First · Second'}</div>
4040
```
4141

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.
4343

4444
```javascript
4545
<div>{'First \u00b7 Second'}</div>
@@ -52,29 +52,29 @@ You can use mixed arrays with strings and JSX elements.
5252
<div>{['First ', <span>&middot;</span>, ' Second']}</div>
5353
```
5454

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.
5656

5757
```javascript
58-
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
58+
<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />
5959
```
6060

6161
## Comments
6262

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:
6464

6565
```javascript
66-
<div // This is a single line comment:
66+
<div // This is a single-line comment:
6767
/*
68-
And a multiline
68+
And a multi-line
6969
comment
7070
*/
7171
/>
7272
```
7373

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:
7575

7676
```javascript
77-
// Note: The following is not implemented yet!
77+
// Note: This is not implemented yet!
7878
<div>
7979
{/* This is a comment */}
8080
</div>

0 commit comments

Comments
 (0)