Como criar componentes e usar "props" no React (instalado via NPM)

Por: Angelo Luis Ferreira | 20/02/2021 Acessos: 5.468

Neste tutorial vamos mostrar como definir e utilizar componentes e props no React instalado em um servidor local (Windows, Linux e Mac) via NPM.

Atenção:

O exemplos apresentados neste tutorial são aplicáveis apenas quando se usa o React instalado no seu computador (Windows, Linux e Mac). Para instalar o React no Windows, leia o tutorial: Como instalar e utilizar o React no Windows.

Observações:

a) Utilizamos neste tutorial a extensão JSX. Portanto é recomendável a leitura do artigo: Usando JSX no React.

b) Por ser apropriado para o React, utilizamos o editor Visual Studio Code neste tutorial. Para instalar o Visual Studio Code, acesse o link: https://code.visualstudio.com/

c) Se você deseja adicionar o React apenas em apenas algumas partes de um site, leia o tutorial: Como renderizar elementos do React em um site e Como criar componentes e usar "props" no React adicionado em um site

O que são componentes no React?

O React criou uma nova forma de construção de interfaces, que podemos chamar de "interface baseada em componentes". Os componentes permitem que a UI (Interface do Usuário) possa ser dividida em partes independentes e reutilizáveis, de maneira isolada e livre de dependências externas.

Conceitualmente os componentes são como funções JavaScript que aceitam entradas (denominadas "props") e retornam elementos React que definem o que deve ser renderizado na tela.

É importante frisarmos que os componentes podem possuir diferentes formatos, desde um simples botão até uma página ou um sistema completo.

O que são props?

Props são propriedades/atributos de uma classe que podem ser passados aos seus componentes. As props podem ter diferentes tipos de dados Javascript, como números, strings, funções, objetos e até mesmo outros componentes React.

As props são parte fundamental da criação de um componente. Por isso é extremamente importante aprender como usá-los. São ferramentas necessárias para desenvolver componentes únicos e personalizados para cada situação diferente que você desejar.

1. Criando um componente simples

1.1. Vamos inicialmente construir um componente estático e simples. Os componentes podem ser definidos a partir de uma função ou de uma classe JavaScript. As duas formas são equivalentes do ponto de vista do React.

Observações:

1.1.1. Vamos utilizar nos exemplos deste tutorial o aplicativo react-first que criamos no artigo: Como instalar e utilizar o React no Windows.

1.1.2. Vamos relembrar como é a estrutura básica de arquivos de um aplicativo React, onde temos:

a) node_modules - pasta responsável por guardar todas as dependências do projeto.

b) public - pasta pública da aplicação web. Nela ficam guardados os arquivos iniciais da aplicação, como o index.html que é interpretado pelo navegador, imagens e um arquivo JSON com os parâmetros de configuração do site.

c) src - pasta responsável pelo código fonte da aplicação: Nela ficarão todos os arquivos JavaScript e CSS que irão compor o aplicativo.

1.1.3. Abrindo a pasta src, temos o arquivo principal App.js (que é um componente também) responsável pelo gerenciamento de todo o código fonte do aplicativo e o arquivo index.js que é responsável pela renderização do código, ou seja, visualização de toda a aplicação.

1.1.4. Portanto, é no arquivo App.js onde iremos criar o nosso primeiro componente.

Definição de um componente a partir de uma função

 1.2. No exemplo a seguir vamos criar um componente denominado a partir de uma função JavaScript.

function Welcome() {
   return <h1>Olá Mundo! Seja bem vindo!</h1>
}

Observações: 

1.2.1. Um componente após ser definido precisa estar no formato de uma tag para poder ser renderizado pelo React. Portanto, o componente definido pela função Welcome() precisará se tornar para poder ser renderizado e exibido na tela do navegador.

1.2.2. No JSX, os nomes de tags iniciados com letras minúsculas são considerados tags HTML. Para diferenciar marcadores HTML de componentes, estes devem começar sempre com uma letra maiúscula. No entanto, os nomes de tags em minúsculas com um ponto (acessador de propriedade) não são.

1.2.3. Desta forma, ficou estabelecido que todos os componentes do React devem começar com uma letra maiúscula ou conter um ponto.

 1.3. Abra o arquivo App.js e inclua a função JavaScript que definirá o componente que queremos criar. Veja na imagem abaixo como montamos a estrutura do nosso primeiro componente:

