React.js: Criação de um aplicativo
Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos
Introdução
O React é uma biblioteca JavaScript criada pelo Facebook para construir interfaces do usuário. Ele é usado para a construção de uma aplicação em uma única página e permite a criação de componentes UI (User Interface reutilizáveis). Essa aula é baseada no conteúdo de react da w3schools.
A seguir vemos um exemplo Hello World usando React.
<!DOCTYPE html>
<html>
<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>
<body>
<div id="mydiv"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>
O exemplo acima cria uma classe chamada Hello que extende a classe React.Component do React e renderiza o texto um texto HTML por meio da chamada ReactDOM.render na tag de id mydiv.
Hello World no ReactJS
Vimos que há uma certa simplicidade no exemplo acima, mas não é assim que criamos uma aplicação usando React. Normalmente é legal termos uma estrutura padronizada na criação das nossas aplicações. Para facilitar isso, existem algumas ferramentas que geram para nós uma estrutura pronta com um exemplo básico da qual podemos usar como partida para criar nossa aplicação. No nosso caso, vamos usar a ferramenta Vite.
NPM e Node.js
Tendo o NPM e o Node.js instalados e configurados, então podemos criar um projeto usando o vite uma estrutura de projeto legal pra gente.
$ npm create vite@latest
No linux você precisa usar o sudo porque é necessário ter privilégios de administrador para poder instalar.
|
Criando uma aplicação
Primeiro de tudo você precisa instalar o NPM e o Node.js no seu computador. Na verdade, quando instalamos o Note.js, ele já vem junto o NPM.
Depois podemos criar nossa primeira aplicação. Imagine que vamos criá-la dentro da nossa pasta de projetos, por exemplo C:\React ou no caso do linux /home/meu_usuario/react.
Lá dentro da pasta a gente digita:
$ npm create vite@latest helloreactworld -- --template react
$ cd hello
$ npm install
Se você seguiu os passos certinho e sem erros, podemos terminar nossa instalação dentro da pasta. Então entre na pasta do projeto criado e digite npm install.
$ cd helloreactworld
$ npm install
Assim criamos nosso primeiro projeto chamado helloreactworld que vai estar na pasta com o mesmo nome.
Executando a aplicação
Se tudo deu certo, podemos executar nossa aplicação com o comando abaixo dentro da pasta raiz do projeto:
$ npm run dev
Em caso de sucesso, você verá informações parecidas com o que está mostrado abaixo.
VITE v6.2.3 ready in 206 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Usando a tecla CTRL pressionada e com um clique do o botão esquerdo do mouse em cima de http://localhost:5173 uma janela do browser vai abrir e mostrar a aplicação criada.
Veja que você é informado que para trabalhar na sua aplicação, você deve começar pelo arquivo src/App.jsx, que é onde está o seu hello world.
Agora vamos alterar nosso arquivo App.jsx para deixá-lo mais simples para nosso Hello World.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello React World!</h1>
</div>
);
}
}
export default App;
- Na linha 1 importamos a biblioteca básica do react;
- Na linha 3 criamos uma classe para nossa aplicação que extende a classe
Component. - Na linha 4 implementamos o método
render. Esse método vai ser chamado para abrir nossa aplicação. - Entre a linha 6 e 8, colocamos o código HTML que queremos retornar pelo comando
returnda linha 5. - Na linha 13, exportamos a classe App para ser usada pelo main.jsx que é o componente que renderiza nossa aplicação no navegador.
Um Exemplo Mais Complexo
Como exercício, vamos pegar aquele nosso exemplo de criar uma tabela modularizada e vamos fazer ela nessa estrutura de aplicativos.
Table.css
Vamos criar um CSS para nossa tabela não ficar tão sem graça:
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
thead {
background-color: #4CAF50;
color: white;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
Você pode opcionalmente pegar qualquer outro CSS para tabelas que quiser.
App.jsx
Vamos alterar agora nosso App.jsx para conter dados da tabela. Mas antes, vamos importar o Table.css.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Table.css';
import Table from './Table';
const data = [
{ id: 1, type: 'gato', name: 'Chico', age: 3, email: 'chico@gmail.com' },
{ id: 2, type: 'cachorro', name: 'Picanha', age: 5, email: 'picanha@gmail.com' },
{ id: 3, type: 'lagartixa', name: 'Midori', age: 1, email: 'midori@gmail.com' },
{ id: 4, type: 'papagaio', name: 'Kito', age: 12, email: 'kito@gmail.com' },
];
function App() {
return (
<div>
<Table itens={data} />
</div>
);
}
export default App;
Veja que também estamos usando o bootstrap, ao importá-lo na segunda linha. Mas para podermos usá-lo, precisamos instalar ele no nosso aplicativo. Então digite a seguinte linha de comando dentro da pasta raiz:
$ npm install bootstrap
Também estamos importando o componente Table de ./Table. Esse componente nós que vamos criar, é nossa tabela. E a gente usa ele no return do App, chamando <Table itens={data} /> onde passamos a array de objetos data por parâmetro nas propriedades do componente.
Table.jsx
O código abaixo constrói nosso componente que cria a tabela. Veja que incluímos o GetRow que é o componente que vamos criar para construir cada linha da tabela.
Outra coisa importante é que estamos criando um componente como constante e temos a seta para essa função, abrindo um bloco de chaves para nosso código. Estamos usando arrow function (opcional), mas poderia ser a chamada de uma função normal como: function Table({ itens }) { por exemplo.
Veja que os parâmetros, ou o parâmetro que aqui é apenas um, está dentro de chaves ({ itens }) e não estamos pegando props como parâmetro. Isso é outra coisa legal que podemos fazer para pegar as propriedades pelos nomes dela sem precisar ficar pegando props.a, props.b, etc. Então colocamos chaves e dentro os nomes das propriedades que queremos usar. Veja que aqui estamos trazendo em itens o conteúdo da array de objetos passadas lá em App.jsx.
import React from 'react';
import GetRow from './GetRow';
const Table = ({ itens }) => {
// Retorna os nomes dos atributos
const cols = Object.keys(itens[0]);
return (
<table className="table table-striped table-hover">
<thead>
<tr>
{cols.map((col) => (
<th key={col}>{col.toUpperCase()}</th>
))}
</tr>
</thead>
<tbody>
{itens.map((row) => (
<GetRow key={row.id} row={row} cols={cols} />
))}
</tbody>
</table>
);
}
export default Table;
Seguindo a explicação. Iniciamos criando uma const cols = Object.keys(itens[0]). Isso serve para criar um vetor com os nomes dos atributos dos objetos da array de objetos. Isso é legal porque podemos usar esses nomes para criar, dinamicamente, os nomes das colunas dentro de thead .
Por fim, em tbody chamamos o nosso componente GetRow para criar cada linha da nossa tabela. Vejam que dessa vez passamos como parâmetro row e cols.
GetRow.jsx
Por fim, o componente GetRow fica responsável por pegar cada atributo do objeto e criar uma célula para ele na linha da tabela, retornando uma linha com todos os atributos.
import React from 'react';
const GetRow = ({ row, cols }) => (
<tr>
{cols.map((col) => (
<td key={col}>{row[col]}</td>
))}
</tr>
);
export default GetRow;
Atividade
Agora, como atividade, vamos pegar aquelas nossas atividades anteriores, do conteúdo de React.js Render HTML, e vamos tentar fazer funcionar agora como aplicativo.
