Primeiros passos com React.js

Ok, então você é algum tipo de desenvolvedor e já ouviu falar de React.js e ficou curioso! Ou, você está pensando em iniciar ou iniciando a carreira como desenvolvedor frontend e deseja ampliar os seus conhecimentos De qualquer maneira, você está aqui porque quer aprender como começar a usar o nosso queridinho, React.js.

O que você precisa para começar:

• Conhecimento de JavaScript
• Entendimento básico das features do ES6, como *arrow functions*
• Vontade de aprender :)

Mas afinal…

O que é React?

O React é uma biblioteca JavaScript para desenvolvimento front-end. Foi criada pelo time de desenvolvimento do Facebook e lançada em 2013.

Desde lá tem chamado a atenção de muitos desenvolvedores por conta da sua proposta.

Seu principal característica é a capacidade de desenvolver interfaces ricas e complexas, baseada em componentes. Cada componente tem controle sobre si, controlando seu estado, estilo e regras de negócios.

E o que ganhamos com tudo isso? Dessa forma temos maior controle sobre cada parte da interface que foi construída, podemos testar cada parte isoladamente, ter as responsabilidades separadas e no final ter uma aplicação de fácil manutenção.

Legal! Mas o que eu devo aprender para começar?

• Componentes e Propriedades
• Estilização
• Estados *(usaState)*

A seguir iremos ver cada um dos tópicos.

Mas antes, vamos iniciar um projeto do zero para tornar o nosso aprendizado mais visual.

Por que o React é chamado de "React"?

