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

De Aulas
Linha 142: Linha 142:
 
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.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>
 
     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 +
 +
    <!-- Vamos colocar um estilo pra tabela ficar mais bonitinha e já exercitamos o CSS -->
 +
    <style>
 +
        table {
 +
            border-collapse: collapse;
 +
            width: 100%;
 +
        }
 +
 +
        th,
 +
        td {
 +
            text-align: left;
 +
            padding: 8px;
 +
        }
 +
 +
        tr:nth-child(even) {
 +
            background-color: #f2f2f2
 +
        }
 +
 +
        th {
 +
            background-color: #04AA6D;
 +
            color: white;
 +
        }
 +
    </style>
 
</head>
 
</head>
  
Linha 148: Linha 171:
 
     <script type="text/babel">
 
     <script type="text/babel">
 
         const itens = [
 
         const itens = [
−
             { id: 1, nome: 'Item 1', valor: 10 },
+
             { id: 1, type: 'gato', name: 'Chico', age: 3 },
−
             { id: 2, nome: 'Item 2', valor: 20 },
+
             { id: 2, type: 'cachorro', name: 'Picanha', age: 5 },
−
             { id: 3, nome: 'Item 3', valor: 30 },
+
             { id: 3, type: 'lagartixa', name: 'Midori', age: 1 },
 
         ];
 
         ];
  
−
         function GetItens() {
+
         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 (
 
             return (
 
                 <tbody>
 
                 <tbody>
−
                     {/* Renderiza as linhas da tabela com base nos dados do estado */}
+
                     {/* Renderiza as linhas da tabela com base nos dados */}
−
                     {itens.map((linha) => (
+
                     {itens.map((row) => (
−
                         <tr key={linha.id}>
+
                         <GetRow row={row} />
−
                            <td>{linha.id}</td>
 
−
                            <td>{linha.nome}</td>
 
−
                            <td>{linha.valor}</td>
 
−
                        </tr>
 
 
                     ))}
 
                     ))}
 
                 </tbody>
 
                 </tbody>
Linha 174: Linha 204:
 
                         <thead>
 
                         <thead>
 
                             <th>ID</th>
 
                             <th>ID</th>
 +
                            <th>Tipo</th>
 
                             <th>Nome</th>
 
                             <th>Nome</th>
−
                             <th>Valor</th>
+
                             <th>Idade</th>
 
                         </thead>
 
                         </thead>
−
                         <GetItens />
+
                         <GetContent />
 
                     </table>
 
                     </table>
 
                 </div>
 
                 </div>

Edição das 18h30min de 22 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>

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>

    <!-- Vamos colocar um estilo pra tabela ficar mais bonitinha e já exercitamos o CSS -->
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }

        th {
            background-color: #04AA6D;
            color: white;
        }
    </style>
</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>

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.
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=React.js_Render_HTML&oldid=9066”