File tree Expand file tree Collapse file tree 3 files changed +15
-17
lines changed
Expand file tree Collapse file tree 3 files changed +15
-17
lines changed Original file line number Diff line number Diff line change @@ -8,7 +8,8 @@ We call this a “root” DOM node because everything inside it will be managed
88
99``` js
1010const element = < h1> Hello, world< / h1>
11- ReactDOM .createRoot (document .getElementById (' root' ));
11+ const node = document .getElementById (' root' )
12+ ReactDOM .createRoot (node);
1213```
1314
1415# React Element
@@ -20,14 +21,13 @@ React components extends React.Component.
2021class HelloWorld extends React .Component {
2122 render () {
2223 return (
23- < div>
24- Hello World
25- < / div>
24+ < div> Hello World< / div>
2625 )
2726 }
2827}
2928
30- const root = ReactDOM .createRoot (document .getElementById (' root' ));
29+ const node = document .getElementById (' root' )
30+ const root = ReactDOM .createRoot (node);
3131root .render (< HelloWorld / > );
3232```
3333
@@ -38,12 +38,11 @@ A stateless component can be replace by a simple function.
3838``` js
3939const HelloWorld = () => {
4040 return (
41- < div>
42- Hello World
43- < / div>
41+ < div> Hello World< / div>
4442 );
4543}
4644
47- const root = ReactDOM .createRoot (document .getElementById (' root' ));
45+ const node = document .getElementById (' root' )
46+ const root = ReactDOM .createRoot (node);
4847root .render (< HelloWorld / > );
4948```
Original file line number Diff line number Diff line change @@ -6,16 +6,14 @@ Input data that is passed into the component can be accessed via this.props in a
66class HelloMessage extends React .Component {
77 render () {
88 return (
9- < div>
10- Hello {this .props .msg }
11- < / div>
9+ < div> Hello {this .props .msg }< / div>
1210 )
1311 }
1412}
1513
16- const root = ReactDOM . createRoot ( document .getElementById (' root' ));
17- root . render ( < HelloMessage msg = { ' SII ' } / > );
18-
14+ const node = document .getElementById (' root' )
15+ const root = ReactDOM . createRoot (node );
16+ root . render ( < HelloWorld / > );
1917```
2018
2119``` js
Original file line number Diff line number Diff line change @@ -35,6 +35,7 @@ const Routes = () => {
3535 )
3636}
3737
38- const root = ReactDOM .createRoot (document .getElementById (" root" ));
39- root .render (< Routes / > )
38+ const node = document .getElementById (' root' )
39+ const root = ReactDOM .createRoot (node);
40+ root .render (< Routes / > );
4041```
You can’t perform that action at this time.
0 commit comments