Aula 1

React é uma biblioteca JavaScript criada pelo Facebook em 2013 para construir interfaces de usuário (UI) dinâmicas e reativas. Ele é amplamente utilizado no desenvolvimento de aplicações web e móveis devido à sua flexibilidade, alta performance e facilidade de manutenção.

O React é usado para:

• Criar Componentes Reutilizáveis: Permite encapsular partes da interface como botões ou caixas de texto.
• Gerenciar Estados: Facilita o gerenciamento de dados dinâmicos e sua sincronização com a interface.
• Renderizar Interfaces de Forma Reativa: Atualiza a interface automaticamente quando os dados mudam.
• Criar Aplicações Escaláveis: A abordagem baseada em componentes torna projetos mais fáceis de manter e expandir.

• Componentes: Peças fundamentais da interface, como botões ou formulários.
• JSX: Extensão de sintaxe que combina HTML e JavaScript.
• Virtual DOM: Representação leve do DOM que torna as atualizações mais eficientes. O React utiliza um Virtual DOM para gerenciar mudanças na interface. Em vez de atualizar o DOM real (relembre ou pesquise sobre o que é DOM no JavaScript) diretamente, ele mantém uma cópia virtual e atualiza apenas os elementos necessários, melhorando a performance.
• Hooks: Recursos como useState e useEffect para gerenciar estado e ciclo de vida. (veremos melhor nas próximas aulas)
• Servidores de Desenvolvimento: Ferramentas como Vite criam um ambiente local para desenvolvimento.
• Node.js e npm/yarn: Gerenciam pacotes e bibliotecas do projeto.
• Transpilers (Babel): Convertem código moderno em versões compatíveis com navegadores.
• Empacotadores (Webpack/Vite): Empacotam os arquivos para otimizar a entrega.

Quando você salva uma alteração no código, o servidor de desenvolvimento recarrega automaticamente a página no navegador. Ferramentas como o Vite ou o Create React App integram o Live Reload automaticamente.

Hot Module Replacement (HMR): Uma evolução do live reload, onde apenas o código alterado é recarregado no navegador, preservando o estado atual da aplicação. Isso é especialmente útil para acelerar o desenvolvimento, pois evita que a interface seja reiniciada completamente.

O Vite é uma ferramenta moderna para construção de aplicações web. Ele oferece uma experiência de desenvolvimento rápida e simples.

Passo a Passo

1. Instale o Node.js: Certifique-se de que o Node.js está instalado em sua máquina.
2. Crie o projeto:

   Nesse exemplo iremos criar um projeto React com o Vite o qual será chamado de my-react-app (nome que você pode colocar o que quiser)

   
   npm create vite@latest my-react-app --template react
   
               

   Copiar Texto
3. Escolha a opção de criar um projeto React com o Vite usando JavaScript
4. Acesse a pasta do projeto:

   
   cd my-react-app
   
               

   Copiar Texto
5. Instale as dependências:

   
   npm install
   
               

   Copiar Texto
6. Inicie o servidor de desenvolvimento:

   
   npm run dev
   
               

   Copiar Texto

Após seguir esses passos, você poderá acessar sua aplicação no navegador pelo endereço exibido no terminal (geralmente http://localhost:5173).

Ao acessar http://localhost:5173, vocé vera a seguinte tela:

A arquitetura do React é baseada no conceito de componentes reutilizáveis. Uma aplicação React geralmente segue a seguinte estrutura de pastas:

my-react-app/
├── public/           # Arquivos estáticos
├── src/              # Código fonte da aplicação
│   ├── components/   # Componentes reutilizáveis
│   ├── pages/        # Páginas da aplicação
│   ├── assets/       # Arquivos de mídia e estilos
│   ├── App.jsx       # Componente principal
│   └── index.jsx     # Ponto de entrada da aplicação
├── package.json      # Configuração do projeto
└── vite.config.js    # Configuração do Vite

- node_modules/: Contém todas as dependências instaladas via NPM ou Yarn.

- public/: Armazena arquivos estáticos, como index.html, o ponto de entrada para o navegador.

- src/: Contém o código-fonte, incluindo os componentes e a lógica do aplicativo.

Nesse código podemos perceber que temos um componente chamado Welcome o qual é uma Arrow Function, podendo também ser uma função em JavaScript ou uma classe em JavaScript (veremos melhor na próxima aula a diferença entre eles), que recebe um parâmetro name. O componente retorna um JSX que exibe uma mensagem de bem-vindo com o nome fornecido.

import React from 'react';

const Welcome = ({ name }) => (
  <div>
    <h1>Bem-vindo, {name}!</h1>
  </div>
);

export default Welcome;