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

De Aulas
Linha 130: Linha 130:
  
 
Veja que podemos separar partes do nosso código. Assim como fizemos no javascript.
 
Veja que podemos separar partes do nosso código. Assim como fizemos no javascript.
 +
 +
Vamos primeiro colocar um estilo na tabela pra ficar mais bonitinha e exercitar o CSS. Então crie um arquivo <var>style.css</var> e adicione esse código. Se sinta livre para fazer as modificações que você quiser.
 +
 +
<syntaxhighlight lang=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;
 +
}
 +
</syntaxhighlight>
 +
 +
Depois colocamos nosso código e adicionamos o CSS nele.
  
 
<syntaxhighlight lang=javascript>
 
<syntaxhighlight lang=javascript>
Linha 143: Linha 173:
 
     <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 -->
+
     <link rel="stylesheet" type="text/css" href="style.css" />
−
    <style>
 
−
        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;
 
−
        }
 
−
    </style>
 
 
</head>
 
</head>
  

Edição das 18h47min 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.

Vamos primeiro 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. 

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;
}

Depois colocamos nosso código e adicionamos o CSS nele. 

<!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>

    <link rel="stylesheet" type="text/css" href="style.css" />
</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=9068”