Mudanças entre as edições de "React.js Render HTML"
De Aulas
| Linha 53: | Linha 53: | ||
ReactDOM.render(myelement, document.getElementById('root')); | ReactDOM.render(myelement, document.getElementById('root')); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
| + | = Variáveis e Arrays = | ||
Também podemos trabalhar com variáveis e arrays. O exemplo abaixo lista um conjunto de informações de uma array: | Também podemos trabalhar com variáveis e arrays. O exemplo abaixo lista um conjunto de informações de uma array: | ||
<syntaxhighlight lang=javascript> | <syntaxhighlight lang=javascript> | ||
| + | const estado = "Santa Catarina" | ||
const cidades = ["Florianópolis", "São José", "Palhoça", "Biguaçu"]; | const cidades = ["Florianópolis", "São José", "Palhoça", "Biguaçu"]; | ||
| Linha 62: | Linha 65: | ||
return ( | return ( | ||
<div> | <div> | ||
| − | <h2>Lista de Cidades</h2> | + | <h2>Lista de Cidades de {estado}</h2> |
<ul> | <ul> | ||
{/* Mapeando a array de cidades e renderizando | {/* Mapeando a array de cidades e renderizando | ||
| Linha 73: | Linha 76: | ||
); | ); | ||
} | } | ||
| + | |||
| + | Observem que: | ||
| + | |||
| + | * para mostrar a informação das variáveis dentro do return(), colocamos ela entre {}, como no caso de <code>{estado}</code>. | ||
| + | * Para listar os elementos, usamos uma função map. Isso fará uma interação com todos os elementos da array, retornando para cada, uma linha que é adicionada dentro de <code>ul</code>. | ||
| + | |||
| + | |||
ReactDOM.render(<ListaCidades />, document.getElementById('root')); | ReactDOM.render(<ListaCidades />, document.getElementById('root')); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Edição das 10h08min de 4 de março de 2024
Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos
React Render HTML
O objetivo do React é renderizar uma página HTML. Para isso, usamos uma função chamada ReactDOM.render().
Essa função é composta de dois argumentos:
- Código HTML;
- elemento onde a código HTML será renderizado;
Por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
</script>
</body>
</html>
É possível usar código HTML dentro do javascript também e pegar esse elemento para renderizar.
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Variáveis e Arrays
Também podemos trabalhar com variáveis e arrays. O exemplo abaixo lista um conjunto de informações de uma array:
const estado = "Santa Catarina"
const cidades = ["Florianópolis", "São José", "Palhoça", "Biguaçu"];
function ListaCidades() {
return (
<div>
<h2>Lista de Cidades de {estado}</h2>
<ul>
{/* Mapeando a array de cidades e renderizando
cada cidade como um item de lista */}
{cidades.map((cidade, index) => (
<li key={index}>{cidade}</li>
))}
</ul>
</div>
);
}
Observem que:
* para mostrar a informação das variáveis dentro do return(), colocamos ela entre {}, como no caso de <code>{estado}</code>.
* Para listar os elementos, usamos uma função map. Isso fará uma interação com todos os elementos da array, retornando para cada, uma linha que é adicionada dentro de <code>ul</code>.
ReactDOM.render(<ListaCidades />, document.getElementById('root'));
