Mudanças entre as edições de "React.js Render HTML"

De Aulas
Linha 84: Linha 84:
 
* para mostrar a informação das variáveis dentro do return(), colocamos ela entre {}, como no caso de <code>{estado}</code>.
 
* 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>.
 
* 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>.
 +
 +
= Tabela =
 +
 +
No exemplo a seguir, agora temos uma array de objetos. Cada objeto possui três atributos. Vamos listar esses atributos em uma tabela.
 +
 +
<syntaxhighlight lang=javascript>
 +
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>
 +
                    <tr>
 +
                        <th>ID</th>
 +
                        <th>Nome</th>
 +
                        <th>Valor</th>
 +
                    </tr>
 +
                </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'));
 +
</syntaxhighlight>
 +
 +
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: <code>linha.nome</code>.

Edição das 10h17min 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:

  1. Código HTML;
  2. 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>
    );
}

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>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Valor</th>
                    </tr>
                </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.

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=React.js_Render_HTML&oldid=9011”