Observações:

1.3.1. Para ser renderizado pelo React e exibido na tela, o componente deverá estar inserido no App() dentro de return.

1.3.2. Podemos reutilizar o mesmo componente quantas vezes desejarmos. Observe que utilizamos o componente duas vezes no nosso código.

Obs.: Você poderá também colocar a função JavaScript dentro do App(). Entretanto, para uma melhor organização do código, recomendo que utilize as definições de componentes fora do App(), como no exemplo anterior.

1.4. Abaixo, segue a estrutura do nosso exemplo para você copiar.

import React from 'react';

  // definindo o componente Welcome()
  function Welcome() {
    return <h1>Olá Mundo! Seja bem vindo!</h1>
  }

function App() {
  
  return (<>
    <h1>Definindo Componentes</h1>
    <hr/>
    <Welcome />
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <Welcome />

  </>)
}

export default App;

1.4.1. Para visualizar a aplicação do React no navegador, abra o terminal do editor ou prompt de comando do Windows e digite o comando "npm start" como mostramos no tutorial: Como instalar e utilizar o React no Windows.

1.4.2. Aguarde alguns instantes para a compilação completa do aplicativo. Após realizada a compilação o seu aplicativo será aberto automaticamente no navegador padrão definido no seu sistema operacional. O projeto será carregado localmente na porta 3000.  Veja o resultado do nosso exemplo abaixo:

Definição de um componente a partir de uma classe

1.5. De forma semelhante ao exemplo acima, podemos definir um componente a partir de uma classe ao invés de uma função. Veja o exemplo abaixo onde definimos o componente a partir de uma classe.

1.5.1. É importante salientar que neste caso ambas as formas (função e classe) são equivalentes para o React. Portanto, o resultado deverá ser o mesmo para qualquer forma que você optar.

class Welcome extends React.Component {
  render() {
    return <h1>Olá Mundo! Seja bem vindo!</h1> 
  }
}

1.6. Segue a estrutura completa do exemplo para você copiar.

import React from 'react';

// definindo o componente Welcome
class Welcome extends React.Component {
  render() {
    return <h1>Olá Mundo! Seja bem vindo!</h1> 
  }
}    

function App() {
  
  return (<>
    <h1>Definindo Componentes</h1>
    <hr/>
    <Welcome />
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <Welcome />

  </>)
}

export default App;

2. Usando props nos componentes

2.1. Como mencionamos no início do tutorial, as props fazem a comunicação entre o componente a ser renderizado e a função ou a classe JavaScript responsável pela sua definição. Portanto, as props nada mais são do que um atalho para as propriedades de uma classe.

2.2. Veja no exemplo abaixo que iremos criar um componente denominado Aluno usando props para exibir o nome, idade e nota de cada aluno.

2.2.1. Primeiro definimos o componente a partir de uma função ou de uma classe no arquivo App.js. As duas formas, função ou classe, são equivalentes para o React quando utilizadas para definir componentes.

a) Definindo o componente Aluno partir de uma função:

function Aluno(props) {
  return (<>
    <p>Nome: {props.nome}</p>
    <p>Idade: {props.idade} anos</p>
    <p>Nota: {props.nota}</p>
    <hr />
  </>)  
}
    

Observações:

a.1. É preciso indicar que o componente irá utilizar props: function Aluno(props)

a.2. Para indicar a propriedade props é necessário utilizar chaves e ponto: {props.nome}

a.3.  Observe que na extensão JSX um componente deve retornar um único elemento raiz. Portanto, tudo o que se pretende retornar em uma função ou classe deve estar dentro de uma tag. Pode ser uma <div></div> ou apenas a tag vazia <></> por exemplo. No nosso código usamos a expressão: return(<> conteúdo do componente </>)

b) Definindo o componente Aluno a partir de uma classe:

// define o componente Aluno
class Aluno extends React.Component {
  render() {
    return (<>
      <p>Nome: {this.props.nome}</p>
      <p>Idade: {this.props.idade} anos</p>
      <p>Nota: {this.props.nota}</p>
      <hr />
    </>)  
  }
}

Observações:

b.1. Para indicar a propriedade props é necessário utilizar chaves, "this" e ponto: {this.props.nome}

b.2. O "this" neste caso é utilizado para indicar que a propriedade props se refere a classe proprietária, que no caso é Aluno.

