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

De Aulas
Linha 126: Linha 126:
  
 
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>.
 
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>
 +
    <script type="text/babel" src="script.js"></script>
 +
</head>
 +
 +
<body>
 +
    <div id="root"></div>
 +
    <script type="text/babel">
 +
        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 (
 +
                <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>
 +
            );
 +
        }
 +
 +
        function GetTable() {
 +
            return (
 +
                <div>
 +
                    <table>
 +
                        <thead>
 +
                            <th>ID</th>
 +
                            <th>Nome</th>
 +
                            <th>Valor</th>
 +
                        </thead>
 +
                        {GetItens()}
 +
                    </table>
 +
                </div>
 +
            );
 +
        }
 +
 +
        ReactDOM.render(<GetTable />, document.getElementById('root'));
 +
    </script>
 +
</body>
 +
 +
</html>
 +
</syntaxhighlight>

Edição das 11h40min 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>

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>
    <script type="text/babel" src="script.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        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 (
                <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>
            );
        }

        function GetTable() {
            return (
                <div>
                    <table>
                        <thead>
                            <th>ID</th>
                            <th>Nome</th>
                            <th>Valor</th>
                        </thead>
                        {GetItens()}
                    </table>
                </div>
            );
        }

        ReactDOM.render(<GetTable />, document.getElementById('root'));
    </script>
</body>

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