Apostila ReactJS - Componentes - Props PDF

Professor Rodrigo Bossini https://www.rodrigobossini.com.br ReactJS Componentes - Props 1 Introdução Neste material, estudaremos mais sobre componentes React e sobre o mecanismo c...

Professor Rodrigo Bossini https://www.rodrigobossini.com.br ReactJS Componentes - Props 1 Introdução Neste material, estudaremos mais sobre componentes React e sobre o mecanismo conhecido como props – que vem de properties. Trata-se de um mecanismo que permite a “entrega” de dados a componentes quando estes são utilizados por meio de sua tag. É análogo à passagem de argumentos entre funções, comum em qualquer linguagem de programação. A Figura 1.1 destaca algumas das principais características de componentes React. Assim como um componente React pode utilizar elementos HTML comuns, ele também pode utilizar outros componentes React previamente definidos. Ou seja, componentes React podem ser aninhados. Uma vez que um componente React tenha sido definido, ele pode ser utilizado inúmeras vezes. Ou seja, componentes React são reutilizáveis. Um componente React pode ser configurado por meio de suas propriedades. A cada vez que é utilizado, um componente React pode se apresentar de forma diferente devido a valores diferentes que lhe foram entregues. Figura 1.1 Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br 2 Desenvolvimento Nesta seção, vamos ilustrar as características de componentes React destacadas desenvolvendo a aplicação que a Figura 1.1 exibe. 2.1 (Criando uma aplicação ReactJS) Use o comando npx create-react-app react-componentes-props para criar a aplicação. Caso seja a primeira execução do create-react-app usando o npx e a versão do npm seja 7+, a mensagem da Figura 2.1.1 deverá ser exibida. Basta confirmar para prosseguir. Figura 2.1.1 Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Nota. A ferramenta npx faz o download do pacote executado – neste caso, o create-react-app – e o mantém instalado em sua memória “cache” – um simples diretório em seu sistema de arquivos. O diretório utilizado depende de onde o NodeJS está instalado. No Linux com NodeJS instalado usando o nvm, ele pode ser encontrado em um diretório cujo path é parecido com /home/rodrigo/.npm/_npx/. Os arquivos ali existentes não fazem parte de sua aplicação React. São arquivos referentes ao pacote instalado apenas. Depois de criar o projeto, use cd react-componentes-props para navegar até o diretório recém-criado. Abra uma instância do VS Code vinculada ao diretório atual com code. No VS Code, clique Terminal >> New Terminal para abrir um novo terminal. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Use npm start para colocar a aplicação em execução. A aplicação pode ser visualizada em localhost:3000. Apague todos os arquivos existentes na pasta src. A seguir, crie um arquivo chamado index.js na mesma pasta. Utilize o conteúdo do Bloco de Código 2.2.1 para criar um componente React simples. Bloco de Código 2.2.1 import React from 'react' import ReactDOM from 'react-dom' const App = () => { return Um componente } ReactDOM.render( , document.querySelector('#root') ) 2.3 (Usando o Bootstrap) Neste exemplo, utilizaremos o Bootstrap para tratar dos aspectos visuais da aplicação. Ele pode ser integrado à aplicação de diferentes formas: - Podemos importá-lo via CDN no arquivo public/index.html, como mostra o Bloco de Código 2.3.1. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.3.1 React App You need to enable JavaScript to run this app. - Também é possível instalar o Bootstrap com npm install bootstrap Feita a sua instalação, é preciso importar o conteúdo desejado no arquivo src/index.js, como ilustra o Bloco de Código 2.3.2. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.3.2 import React from 'react' import ReactDOM from 'react-dom' import 'bootstrap/dist/css/bootstrap.min.css' const App = () => { return Um componente } ReactDOM.render( , document.querySelector('#root') ) - Finalmente, também é possível fazer uso do Bootstrap por meio de pacotes como o react-bootstrap. Trata-se de uma implementação dos componentes do Bootstrap usando componentes React. Assim, cada componente do Bootstrap pode ser utilizado como um componente React. Veja mais sobre ele no Link 2.3.1. Link 2.3.1 https://react-bootstrap.github.io/ Utilizaremos a segunda opção, ou seja, a instalação do bootstrap com npm. Por isso, ajuste seu código como destaca o Bloco de Código 2.3.2. Não é necessário, portanto, manter a alteração feita no arquivo public/index.html. 2.4 (Ícones do Font Awesome) Font Awesome é o nome de uma biblioteca que viabiliza o uso de ícones de alta qualidade. A sua página oficial pode ser encontrada por meio do Link 2.4.1. Link 2.4.1 https://fontawesome.com/ Podemos habilitar o seu uso no projeto de diferentes formas. A importação via CDN e a instalação usando o npm são dois exemplos. Utilizaremos o segundo. Para tal, use npm install --save @fortawesome/fontawesome-free Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br A seguir, ajuste o arquivo index.js como ilustra o Bloco de Código 2.4.1. Bloco de Código 2.4.1 import React from 'react' import ReactDOM from 'react-dom' import 'bootstrap/dist/css/bootstrap.min.css' import '@fortawesome/fontawesome-free/css/all.css' const App = () => { return Um componente } ReactDOM.render( , document.querySelector('#root') ) 2.5 (Criando a lista de três pedidos) Nesta seção, criamos a interface gráfica ilustrada na Figura 1.1. - Começamos com um container responsivo do Bootstrap, como no Bloco de Código 2.5.1. Bloco de Código 2.5.1 const App = () => { return ( // container principal ); } - A seguir, adicionamos o título, como mostra o Bloco de Código 2.5.2. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.5.2 const App = () => { return ( // container principal {} Seus pedidos ); } - A definição do primeiro pedido será feita em uma nova linha do bootstrap. Veja o Bloco e Código 2.5.3. Bloco de Código 2.5.3 const App = () => { return ( // container principal {} Seus pedidos {} ); } - Podemos utilizar algumas classes do modelo grid do Bootstrap para lidar com a responsividade, como no Bloco de Código 2.5.4. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.5.4 const App = () => { return ( // container principal {} Seus pedidos {} {} ); } - Cada pedido será definido como um cartão do Bootstrap, com cabeçalho e corpo. Veja o Bloco de Código 2.5.5. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.5.5 const App = () => { return ( // container principal {} Seus pedidos {} {} {} {} 22/04/2021 {} {} SSD SSD Kingston A400 - SATA ); } - O segundo pedido será definido de maneira análoga. Criamos uma linha do Bootstrap logo abaixo da linha do primeiro pedido. Veja o Bloco de Código 2.5.6. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.5.6 const App = () => { return ( // container principal {} Seus pedidos {}... {} {} {} {} 20/04/2021 {} {} Livro Concrete Mathematics - Donald Knuth ); } Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br - O terceiro pedido é definido de maneira análoga aos demais, como no Bloco de Código 2.5.7. Bloco de Código 2.5.7 const App = () => { return ( // container principal {} Seus pedidos {}... {}... {} {} {} {} 21/01/2021 {} {} Notebook Notebook Dell - 8Gb - i5 Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br ); } 2.6 (Refatorando a aplicação) O código HTML que define cada pedido é essencialmente igual aos demais, a menos do conteúdo. Trata-se de um bloco de código que desejamos reutilizar em diferentes partes da aplicação. Esse tipo de código deve ser definido como um componente React à parte. Vejamos como fazê- lo. - Comece criando um arquivo chamado Pedido.js na pasta src. Seu conteúdo inicial aparece no Bloco de Código 2.6.1. Bloco de Código 2.6.1 import React from 'react' import ReactDOM from 'react-dom' const Pedido = () => { } - A seguir, recorte a definição do primeiro pedido existente no arquivo index.js e cole no arquivo Pedido.js, como mostra o Bloco de Código 2.6.2. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.6.2 import React from 'react' const Pedido = () => { return ( {} 22/04/2021 {} {} SSD SSD Kingston A400 - SATA ) } export default Pedido; - O arquivo index.js, no momento, não possui mais a definição que foi recortada. Veja o Bloco de Código 2.6.3. Bloco de Código 2.6.3... {} {} {}... Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br - O nome de um componente React pode ser utilizado de maneira semelhante ao uso de uma tag HTML. Quando fazemos isso, a função que o define é colocada em execução, produzindo a expressão JSX que especificamos. Assim, o componente React ‘Pedido’ pode ser utilizado no arquivo index.js como destaca o Bloco de Código 2.6.4. Bloco de Código 2.6.4 import React from 'react' import ReactDOM from 'react-dom' import 'bootstrap/dist/css/bootstrap.min.css' import '@fortawesome/fontawesome-free/css/all.css' import Pedido from './Pedido'... {} {}... 2.7 (O mecanismo props) Embora tenhamos refatorado a aplicação criando um componente próprio para a representação de pedidos, ele ainda não é realmente reutilizável. Afinal, seu conteúdo, como nome, descrição e ícone referentes ao pedido, está fixo. Precisamos de um mecanismo que viabilize a especificação do conteúdo a ser utilizado pelo componente no momento em que o utilizamos. Estamos falando do mecanismo conhecido como props. Trata-se de um mecanismo extremamente simples: quando utilizamos um componente por meio de sua tag, especificamos pares chave/valor que ele poderá utilizar internamente. Essas são as suas propriedades. Daí o nome. Funciona exatamente da mesma forma como a passagem de argumentos para uma função, quando a colocamos em execução. Os valores especificados são “empacotados” em um objeto JSON que pode ser acessado pelo componente. A Figura 2.7.1 ilustra a ideia. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Figura 2.7.1 - Assim, podemos reutilizar o componente para definir os três pedidos da lista. A sua definição, feita no arquivo Pedido.js, aparece no Bloco de Código 2.7.1. Nota. O nome props é uma convenção. É possível utilizar qualquer outro identificador válido. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.7.1 import React from 'react' const Pedido = (props) => { return ( {} {props.data} {} {} {props.titulo} {props.descricao} ) } export default Pedido; - O componente Pedido será utilizado três vezes no arquivo index.js. Uma vez para cada pedido da lista. Cada um tem conteúdo distinto, que será especificado via props. Veja o Bloco de Código 2.7.2. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.7.2... {} {} {} {} {} {}... 2.8 (Nova refatoração: componente Cartao) “Cartões” são elementos muito utilizados por aplicações para exibir conteúdo. Podemos promover ainda mais o nível de reusabilidade de nossos componentes criando um componente que seja capaz de representar cartões de maneira independente, não estando atrelado à exibição de pedidos. Para fazê-lo, crie um arquivo chamado Cartao.js na pasta src. Seu conteúdo aparece no Bloco de Código 2.8.1. Repare como deixamos Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.8.1 import React from 'react' const Cartao = (props) => { return ( {} {props.cabecalho} {} {props.children} ) } export default Cartao; Repare nos detalhes destacados. Deixamos em aberto o conteúdo do cabeçalho do cartão, o qual será entregue via props. Além disso, utilizamos a propriedade implícita chamada children. Ela representa os elementos “filhos” de um Cartao, especificados no momento de seu uso. A Figura 2.8.1 ilustra esse detalhe. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Figura 2.8.1 O Bloco de Código 2.8.2 destaca o uso do componente Cartao no arquivo index.js. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.8.2 import React from 'react' import ReactDOM from 'react-dom' import 'bootstrap/dist/css/bootstrap.min.css' import '@fortawesome/fontawesome-free/css/all.css' import Pedido from './Pedido' import Cartao from './Cartao'... {} {} {} {} {} {} Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br A essa altura, a definição do componente Pedido ainda inclui os detalhes referentes à definição de um cartão Bootstrap. Para completar esse passo da refatoração, precisamos removê-las, como no Bloco de Código 2.8.3. Bloco de C´ódigo 2.8.3 const Pedido = ({icone, titulo, descricao}) => { return ( {titulo} {descricao} ) } export default Pedido Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br 2.9 (Componente para Feedback) Temos uma nova funcionalidade a ser implementada: Cada pedido deve exibir botões para que o usuário possa confirmar se a entrega já ocorreu. Podemos, evidentemente, construir um componente React para isso. Ele será um componente que exibe dois botões. Um servirá para que o usuário confirme a entrega e, o outro, para dizer que a entrega ainda não aconteceu. Pensando em reusabilidade, deixaremos os textos que cada botão exibe bem como as funções que são chamadas quando clicados em aberto. Crie um arquivo chamado Feedback.js na pasta src. Seu conteúdo aparece no Bloco de Código 2.9.1. Bloco de Código 2.9.1 import React from 'react'; const Feedback = props => { return ( {props.textoOK} {props.textoNOK} ) } export default Feedback; No arquivo index.js, cada componente Pedido terá um “irmão” – filho do mesmo Cartao – do tipo Feedback. Veja o Bloco de Código 2.9.2. Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Bloco de Código 2.9.2 … import Feedback from './Feedback' … const App = () => { const textoOK = "Já chegou" const textoNOK = "Ainda não chegou" const funcaoOK = () => alert ("Agradecemos a confirmação!") const funcaoNOK = () => alert ("Verificaremos o ocorrido!") const componenteFeedback = ; return ( … {} {} {componenteFeedback} {} {} {componenteFeedback} {} {} Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br {componenteFeedback} Produção: agosto de 2021  Professor Rodrigo Bossini https://www.rodrigobossini.com.br Referências React – A JavaScript library for building user interfaces. 2021. Disponível em. Acesso em agosto de 2021. Produção: agosto de 2021