b.3. Observe que na extensão JSX, tudo o que se pretende retornar em uma função ou classe deve estar dentro de uma tag.

2.2. Agora que já definimos o nosso componente, vamos renderizar o nosso componente com nomes de alunos diferentes:

function App() {
  
  return (<>
    <h1>Alunos</h1>
    <hr/>
    <Aluno nome={'Angelo'} idade={35} nota={8.5} />
    <Aluno nome={'Carlos'} idade={37} nota={7.5}/>
    <Aluno nome={'Maura'} idade={34} nota={9.5}/>
  </>)
}

export default App;

Observações:

2.2.1. É preciso usar chaves para indicar os valores de cada props: nome={'Angelo'}

2.2.2. Observe que utilizamos props com dados tipo string, int e float

2.2.3. Podemos utilizar o mesmo componente, quantas vezes desejarmos, variando ou não os valores das respectivas props.

2.3. Segue o código completo do exemplo para você copiar (usamos uma função para definir o componente Aluno).

import React from 'react';

// define o componente Aluno
function Aluno(props) {
  return (<>
    <p>Nome: {props.nome}</p>
    <p>Idade: {props.idade} anos</p>
    <p>Nota: {props.nota}</p>
    <hr />
  </>)  
}

function App() {
  
  return (<>
    <h1>Alunos</h1>
    <hr/>
    <Aluno nome={'Angelo'} idade={35} nota={8.5} />
    <Aluno nome={'Carlos'} idade={37} nota={7.5}/>
    <Aluno nome={'Maura'} idade={34} nota={9.5}/>
  </>)
}

export default App;
    

2.4. Se você já estiver com React carregado localmente na porta 3000, basta salvar o código que o projeto irá atualizar automaticamente. Se não estiver com o React carregado no navegador refaça o processo de inicialização:

2.4.1. Abra o terminal do editor ou prompt de comando do Windows e digite o comando "npm start" como mostramos no tutorial: Como instalar e utilizar o React no Windows.

2.4.2. Aguarde alguns instantes para a compilação completa do aplicativo. Após realizada a compilação o seu aplicativo será aberto automaticamente no navegador padrão definido no seu sistema operacional. O projeto será carregado localmente na porta 3000. 

2.5. Veja o resultado do nosso exemplo abaixo:

3. Composição de Componentes

3.1.No React é possível criar componentes que reutilizam outros. Isto permite criar pequenos componentes simples, como botões, listas e formulários para depois, compor esses componentes quando precisarmos criar um componente mais complexo.

3.2. No exemplo abaixo vamos mostrar como utilizar um componente simples reutilizado em um componente maior:

3.2.1. Observe que o componente Button está inserido na função que define o componente Aluno.

3.2.2. Observe também que o valor nota é passada pela props para o componente Aluno e depois passada para o componente Button com o nome de noteShow

3.3. Após rodarmos o código, veremos na tela do navegador:

 3.3.1. Ao clicar no botão o usuário visualizará a nota do aluno. Este exemplo é apenas para ilustrar uma composição de componentes.

4. Props são somente para leitura (read-only)

4.1. O React é bastante flexível mas possui uma única regra restrita: "Todos os componentes React tem que agir como funções puras em relação à suas props."

4.2. Isto significa que qualquer forma que você declare um componente, seja através de classes ou funções, você nunca deve alterar o valor de props. Portanto, os componentes devem ser escritos como funções puras, de modo que o valor de suas props permaneça inalterado.

4.2.1. Observe abaixo um exemplo de função pura:

Observação: Na função abaixo, nós recebemos os parâmetros a e b e retornamos a sua soma. Funções como essa são consideradas funções puras, pois chamadas com os mesmos parâmetros, sempre retornarão os mesmos resultados. Portanto, se a =2 e b = 4, o resultado retornado será será sempre 6.

function sum(a, b) {
  return a + b;
}

4.2.3. Já o exemplo abaixo é considerado uma função impura. Observe que se y = 2, a função retornará sempre valores diferentes, 2, 4, 6, etc.:

let x = 0; 
   
function sum(y) {
    return x += y;
}

4.3. Para saber mais sobre funções puras leia: O que é uma Função Pura? Código em Javascript.

Documentação Oficial

1. [https://pt-br.reactjs.org/docs/components-and-props.html] » Componentes e Props - React