Quando o estado de um componente React (que faz parte de sua entrada) muda, a UI que ele representa (sua saída) também muda. Essa mudança na descrição da interface do usuário deve ser refletida no dispositivo que estamos trabalhando. Em um navegador, precisamos atualizar a árvore DOM. Em um aplicativo React, não fazemos isso manualmente. O React simplesmente react  ("reage”) às mudanças de estado e automaticamente (e eficientemente) atualizará o DOM quando necessário.

Iniciando um projeto

Para iniciar um projeto React temos 3 maneiras.

A primeira, e não muito utilizada, é adicionar o React há um projeto que já existe de forma manual. Dependendo do contexto e situação isso pode ser necessário, mas hoje, não vai ser o nosso foco. Se quiser entender melhor, na documentação oficial temos mais detalhado.

A segunda, e mais popular, é criar o projeto utilizando o famoso Create React App. O CRA cria um projeto com as ferramentas de compilação JS já configuradas e com livereload. Também não iremos focar nessa alternativa, mas ter o conhecimento sobre é importante, sendo assim, recomendo.

A terceira, e mais recomendada e moderna, é criar o projeto utilizando o Vite. Ele funciona da mesma maneira que o que CRA, mas utilizando ferramentas mais modernas e rápidas para a compilação do JS.

Para começar, devemos executar no terminal

yarn create vite

Após isso, você precisa responder algumas perguntas:

Pronto! Projeto criado. Entre na pasta e execute o comando yarn para instalar todas as dependências.

Agora, abra o projeto no seu editor de código preferido (VSCode). Você deve ter essa estrutura:

Para rodar a aplicação digite no terminal:

yarn dev

Acesse localhost:3000 e você verá:

Pronto, primeiro passo dado! Agora vamos entender um pouco mais sobre os tópicos que eu falei anteriormente.

Componentes e Propriedades

Veja a imagem a seguir:

Essa imagem é um contêiner que mostra quantas pessoas visualizaram um determinado perfil, agora, vamos criar esse componente no React. Sempre que começamos um projeto React já configurado (CRA, Vite…) é legal fazermos um reset de algumas configurações que não precisamos utilizar. Podemos, a princípio, remover os arquivos css, favicon e svg da posta src, ficando somente o arquivo main.jsx e App.jsx.

Agora, dentro do arquivo main.jsx podemos remover a importação do css que já não existe mais, e dentro do App.jsx removemos também as importações inexistentes e atualizamos o conteúdo para o seguinte:

E o resultado:

Agora, vamos criar o componente em si. Dentro da pasta src crie um arquivo chamado Card.jsx com o seguinte código:

E agora, para conseguir visualizar o resultado, dentro de App.jsx adicionamos o componente Card.jsx

Nossa aplicação no momento tem este visual:

Vamos entender o que aconteceu: criamos um componente React, e sua principal característica é o poder de usabilidade! Podemos importar o mesmo componente em diversos cantos da aplicação.

Um componente nada mais é, uma função javascript que retorna um HTML.

A junção de JS + HTML damos o nome de JSX, que será muito utilizado. Em arquivos JSX podemos utilizar expressões, condicionais, loops, variáveis, propriedades e até mesmo outros componentes.

Já aprendemos bastante até aqui! Mas, agora, vamos deixar esse componente dinâmico, e para isso vamos utilizar propriedades, ou props, como é mais conhecida.

Uma propriedade é adicionada a um componente da mesma forma que um atributo HTML em alguma Tag, como por exemplo, o src na tag <img>.

Vamos tentar! No nosso componente <Card /> que está importado no App.jsx vamos adicionar as propriedades title e total.

O código vai ficar da seguinte maneira:

Agora para o componente conseguir ler essas informações, vamos acessar as propriedades no parâmetro props da função.

As props são um objeto, então para acessar os valores da propriedade devemos incluir o nome props como um parâmetro da função do componente e acessar o valor desse objeto da seguinte maneira:

{props.[nome_da_propriedade]}

Vamos alterar o componente Card com as propriedades:

E nossa aplicação continua da mesma maneira:

Utilizando propriedades o nosso componente fica ainda mais flexível, podendo ter diferentes valores em diferentes locais.

Estilização

Até aqui criamos nossa primeira página e nosso primeiro componente dinâmico. Mas, não está parecendo com aquela primeira imagem do card que vimos.

Para aplicar estilos no React temos diversas maneiras: uma bem parecida com o modo que utilizamos no HTML, outra chamada CSS-in-JS, há também o Styled-Components (caso se interessar, temos outro artigo falando sobre esse tema que você pode ver aqui).

Hoje vamos utilizar a maneira clássica, criando um arquivo App.css e importando no componente. O arquivo de estilos deverá ficar da seguinte forma:

No início do arquivo App.jsx devemos importar o arquivo de estilos:

import './App.css'

E por último, devemos adicionar as classes criadas no nosso arquivo Card.jxs:

Note que, ao invés de utilizarmos class assim como no HTML, utilizamos className.

Pronto! Agora o nosso card deverá ter este resultado:

A outra abordagem, CSS-in-JS, consiste em adicionar estilos diretamente no HATML via JS, passando um atributo styles, semelhante ao que temos com style no HTML:

<h1 styles={{marginBottom: 16px}}>{props.total}</h1>

Atenção ao formato das propriedades de estilo, essas devem ser escritas em camelCase.

O universo da estilização é gigante! Pesquise um pouco sobre e veja qual vai te atender melhor.

STATE vs PROPS

Props são imutáveis, ou seja, uma vez definidos as props não podem ser alteradas, enquanto State é um objeto observável que deve ser usado para armazenar dados que podem mudar ao longo do tempo e para controlar o comportamento após cada alteração.

Hooks e Estados (useState)

Segundo a documentação oficial do React:

“Hooks são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe.”

Os hooks surgiram por conta de três problemas:

• Dificuldade de reutilizar código entre os componentes.
• Componentes complexos que se tornam difíceis de serem compreendidos
• Classes confundem!

Algumas características/benefícios do hooks:

• Utilizar estado em funções que são componentes
• Executar funções quando o componente é montado e quando ele vai desmontar
• Adicionar a context api mais facilmente para refletir as mudanças em um componente funcional.

Esse foi um resumo sobre React Hooks. Vale super a pena estudar mais sobre e entender como cada hook pode te ajudar no dia a dia.  Hoje vamos focar no hook useState.

O useState é o hook mais comum e utilizado para controlar alguma variável de estado dentro de um componente funcional no React. Para utilizar, definimos da seguinte maneira:

const [state, setState] = useState(0);

O valor state representa o valor do estado que será manipulado pela função setState. O valor 0 é o valor inicial do estado, e ele pode ser número, string, array ou objeto.

Agora você pode renderizar livremente o estado ou chamar o setState para atualizar o valor do seu estado.

Essa foi uma breve explicação sobre o hook mais conhecido que temos e que é usado para diversas features. Na documentação oficial do React você pode entender mais e também, conhecer outros hooks.

Conclusão

Chegamos no final! Até aqui espero que você tenha criado o seu primeiro projeto com React, compreendido o que é um componente e como estilizá-lo e também, tenha entendido o conceito de hooks e estados.

Aprendendo bem esses conceitos, e praticar, e testar, você vai conseguir facilmente dar o próximo passo e aumentar ainda mais a sua experiência com React.

Espero ter te ajudado com este conteúdo e que ele tenha feito você ter vontade de aprender ainda mais!