@@ -67,31 +67,31 @@ Se você usar ["pedaços"](/learn/add-react-to-a-website) do React aqui e ali, c
67
67
<Sandpack >
68
68
69
69
``` html public/index.html
70
- <nav id =" navegacao " ></nav >
70
+ <nav id =" navigation " ></nav >
71
71
<main >
72
72
<p >Este parágrafo não é renderizado pelo React (abra index.html para verificar).</p >
73
- <section id =" comentarios " ></section >
73
+ <section id =" comments " ></section >
74
74
</main >
75
75
```
76
76
77
77
``` js index.js active
78
78
import ' ./styles.css' ;
79
79
import { render } from ' react-dom' ;
80
- import { Comentarios , Navegacao } from ' ./Components.js' ;
80
+ import { Comments , Navigation } from ' ./Components.js' ;
81
81
82
82
render (
83
- < Navegacao / > ,
84
- document .getElementById (' navegacao ' )
83
+ < Navigation / > ,
84
+ document .getElementById (' navigation ' )
85
85
);
86
86
87
87
render (
88
- < Comentarios / > ,
89
- document .getElementById (' comentarios ' )
88
+ < Comments / > ,
89
+ document .getElementById (' comments ' )
90
90
);
91
91
```
92
92
93
93
``` js Components.js
94
- export function Navegacao () {
94
+ export function Navigation () {
95
95
return (
96
96
< ul>
97
97
< NavLink href= " /" > Home< / NavLink>
@@ -108,19 +108,19 @@ function NavLink({ href, children }) {
108
108
);
109
109
}
110
110
111
- export function Comentarios () {
111
+ export function Comments () {
112
112
return (
113
113
<>
114
114
< h2> Comentarios< / h2>
115
- < Comentario texto = " Olá!" autor = " Sophie" / >
116
- < Comentario texto = " Como vai você?" autor = " Sunil" / >
115
+ < Comment text = " Olá!" author = " Sophie" / >
116
+ < Comment text = " Como vai você?" author = " Sunil" / >
117
117
< / >
118
118
);
119
119
}
120
120
121
- function Comentario ({ texto, autor }) {
121
+ function Comentario ({ text, author }) {
122
122
return (
123
- < p> {texto } — < i> {autor }< / i>< / p>
123
+ < p> {text } — < i> {author }< / i>< / p>
124
124
);
125
125
}
126
126
```
@@ -147,18 +147,18 @@ import App from './App.js';
147
147
let i = 0 ;
148
148
setInterval (() => {
149
149
render (
150
- < App contador = {i} / > ,
150
+ < App counter = {i} / > ,
151
151
document .getElementById (' root' )
152
152
);
153
153
i++ ;
154
154
}, 1000 );
155
155
```
156
156
157
157
``` js App.js
158
- export default function App ({contador }) {
158
+ export default function App ({counter }) {
159
159
return (
160
160
<>
161
- < h1> Olá, mundo! {contador }< / h1>
161
+ < h1> Olá, mundo! {counter }< / h1>
162
162
< input placeholder= " Digite algo aqui!" / >
163
163
< / >
164
164
);
0 commit comments