React.js Render HTML
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>
Usando código HTML dentro do JavaScript
É 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>
);
}
ReactDOM.render(<ListaCidades />, document.getElementById('root'));
Observem que:
- para mostrar a informação das variáveis dentro do return(), colocamos ela entre {}, como no caso de
{estado}. - 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
ul.
Tabela
No exemplo a seguir, agora temos uma array de objetos. Cada objeto possui três atributos. Vamos listar esses atributos em uma tabela.
const itens = [
{ id: 1, nome: 'Item 1', valor: 10 },
{ id: 2, nome: 'Item 2', valor: 20 },
{ id: 3, nome: 'Item 3', valor: 30 },
];
function GetItens() {
return (
<div>
<table>
<thead>
<th>ID</th>
<th>Nome</th>
<th>Valor</th>
</thead>
<tbody>
{/* Renderiza as linhas da tabela com base nos dados do estado */}
{itens.map((linha) => (
<tr key={linha.id}>
<td>{linha.id}</td>
<td>{linha.nome}</td>
<td>{linha.valor}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
ReactDOM.render(<GetItens />, document.getElementById('root'));
Veja que na função map da array, agora estamos pegando objetos. Então, para mostrar a informação do atributo, usamos o nome do objeto + ponto + o nome do atributo (ex: linha.nome.
Modularizando
Veja que podemos separar partes do nosso código. Assim como fizemos no javascript.
<!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">
const itens = [
{ id: 1, type: 'gato', name: 'Chico', age: 3 },
{ id: 2, type: 'cachorro', name: 'Picanha', age: 5 },
{ id: 3, type: 'lagartixa', name: 'Midori', age: 1 },
];
function GetRow(props) {
return (
<tr key={props.row.id}>
<td>{props.row.id}</td>
<td>{props.row.type}</td>
<td>{props.row.name}</td>
<td>{props.row.age}</td>
</tr>
);
}
function GetContent() {
return (
<tbody>
{/* Renderiza as linhas da tabela com base nos dados */}
{itens.map((row) => (
<GetRow row={row} />
))}
</tbody>
);
}
function GetTable() {
return (
<div>
<table>
<thead>
<th>ID</th>
<th>Tipo</th>
<th>Nome</th>
<th>Idade</th>
</thead>
<GetContent />
</table>
</div>
);
}
ReactDOM.render(<GetTable />, document.getElementById('root'));
</script>
</body>
</html>
Podemos colocar um estilo na tabela pra ficar mais bonitinha e exercitar o CSS. Então crie um arquivo style.css e adicione esse código. Se sinta livre para fazer as modificações que você quiser. Coloque o nome do arquivo de style.css
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #ddddff
}
tr:hover {
background-color: #bbbbff;
}
th {
background-color: #04AA6D;
color: white;
}
Mas lembre-se de adicionar no head do index.html a importação do arquivo
<link rel="stylesheet" type="text/css" href="style.css" />
Atividade
Agora que já conhecemos um pouquinho do React, vamos fazer uma página web simples com as seguintes características:
- Lista de objetos.
- Criação de uma página usando apenas React Render.
- Use tabelas, campos texto, etc. Tudo isso pode ser utilizado nos componentes para recuperar e alterar as informações da página.
- Não precisa criar elementos dinamicamente como fizemos no semestre passado, mas pode fazer isso caso sobre tempo.
