React

O que é React.js? Aprenda os fundamentos da biblioteca JavaScript

3 de setembro de 2021

O que é React.js? Aprenda os fundamentos da biblioteca JavaScript

Neste artigo você vai aprender o que é React.js e também conhecer os principais recursos e funcionalidades da biblioteca

O que é React.js capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x