Introdução ao React

Caracteristicas do React

O React é uma biblioteca criada para usar interface de usuário interativa. 

  • Componentes:

    • O React utiliza uma abordagem baseada em componentes. Cada parte da interface (botão, formulário, menu, etc.) é construída como um componente reutilizável.
    • Os componentes podem ter estado (state) e propriedades (props), permitindo criar interfaces dinâmicas e interativas.
    • Varios componentes quando combinados viram grandes estruturas. Usa-se a linguagem JSX para escrever esses componentes.

  • Virtual DOM:

    • O React utiliza um DOM virtual para melhorar a performance. Em vez de modificar diretamente o DOM real, ele cria uma representação virtual, detecta as alterações necessárias e faz atualizações eficientes no DOM real.

    • Imagine que React tem uma cópia da tela na memória, como uma maquete (isso é o Virtual DOM).

      Sempre que você chama setNome("Maria"):

    • React atualiza a maquete (Virtual DOM)

    • Compara a maquete antiga com a nova

    • Descobre o que realmente mudou

    • Atualiza somente aquele pedacinho na tela real (DOM do navegador)

    • 🔄 Isso parece AJAX, porque a tela muda sem recarregar — mas não tem requisição HTTP (a não ser que você chame uma API).

  • Unidirecionalidade de dados (One-Way Data Binding):

    • Os dados fluem em uma única direção, do componente pai para os filhos, facilitando o rastreamento de mudanças e o controle do estado.

  • JSX (JavaScript XML):

    • JSX é uma extensão de sintaxe que permite escrever HTML dentro do código JavaScript. Ele torna a construção de interfaces mais intuitiva e legível.

  • Reatividade:

    • Alterações no estado ou nas propriedades de um componente fazem com que ele seja renderizado novamente, atualizando a interface automaticamente.

  • Grande ecossistema e comunidade:

    • React é amplamente suportado por uma comunidade ativa, além de contar com muitas bibliotecas e ferramentas para tarefas comuns como roteamento (React Router) e gerenciamento de estado (Redux, Context API).

Next.js

Next.js é um framework para React que facilita a criação de aplicações web rápidas, escaláveis e otimizadas. Ele adiciona funcionalidades como renderização no servidor (SSR), geração de páginas estáticas (SSG) e otimização de SEO, tornando o desenvolvimento mais eficiente.

Ao executar o Next.js com o comando dev (desenvolvimento) ou start (produção - após o comando build), é iniciado o servidor node.js, onde, esse servidor é responsável por processar as requisições HTTP, renderizar páginas e fornecer um ambiente de desenvolvimento com hot reload. Se você rodasse um servidor Node.js puro, teria que configurar manualmente um servidor HTTP usando Express, Fastify ou outro framework. ele automaticamente já configura o servidor, lida com rotas, SSR, otimização e mais. Se usasse o node.js puro precisaria de um motor de templates como EJS, Pug ou Handlebars, além disso seria necessário ter que escrever regras de roteamento manualmente.

No Next.js, os arquivos dentro da pasta pages/ sejam eles .js ou .ts automaticamente viram rotas públicas, e por convençao as rotas dentro de pages/api/ são endpoints de API acessíveis via HTTP, mas não são páginas públicas acessíveis diretamente no navegador. Elas retornam respostas JSON e são usadas para criar APIs no Next.js

index.js 
function status(request, response) {
  response.status(200).json({ chave: "Tudo Ok na comunicação com o servidor" });
}

export default status;

Basta colocar esse arquivo na rota publicas de API: pages/api/v1/status/index.js e acessar o endereço da rota, exemplo: localhost:3000/api/v1/status

Assuntos Relacionados

API (Geral)
package.Json (React)

Preparando o Ambiente Windows e o Projeto

É necessário instalar o Node.js/npm.

Para instalar o Node, clique no link e baixe a versão LTS (versão recomendada). Para verificar se foi instalado corretamente, abra o terminal e escreva node -v ou node --version. O npm já instalado junto com o Node.js, confira utilizando npm -v.

Instale o VSCode e nele a extensão do Tailwind e Prettie. Depois, em settings, configure o VSCode assim:

