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

De Aulas
 
(17 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 33: Linha 33:
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
= Usando código HTML dentro do JavaScript =
  
 
É possível usar código HTML dentro do javascript também e pegar esse elemento para renderizar.
 
É possível usar código HTML dentro do javascript também e pegar esse elemento para renderizar.
Linha 76: Linha 78:
 
     );
 
     );
 
}
 
}
 +
 +
ReactDOM.render(<ListaCidades />, document.getElementById('root'));
 +
</syntaxhighlight>
  
 
Observem que:
 
Observem que:
Linha 82: Linha 87:
 
* 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>
 +
                    <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'));
 +
</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>.
 +
 +
= Modularizando =
 +
 +
Veja que podemos separar partes do nosso código. Assim como fizemos no javascript.
 +
 +
<syntaxhighlight lang=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 },
 +
        ];
 +
 +
        const 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>
 +
            );
 +
        }
 +
 +
        const GetContent = () => {
 +
            return (
 +
                <tbody>
 +
                    {/* Renderiza as linhas da tabela com base nos dados */}
 +
                    {itens.map((row) => (
 +
                        <GetRow row={row} />
 +
                    ))}
 +
                </tbody>
 +
            );
 +
        }
 +
 +
        const GetTable = () => {
 +
            return (
 +
                <table>
 +
                    <thead>
 +
                        <th>ID</th>
 +
                        <th>Tipo</th>
 +
                        <th>Nome</th>
 +
                        <th>Idade</th>
 +
                    </thead>
 +
                    <GetContent />
 +
                </table>
 +
            );
 +
        }
 +
 +
        ReactDOM.render(<GetTable />, document.getElementById('root'));
 +
    </script>
 +
</body>
 +
 +
</html>
 +
</syntaxhighlight>
 +
 +
<hr />
 +
 +
Podemos colocar um estilo na tabela pra ficar mais bonitinha e exercitar o CSS. Então crie um arquivo <code>style.css</code> 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;
 +
}
  
−
ReactDOM.render(<ListaCidades />, document.getElementById('root'));
+
th {
 +
    background-color: #04AA6D;
 +
    color: white;
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
Mas lembre-se de adicionar no <code>head</code> do <code>index.html</code> 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.

Edição atual tal como às 20h10min 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>
</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 },
        ];

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

        const GetContent = () => {
            return (
                <tbody>
                    {/* Renderiza as linhas da tabela com base nos dados */}
                    {itens.map((row) => (
                        <GetRow row={row} />
                    ))}
                </tbody>
            );
        }

        const GetTable = () => {
            return (
                <table>
                    <thead>
                        <th>ID</th>
                        <th>Tipo</th>
                        <th>Nome</th>
                        <th>Idade</th>
                    </thead>
                    <GetContent />
                </table>
            );
        }

        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. 

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