Tutorial de ReactJS para Iniciantes

O React, resumidamente, é uma biblioteca para construção de interfaces, muito utilizado em Single Page Applications (SPA), uma arquitetura de front-end que permite que, quando você altere de uma página para outra na sua aplicação web, não seja necessário um carregamento completo da mesma, mas sim apenas o conteúdo que é diferente. Isso além de proporcionar uma experiência mais suave ao usuário, dá uma performance muito superior.

E o melhor: tudo isso inteiramente usando JavaScript!

Sim, o HTML, CSS, comportamentos…toda a interface é codificada usando JavaScript.

Eu tive a oportunidade de trabalhar no Banco Topázio, onde tanto o Internet Banking quanto o Mobile Banking eram feitos usando ReactJS e React Native, respectivamente, e achei muito legal essa experiência. Também acompanhei, mas este mais de longe, outro projeto envolvendo React no Agibank quando estiver por lá, o que me despertou interesse pela tecnologia.

Se preferir, você pode acompanhar este mesmo tutorial pelo vídeo abaixo.

Vamos lá!

Vantagens

A primeira vantagem é a organização do código. O React segue muito forte o conceito de componentização, ou seja, a gente separa o código da aplicação em pequenos componentes, semelhante ao que fazemos no backend com micro serviços. Por exemplo se eu tenho um botão que é utilizado muito na aplicação, eu posso criar um componente com este botão e utilizá-lo em todos os lugares que ele aparece. Futuramente, se eu precisar corrigir um bug neste botão, eu corrijo no componente e todos os lugares terão essa correção.

Outra vantagem é divisão de responsabilidades. Quando usamos React, o front-end fica somente com a responsabilidade de renderizar a interface corretamente, enquanto todas as regras de negócio ficam no back-end, que será consumido pelo React.

E por fim, a última vantagem que eu gostaria de citar é a possibilidade aceitar múltiplos clientes. Isso porquê o React é uma biblioteca-base, usada pelo ReactJS para projetos web e com o React Native para projetos mobile. Uma vez que você faça um back-end para suportar uma aplicação ReactJS ou React Native, facilmente você pode construir o segundo front-end React e usar o mesmo backend. Além disso, é bem comum o compartilhamento de componentes e bibliotecas JS entre projetos web e mobile quando usando a omnistack do React.

Criando o projeto

Agora que entendemos um pouco de como funciona o React, que tal criarmos nosso primeiro projeto?

Você vai precisar ter o Node.js e o Visual Studio Code instalado na sua máquina. Se ainda não tiver ambos, o vídeo abaixo ajuda nesse setup.

Para criar o projeto, usaremos um toolkit chamado Vite que vai facilitar a estruturação inicial do projeto. Como o React é apenas uma biblioteca, é comum o uso de frameworks e toolkits para evitar o trabalho maçante de estruturar todo um projeto do zero, sendo que outra excelente opção seria o Next.js, mas o Vite é mais simples para começar. Assim, abra o seu terminal e execute o comando abaixo, que baixa e executa o utilitário do Vite:


npm create vite@latest

npm create vite@latest

Passo a passo ele vai lhe perguntar como você quer o seu projeto, o nome eu coloquei “react-intro” e as opções seguintes que recomendo para este tutorial são um projeto React com JavaScript (use TypeScript apenas se já conhece a linguagem).

Agora entre na pasta do projeto e instale as dependências com os comandos abaixo, sendo que o último comando sobe o projeto em um servidor local para testes.


cd react-intro
npm install
npm run dev

cd react-intro

npm install

npm run dev

O terminal vai te indicar o endereço e porta da sua aplicação, sendo que a minha está funcionando em localhost:5173, com a aparência abaixo. A sua deve estar assim também.

Legal, não?

Entendendo o projeto

Agora abra a pasta do seu projeto no Visual Studio Code ou similar, para que a gente dê uma olhada em tudo que foi criado automaticamente pra gente.

Alguns itens da estrutura você vai reconhecer de cara, como node_modules, package.json, etc. Alguns, no entanto, são novos e essenciais entendermos o seu funcionamento. Se dermos uma olhada na página que subiu ali e que coloquei o screenshot, ela sugere que a gente vá em uma pasta src (source – fontes) e altere o arquivo App.jsx.