Instalação do Vite

Nesse caso o ponto cria o projeto na pasta atual e especifica a versão depois do @, senão será instalada a versão atual. após isso selecione react e javascript, com as setas e enter.

bash 
$ # Cria o Projeto React com JS
$ npm create vite@5.5.2 .
$ # Instala todos os pacotes necessários para o projeto
$ npm install
$ # Executa o projeto
$ npm run dev

Instalando o React separadamente

O react suporta diversos tipos de renderização, 3d, Tv, IOS e Android, Html e Dom etc... A versão para web (html e Dom) é a versão react-dom.

bash 
$ # Instala a versão core
$ npm install react@18.2.0
$ # Instala a versão Web
$ npm install react-dom@18.2.0

Entendendo os Arquivos do Projeto

Quando você executa o comando npm create vite@5.2.2 projeto, o Vite cria uma estrutura básica de um projeto web. Aqui está um resumo explicando os arquivos e pastas mais importantes que são gerados:

1. package.json

  • O que é: O arquivo principal de configuração do projeto Node.js.
  • Função:
    • Lista as dependências do projeto (por exemplo, Vite e outros pacotes instalados).
    • Contém scripts úteis para gerenciar o projeto.
    • Define informações sobre o projeto, como nome e versão.

2. index.html

  • O que é: O arquivo HTML principal da aplicação.
  • Função:
    • Serve como o ponto de entrada da aplicação.
    • Possui a referência ao arquivo JavaScript ou TypeScript principal (geralmente algo como src/main.js ou src/main.ts) que inicializa a aplicação.

3. vite.config.js (ou vite.config.ts)

  • O que é: O arquivo de configuração do Vite.
  • Função:
    • Permite personalizar o comportamento do Vite.
    • Configurações comuns incluem:
      • Alias para pastas ou arquivos.
      • Configuração de plugins (como suporte a React, Vue ou outras ferramentas).
      • Configurações de servidor.

4. src/ (pasta de código-fonte)

  • O que é: Contém o código-fonte da aplicação.
  • Arquivos principais:
    • src/main.js ou src/main.ts:
      • É o ponto de entrada da aplicação.
      • Importa a biblioteca principal (React, Vue, etc.) e inicializa o aplicativo.
    • src/App.js ou src/App.tsx:
      • Um componente principal que representa o layout ou lógica inicial da aplicação.
      • Normalmente contém os primeiros elementos renderizados na tela.
    • Outros arquivos:
      • assets/ (opcional): Pasta para imagens, estilos e outros arquivos estáticos.
      • Arquivos de estilos como src/styles.css ou src/App.css.

5. .gitignore

  • O que é: Lista de arquivos ou pastas que não devem ser rastreados pelo Git.
  • Função:
    • Impede que arquivos como node_modules/ ou dist/ sejam adicionados ao repositório Git.

6. node_modules/

  • O que é: Pasta que contém todas as dependências instaladas do projeto.
  • Função:
    • Abriga os pacotes necessários para rodar e construir a aplicação.
    • Nota: Você não precisa modificar esta pasta manualmente.

7. dist/ (após o build)

  • O que é: Pasta gerada ao rodar npm run build.
  • Função:
    • Contém os arquivos otimizados e prontos para serem enviados ao servidor de produção.
    • Inclui arquivos HTML, JavaScript, CSS e outros, já minificados.

8. README.md

  • O que é: Um arquivo de documentação em formato Markdown.
  • Função:
    • Serve como um guia para o projeto.
    • Normalmente contém informações como:
      • Comandos para rodar o projeto.
      • Descrição do que o projeto faz.
      • Créditos e licenças.

8. Opção para Escolha de um bom projeto (DRF + REACT)

Tecnologia Papel Por que escolher?
React Biblioteca para criar interfaces Componentes reutilizáveis, performance, comunidade grande
Next.js Framework para gerenciar o projeto Performance (SSR), escalabilidade, facilidade de roteamento
Tailwind CSS + DaisyUI Estilização e componentes prontos Leve, personalizável, fácil para quem sabe CSS
Axios Comunicação com a API Simples e eficiente para integrar com DRF