Se você é um desenvolvedor ou pretende ser um algum dia, já deve ter imaginado o quão complexo é criar uma aplicação, e mesmo uma aplicação “simples” pode se tornar algo complexo devido ao escopo ou mudanças que são feitas ao longo do tempo. Isso pode tornar difícil a manutenção da sua aplicação, para contornar isso tentamos separar a nossa aplicação em “pedaços” a fim de isolar funções ou partes do código para facilitar o desenvolvimento e a manutenção. E neste ponto que entra a componentização do React, que eleva isso ao próximo nível, a seguir vou detalhar e demonstrar como trabalhar com componentes, propriedades e estado no React.

Componentização

Componentização é basicamente dividir pedaços da nossa aplicação em pequenos componentes, imagina que você tenha um formulário ou cabeçalho que será reaproveitado na sua aplicação quantas vezes você quiser e ele é dotado de um conjunto de css, html e javascript.

Só que no React a componentização é um grande diferencial, pois ele é totalmente baseado em componentes, em tudo dentro do react é um componente.

Vamos começar

Se ainda não sabe como criar um projeto react clique neste link e veja como fazer isso do zero. Como no React tudo é um componente, o App.js dentro do src também é um componente e vamos começar adicionando nele, um cabeçalho que irá repetir em todas as páginas da nossa aplicação. Então crie uma pasta components e dentro crie o arquivo Header.js (lembrando que o nome de todo o componente começa com a primeira letra maiúscula). Veja abaixo:

import React from 'react';

function Header() {
  return (
    <header>Hello World</header>
  )
}

export default Header;

Pronto, está aí o nosso primeiro componente bem simples que retorna um Hello world e podemos usar quantas vezes desejamos, para importar. Agora no arquivo App.js vamos incluir o import do nosso header e vamos utilizado, dessa forma o seu App.js deve ficar assim:

import React from 'react';

import Header from './components/Header';

function App() {
  return (
    <Header />
  )
}

export default App;

Propriedade

Propriedade é um conceito muito importante do React, que junto com componente e estado é possível fazer qualquer aplicação no React. A propriedade no react e a capacidade de passar uma informação do componente pai para o filho, por exemplo no nosso componente header vamos passar um título para ser colocado no header e nós conseguimos fazer isso basta colocar como parâmetro da função Header uma variável chamada props. Veja abaixo:

function Header(props) {
  return (
    <header>{props.title}</header>
  )
}

E no App.js fica assim

function App() {
  return (
    <Header title="Meu titulo" />
  )
}

Existe também o caso de queremos passar para o nosso componente uma estrutura html, como por exemplo uma <ul />, para devemos usar uma propriedade que criada pelo próprio react chamada children. Veja:

function Header(props) {
  return (
    <header>
      <h1>{props.title}</h1>
      {props.children}
    </header>
  )
}

No App.js fica assim:

function App() {
  return (
    <Header title="Meu titulo" >
      <ul>
        <li>Op 1</li>
        <li>Op 2</li>
        <li>Op 3</li>
      </ul>
    </Header>
  )
}

Estado e Imutabilidade

Vamos imaginar que queremos armazenar e manipular alguma informação dentro do componente, tipo uma listagem que irá alimentar o nosso <ul>. Para isso vamos criar uma variável pages no App.js e vamos preencher com algumas páginas e vamos querer exibir isso automaticamente no nosso componente Header.js. Veja:

function App() {
  const pages = ['React', 'NodeJs', 'JavaScript'];

  return (
    <Header title="Meu titulo" >
      <ul>
        {pages.map(page => <li key={page}>{page}</li>)}
      </ul>
    </Header>
  )
}

Veja que usamos o comando map para percorrer e retornar nossa <li /> com as páginas do array. Lembrando que quando fazemos uma interação no react precisamos identificar através da propriedade key que deve ser única. Bom mas você deve se perguntar que no nosso exemplo nada garante que uma página não irá se repetir e você está certo e o correto é usar um id, mas nesse caso como é somente um exemplo controlado deixei dessa forma mesmo.

Agora queremos incluir novas páginas em nossa lista, a forma tradicional e incluir um botão que dispara uma ação para incluir novas opções. No react isso é muito fácil de se fazer, veja:

function App() {
  const pages = ['React', 'NodeJs', 'JavaScript'];

  function handleAddPage() {
    pages.push(`Nova pagina ${Date.now()}`);

    console.log(pages);
  }

  return (
    <>
      <Header title="Meu titulo" >
        <ul>https://github.com/leandro-oliveira83/example-react-component-props
          {pages.map(page => <li key={page}>{page}</li>)}
        </ul>
      </Header>

      <button type="button" onClick={handleAddPage}>Nova Página</button>
    </>
  )
}

Se você testou o seu código vai ver que aparentemente não funcionou, digo aparentemente pois no console.log ficou correto.

Isso ocorre porque os objetos são imutáveis e precisamos utilizar o conceito de estado para manipular nossos objetos. Vamos ver como isso funciona na prática.

Primeiro precisamos importar do react o useState para criar o estado, depois disso vamos transformar a nossa variável pages em um estado e isso é feito colocando o useState. O useState sempre retorna um array com duas posições, na primeira posição ele retorna a variável com o valor em si e no segundo e a função que utilizamos para atualizar o valor, por padrão eu sempre nomeio essa função com set+nome da variável. Veja:

const [pages, setPages] = useState(['React', 'NodeJs', 'JavaScript']);

Feito isso precisamos chamar a função setPages para atualizar a variável pages e nesse momento que aprendemos sobre o conceito de imutabilidade, isso quer dizer que não podemos alterar diretamente uma variável, nós precisamos recriar essa variável com o novo valor desejado. Sendo assim, no nosso exemplo nós vamos criar um novo array com o conteúdo existente e adicionamos o novo valor no array. Vamos para o código:

function App() {
  const [pages, setPages] = useState(['React', 'NodeJs', 'JavaScript']);

  function handleAddPage() {
    setPages([...pages, `Nova pagina ${Date.now()}`]);

    console.log(pages);
  }

  return (
    <>
      <Header title="Meu titulo" >
        <ul>
          {pages.map(page => <li key={page}>{page}</li>)}
        </ul>
      </Header>

      <button type="button" onClick={handleAddPage}>Nova Página</button>
    </>
  )
}

Pronto depois de aprender esses conceitos você está pronto para criar qualquer componente no React e utilizar os conceitos de propriedade, estado e imutabilidade. O código contendo todo o conteúdo feito neste post está no meu github, para acessar clique no link https://github.com/leandro-oliveira83/example-react-component-props.

Caso tenha gostado desse post, não deixe de compartilhar e acessar outros posts relacionados na sessão ReactJs do blog e caso tenha dúvidas acesse a documentação oficial do react em https://pt-br.reactjs.org/docs/getting-started.html.