Neste artigo você vai aprender o que é React.js e também conhecer os principais recursos e funcionalidades da biblioteca
Fala programador(a), beleza? Bora conhecer melhor a biblioteca JavaScript mais utilizada da atualidade: React.js!
Primeiramente acredito que é importante falar sobre a definição de React
Segundo a própria documentação oficial React é uma biblioteca, e não um framework como muitos chamam
Porém na minha opinião não há nada de errado em chamar de framework, uma vez que há bastante código pronto e eles agilizam a resolução de um problema
React é considerado uma lib pois o código pronto é pouco em relação aos demais frameworks, e acabamos utilizando muito JavaScript Vanilla junto do React para resolver problemas e não instruções do próprio React
Curso completo de React gratuito
Gostaria de lembrar a você que tenho um curso gratuito de React com projeto e tudo no YouTube, você pode acessá-lo por aqui:
Porém recomendo fortemente a leitura deste artigo até o final, você sairá mais preparado para trabalhar com React
O propósito do React
O propósito do React é criar interfaces do usuário, ou seja, ele trabalha no front-end
Se comunicando com o back-end para poder trazer os dados do banco de dados e representá-los nas views
Sendo assim estamos escrevendo códigos de HTML, CSS e JavaScript em React
Para uma melhor experiência do usuário, criando aplicações conhecidas como SPAs (Single Page Applications)
Onde elas trabalham de uma forma diferentes das antigas páginas web, as aplicações de React não tem page reload
Ou seja, os elementos da tela são reorganizados conforme a solicitação de páginas do usuário
Podemos dizer que todo o front-end é carregado quando um usuário acessa o site, deixando disponível instantaneamente para ele o projeto
Dependendo apenas da velocidade de disponibilização de informações pelo banco de dados, mesmo assim é possível mostrar uma prévia da página com os dados sendo carregados, exibindo um loader, por exemplo
Arquitetura das aplicações de React
Em React.js criamos aplicações que são baseadas em componentes, que podem ser grandes ou pequenos dependendo da nossa necessidade
Então podemos componentizar uma página toda como também um simples input pode se tornar um componente
A vantagem disso é que podemos deixá-los dinâmicos, de forma que em cada vez que o componente é chamado ele funcione de uma forma completamente diferente
Um input, por exemplo, podemos mudar seu título, placeholder e outros atributos conforme vamos solicitando ele
E no fim das contas gerenciamos apenas um elemento, podendo padronizar HTML, CSS, animações, sendo assim mais fácil a manutenção e evolução dos projetos
Essa é a grande sacada dos componentes!
Se você perceber, a grande maioria dos sites que acessa tem elementos muito parecidos e que se repetem no site todo, é exatamente isso que podemos alcançar com os componentes de React.js!
Um componente de React
O seguinte código representa um componente em React:
function HellWorld(props) {
return <h1>Olá, {props.nome}</h1>;
}O HTML que escrevemos para o usuário ver na página é mesclado com JavaScript, e tem um nome e sintaxe especial, ele é o JSX
Em todos os nossos componentes estaremos utilizando o JSX, porém como é JavaScript temos que tomar alguns cuidados
Não podemos utilizar nomes reservados de JavaScript, como:
- class que vira className;
- for que vira htmlFor;
E outros detalhes deste tipo, porém as vantagens são enormes comparadas a estas desvantagens
Podemos executar código de JavaScript, como: condicionais, intepolar valores dinâmicos, loops e outros recursos
Outra vantagem do JSX é que ele previne códigos maliciosos, antes de renderizar qualquer coisa há uma remoção de valores que podem ser prejudiciais
O componente também possui o acesso a propriedades, que são chamadas de props
O que são as props?
São valores que podem ser passados do componente pai para o componente filho, somente como leitura
Ou seja, utilizamos os valores entre o JSX, mas não podemos modificá-los
No exemplo acima acessamos a prop nome, que vem como um dado inserido pelo componente pai
E vai representar um valor de texto no componente filho, que é o HelloWorld
Como funciona a atualização de elementos do React?
Constantemente vamos precisar atualizar nossos elementos na tela, certo?
O React possui um observador chamado React DOM para este fim, que fica monitorando as alterações no projeto
Somente os nós do DOM que tiveram dados modificados são atualizados, isso nos dá muita performance
Antigamente outros frameworks JavaScript atualizavam toda a árvore do DOM, sendo custosa a renderização
Importando um componente
Já vimos como criar componentes de React.js, mas como vamos implementá-los em outros componentes
Por que React é basicamente isso, componentes que chamam outros componentes
Até as páginas serão componentes, só que maiores e que abrigam uma maior quantidade de componentes menores!
Basicamente precisamos importar o arquivo e utilizá-lo no JSX do componente pai, exemplo:
import HelloWorld from './components/HelloWorld'
function App() {
return (
<HelloWorld nome="Matheus" />
)
}Note que estamos utilizando HelloWorld no componente App, e já também estamos passando a propriedade nome
Que será utilizada no componente HelloWorld, para exibir dados dinâmicos
Podemos omitir a extensão do arquivo que importamos, que de um componente é geralmente .js
E a filosofia do React é exatamente essa, sempre que o JSX estiver ficando grande
Vamos extrair em componentes menores o nosso layout, separando as responsabilidades, deixando nosso projeto mais componentizado
Isso é algo que vamos aprendendo ao longo do uso de React.js, com a experiência que ganhamos ao longo dos projetos
Adicionando eventos ao React
Como qualquer interface de front-ent, teremos diversos eventos ocorrendo
Como cliques em botões e envios de formulários
Uma hora ou outra vamos precisar manipular os eventos da nossa aplicação, e o React nos da um suporte enorme para isso
Os eventos são constituídos de duas partes:
- A chamada do evento que fica no elemento que irá dispará-lo;
- A função que deve ser executada após o disparo do evento;
Veja um exemplo:
function MeuComponente() {
function olaMundo() {
console.log('Opa, tudo bom?');
}
return (
<div >
<button onClick={olaMundo}>Enviar</button>
</div>
);
}Neste componente estamos atrelando um clique em um botão ao disparo da função olaMundo
Então sempre que um usuário clicar no botão, teremos a execução daquela função
E este é o ciclo de eventos em React.js!
Temos diversos gatilhos de eventos, como o onClick, sugiro uma verificação deles na documentação oficial
Renderização por condição
Outra funcionalidade do React.js é a renderização condicional, que basicamente exibe um conteúdo se uma condição é verdadeira
Exatamente como a estrutura condicional if / else se comporta
Com ajuda do JSX podemos fazer a condicional de forma inline, simplificando o código
Basicamente precisamos envolver o código a ser verificado entre chaves e condicionar a exibição de algo a && (dois & comerciais, que significa AND)
Veja um exemplo prático:
function MeuComponente() {
function olaMundo() {
console.log('Opa, tudo bom?');
}
const idade = 18
return (
<div >
{idade >= 18 &&
<p>É maior de idade</p>
}
<button onClick={olaMundo}>Enviar</button>
</div>
);
}Criamos uma variável na função do nosso componente, isso é perfeitamente aceitável
No JSX verificamos se é maior de idade, comparando a idade com 18 anos
Se for, um parágrafo será impresso na view para o usuário
Esta é uma forma de renderização condicional em React.js
Renderização de listas
Outros tipos de dados comuns em aplicações são as listas, conhecidas também como arrays
Geralmente precisamos exibir vários registros em sequência, dentro do JSX
Para isso utilizaremos a função map de JavaScript, em conjunto do React
Veja um exemplo prático:
function MeuComponente() {
const minhaLista = [1, 2, 3, 4]
return (
<ul >
{minhaLista.map((item) => (
<li>{item}</li>
))}
</ul>
);
}Desta forma teremos os itens sendo exibidos, em li’s de uma ul
Montando uma lista no HTML, que é o que usuário verá quando acessar a aplicação
As listas costumam também ser mais complexas, como array de objetos
Porém o fluxo será o mesmo que este!
Outras curiosidades sobre React.js
React é uma biblioteca de código aberto, podemos ver todo o código desenvolvido de sua versão atual e das posteriores no GitHub do projeto
Além disso, é mantido pelo grupo de empresas do Facebook
Há também um outro projeto que é desenvolvido em paralelo, chamado React Native, que é uma forma de escrever código para React mas que é transformado em aplicativos para celulares
O React Native pode gerar tanto aplicativos para Android como para iOs
Os hooks do React
Outros recurso do React bem interessante é chamado de hook
Basicamente temos acesso a funcionalidades muito interessantes, como alteração de state com o useState
Porém é um assunto um pouco mais avançado, e foge do escopo deste tópico
Minha intenção em citá-lo é que você deve ficar de olho, e se pretende aprender React, deve aprender os hooks também, são componentes fundamentais de aplicações em React.js
Conclusão
Neste artigo você aprendeu o que é React.js, e também todos os seus recursos fundamentais
A ideia principal é dar ao leitor um conhecimento dos alicerces do React, como também uma leve experiência prática das particularidades da biblioteca
Foi compartilhado também algumas curiosidades sobre React, como o time que o mantém e também a sua variação para aplicativos, o React Native
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!