Se abrirmos o referido arquivo, devemos encontrar algo parecido com isso:


import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

const [count, setCount] = useState(0)

return (

<div>

</a>

</a>

</div>

<h1>Vite + React</h1>

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

count is {count}

</button>

<p>

Edit <code>src/App.jsx</code> and save to test HMR

</p>

</div>

Click on the Vite and React logos to learn more

</p>

</>

)

}

export default App

Esse arquivo representa justamente aquela página que está aparecendo no navegador e ela se chama App. Dentro dele, nós temos uma função homônima que nada mais faz do que retorna o XHTML a ser renderizado pelo navegador, com alguns tratamentos especiais que veremos mais tarde.

Atenção: você notou que importei uma duas imagens (logo) e um arquivo CSS usando JavaScript ao invés de referenciá-los pelo caminho no HTML? Isso é necessário e ao mesmo tempo muito prático. Assim, no caso da imagem, você importa a mesma para uma variável e depois usa a variável entre chaves no src da tag IMG.

Por ora, vamos fazer uma pequena alteração, mudando o miolo da página para apresentar o clássico Hello World, como abaixo.


import logo from './assets/react.svg'
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
       <h1>Hello World!</h1>
      </header>
    </div>
  );
}

export default App;

import logo from './assets/react.svg'

import './App.css';

function App() {

return (

<h1>Hello World!</h1>

</header>

</div>

);

}

export default App;

Basta salvar o arquivo e automaticamente você verá que a página no navegador já vai mudar de aparência, como abaixo.

Outros arquivos que você pode querer fazer alterações é no App.css, que define os estilos dessa página App.js. Por exemplo, experimente colocar o seguinte estilo dentro do App.css para ver o resultado:


h1 {
   color: Red;
}

h1 {

color: Red;

}

O que aconteceu? Nem vou colocar o print aqui que é pra te obrigar e testar, hehehe.

Outro arquivo que é importante conhecer é o index.html que fica na raiz da aplicação. Abaixo eu reproduzo o mesmo.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Vite + React</title>

</head>

<body>

</body>

</html>

Aqui, não vou entrar em detalhes de HTML em si, mas apenas salientar a importância da DIV root. A interface web da nossa aplicação React é gerada via JavaScript (na função App do Ap.js) e embutida dentro dessa div root, em tempo de execução.

Esse é um conceito importante: o JS do React roda depois que a página é carregada e, mais tarde, isso permite que você justamente tenha o comportamento de uma Single Page Application, que é o de poder carregar partes da interface conforme ações do usuário, sem ter de recarregar a página inteira. O arquivo responsável por fazer esse carregamento inicial e posterior controle é o src/main.jsx, que eu reproduzo abaixo.


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

<App />

</StrictMode>,

)

Enquanto que o primeiro import é da base do React, a segunda é justamente o que permite usarmos a lib React em aplicações web e o que diferencia do React Native, que é a versão mobile do React. Logo abaixo, além de carregarmos um arquivo de estilo (CSS), temos o carregamento dos módulos de aplicação, por enquanto apenas o App.jsx, aquele que editamos anteriormente, lembra?

Note como ele chama a função do React DOM chamada createRoot, carregando a div root e depois mandando ela renderizar (render) um código XHTML com nosso App dentro.

E por enquanto é isso que eu gostaria de explicar, acompanhe a parte 2 neste post!

TAGS:

Node.js

Olá, tudo bem?

O que você achou deste conteúdo? Conte nos comentários.

Error Handling em Node.js com Express

Como criar um encurtador de URL com Node.js e Sequelize

Como criar uma WebApi com Node.js, Express e TypeScript

Arquitetura de micro serviços em Node.js + MongoDB

Web

Tutorial de ReactJS para Iniciantes

Junte-se a mais de 34 mil devs

Entre para minha lista e receba conteúdos exclusivos e com prioridade

Vantagens

Criando o projeto

Entendendo o projeto

Olá, tudo bem?

Entre para minha lista e receba conteúdos exclusivos e com prioridade

Categorias

Últimas Novidades

Tags