Pular para conteúdo

Aula 01 – Introdução ao Frontend Moderno 🚀

Seja bem-vindo ao curso de Desenvolvimento Frontend com React. Nesta aula inaugural, vamos entender como a web evoluiu até chegarmos às aplicações modernas e dar nossos primeiros passos com o React.

🌍 A Evolução do Desenvolvimento Web

O desenvolvimento web passou por grandes transformações desde o surgimento da WWW.

Conceito: A Evolução

  1. Web Estática: Apenas HTML e CSS. Cada página era um arquivo físico no servidor.
  2. Web Dinâmica (MPA): Páginas geradas no servidor (PHP, Java, ASP.NET). O navegador recarregava a página inteira a cada interação.
  3. Aplicações Modernas (SPA): Onde entra o React. A aplicação carrega uma única vez e as atualizações ocorrem de forma fluida sem recarregar a página.

🔄 SPA vs MPA

Para entender o poder do React, precisamos comparar as Single Page Applications (SPA) com as Multi-Page Applications (MPA).

Diagrama de Fluxo

graph TD
    subgraph MPA_Tradicional ["MPA (Tradicional)"]
    A[Usuário clica] --> B[Requisição ao Servidor]
    B --> C[Servidor processa]
    C --> D[Recarrega PÁGINA INTEIRA]
    end

    subgraph SPA_Moderna ["SPA (Moderna / React)"]
    E[Usuário clica] --> F[JavaScript intercepta]
    F --> G[Requisição AJAX/Fetch]
    G --> H[Atualiza apenas PARTE da página]
    end

📦 O Ecossistema JavaScript

Antes de codar em React, precisamos do ambiente preparado. O React moderno depende de ferramentas essenciais:

  • Node.js: O motor que executa JavaScript fora do navegador.
  • NPM / Yarn: Gerenciadores de pacotes (bibliotecas).
  • Vite: A ferramenta de construção (build tool) mais rápida da atualidade.

Atenção: Pré-requisito

Certifique-se de ter o Node.js instalado (versão LTS recomendada). Você pode verificar com o comando node -v no terminal.

⚛️ Introdução ao React

O React é uma biblioteca JavaScript para construir interfaces de usuário criada pelo Facebook (Meta).

Por que usar React?

  • Componentização: Dividir a interface em pequenas peças reutilizáveis.
  • Declarativo: Você descreve o que quer ver na tela, e o React cuida do como atualizar.
  • Virtual DOM: Uma técnica de otimização que torna as atualizações de interface extremamente rápidas.

💻 Criando o Primeiro Projeto

Vamos utilizar o Vite para criar nosso ambiente React de forma instantânea.

# Criando o projeto
$ npm create vite@latest meu-projeto-react -- --template react

# Entrando na pasta
$ cd meu-projeto-react

# Instalando dependências
$ npm install

# Iniciando o servidor de desenvolvimento
$ npm run dev

Dica: VS Code

Sempre abra a pasta do projeto no VS Code e utilize o terminal integrado para rodar os comandos acima.

🚀 Prática da Aula

  1. Instale o Node.js se ainda não tiver.
  2. Crie seu primeiro projeto usando o comando do terminal acima.
  3. Abra o arquivo App.jsx e tente alterar o texto que aparece na tela.
  4. Veja a mágica do Hot Module Replacement (HMR): a página atualiza instantaneamente ao salvar!