Atualmente, React é a biblioteca mais popular do mundo! Consequentemente, várias pessoas querem aprender React, mas acabam esbarrando em alguns conceitos que podem parecer um pouco confusos logo de cara. Especialmente para quem nunca mexeu com nada parecido.

Pensando nisso, decidimos esclarecer alguns desses conceitos e desmistificar que React é complicado.

Conceitos

props

Props vem de properties (propriedades) e é um conceito fundamental que serve de base para várias coisas no React. Com ele podemos transmitir dados entre componentes. Esses dados podem ter qualquer tipo (String, Int, Array, Objeto e etc), dessa forma podemos criar e estilizar componentes sem a necessidade de valores estáticos.

Por exemplo, aqui estou passando como props um array de 10 números para o meu componente A:

<A numeros={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />

Agora, no meu componente que recebeu esses props, é só utilizá-lo assim:

<div>
	{props.numeros}
</div>

state

Através desse conceito é possível termos componentes reativos que sejam capazes de armazenar valores. Também temos aqui a ideia de imutabilidade, segundo a qual recomenda-se nunca haver modificações diretamente no estado do componente. Em outras palavras, evite alterar o valor manualmente, pois isso acaba gerando um erro e travando o seu componente. Por isso o ideal é que haja uma evolução desse estado.

Dessa forma, dentro do mesmo projeto podemos ter vários valores diferentes que estarão associados ao componente. Uma vez que sua estrutura é bem flexível, pode receber praticamente qualquer dado.

Por exemplo, abaixo criei um estado chamado nome e atribuí uma String com o nome João:

state = {
	nome: 'João'
}

Logo depois, para acessar esse estado, utilizei o seguinte:

<p>{this.state.nome}</p>

Dessa forma, será possível renderizar o valor João no navegador.

setState

Como falei mais acima, conforme a imutabilidade não é recomendável pegar o valor e alterá-lo manualmente. Então, para evitar esse problema a função setState faz modificações em componentes. Sempre que um elemento do estado é modificado o componente é renderizado novamente, alterando apenas o necessário. Isso é muito importante, pois frequentemente você terá estados alterando o seu valor, então precisamos garantir que tudo vai ser renderizado corretamente.

Só para exemplificar, vamos criar o componente em questão:

state = {
	contador: 1
}

Em seguida, vamos criar a função responsável por alterar esse estado. Basta fazer algo do tipo:

this.setState({...this.state, contador: this.state.contador + 1})

Primeiro ponto que podemos ressaltar é esse:

...this.state

Nele pegamos o estado atual e fazemos uma cópia, pois vamos apenas modificar, atualizar e evoluir o estado em questão. Logo em seguida pegamos o elemento do estado que queremos modificar e aplicamos:

contador: this.state.contador + 1

Nesse caso, adicionei mais 1 ao valor do contador.

Código completo:

import React, { Component } from 'react'

export default class A extends Component {
    state = {
         contador: 1
    }

    
    render(){
        const handleClick = () => {
            this.setState({...this.state, contador: this.state.contador + 1})
        }
        return(
            <div>
                <p>{this.state.contador}</p>
                <button onClick={handleClick}>+1</button>
            </div>
        )
    }
}

Ciclos de Vida

Os ciclos de vida representam os momentos do componente durante sua utilização. Basicamente, existem três momentos diferentes:

  1. Montagem
  2. Atualização
  3. Desmontagem

A partir disso, controlamos quando ações podem ocorrer. Ou seja, se quisermos que determinados dados sejam carregados antes da criação da estrutura do componente, podemos usar uma função chamada componentDidMount, e por aí vai.

Já publicamos um artigo com uma explicação completa sobre Ciclos de Vida, lá tem mais detalhes sobre cada etapa, então para acessá-lo basta clicar aqui.

Componentes

Componentes são as estrelas de quase todo Framework ou biblioteca, pois nele temos um código que pode ser facilmente reutilizado em qualquer lugar da aplicação. Esse código possui a sua lógica interna, mas que mesmo assim pode se comunicar com outros componentes. Esses componentes podem se juntar e criar toda a parte visual do projeto, mas também podem ter alguma lógica de negócio contida no Frontend.

Existem 2 tipos de componentes no React, os baseados em Classe e os componentes Funcionais. A escolha depende do que você está mais confortável de usar e se você domina os conceitos de Hooks (no caso de componentes Funcionais).

Por exemplo, abaixo temos um componente baseado em classe:

import React, { Component } from 'react'

export default class A extends Component {  
    render(){
        return(
            <h1>Hello World</h1>
        )
    }
}

Componente funcional

import React from 'react'

const A = () => {
  return(
    <h1>Hello World</h1>
  )
}

export default App;

Hooks

Esse é o termo mais recente do React, que mudaram muita coisa que já era existente anteriormente. A partir dele os componentes funcionais adquiriram uma autonomia muito grande, pois antes não podíamos criar estados em componentes funcionais e coisas do tipo, mas agora isso é bem simples.

Além de estado você consegue fazer uma série de atividades que visam simplificar funções dentro do React, como ter um mini gerenciador de estados com o ContextAPI que é uma alternativa ao Redux, controlar o que vai ser modificado e quando transformaram Hooks nas ferramentas preferenciais de muitos desenvolvedores.

Por exemplo, para utilizar Hooks precisamos primeiro importá-los do próprio React. No caso abaixo vou utilizar o useState para criar um estado nesse componente:

import React, { useState } from 'react';

Em seguida, precisamos definir um nome para o estado e uma função que será responsável por modificar esse estado, semelhante ao setState

const [count, setCount] = useState(0);

Por fim, precisamos fazer com que essa função que vai modificar o estado seja chamada e mude o valor

<button onClick={() => setCount(count + 1)}> +1 </button>

Dessa forma temos um componente funcional com um estado que pode ser manipulado como preferirmos.

Código completo:

import React, { useState } from 'react';

const A = () => {

const [count, setCount] = useState(0);
  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}> +1 </button>
    </div>
  );
}

export default A

Aqui tem um artigo que mostra a criação de um projeto todo feito com Hooks. Nele explico um pouco mais e com mais detalhes como utilizá-los.

Conclusão

Espero que esses conceitos tenham ficado mais claros para você! A compreensão desses tornarão sua jornada bem mais fácil e tranquila.

Bons estudos!