Este repositório documenta minha jornada de aprendizado em React e Next.js, explorando os conceitos básicos até a construção de aplicações web modernas.
O repositório é dividido em exemplos progressivos, explorando diferentes aspectos do desenvolvimento front-end com React e Next.js:
1. Imperativo (1-imperative.html):
- Ilustra a abordagem tradicional de manipulação do DOM, demonstrando a complexidade e verbosidade. O código manipula diretamente elementos HTML, o que pode ser trabalhoso e difícil de manter em aplicações maiores.
2. Declarativo com React (2-declarative.html):
- Introduz o React e a renderização declarativa, simplificando a atualização da interface do usuário. Com o React, você define o que a interface deve ser, e o framework cuida de atualizar o DOM de forma eficiente.
3. Componentes e Props (3-props.html):
- Apresenta a criação de componentes React reutilizáveis e a passagem de dados através de props. Componentes são blocos de código independentes que encapsulam lógica e interface, tornando o código modular e reutilizável. As props permitem passar dados entre componentes.
4. Estado e Interatividade (4-state.html):
- Explora o conceito de estado em componentes React e como gerenciar a interatividade do usuário. O estado representa dados que podem mudar dentro de um componente, permitindo que a interface responda a ações do usuário.
5. Introdução ao Next.js (5-next/):
- Estrutura do Projeto:
- O projeto segue a estrutura padrão do Next.js, com pastas como
app,publicestyles, organizando componentes, páginas, recursos estáticos e estilos de forma intuitiva.
- O projeto segue a estrutura padrão do Next.js, com pastas como
- Roteamento Baseado em Arquivos:
- O Next.js utiliza o sistema de arquivos para definir as rotas da aplicação. Cada arquivo dentro da pasta
app/representa uma rota, simplificando a navegação. Por exemplo, o arquivoapp/page.jsdefine a página principal da aplicação.
- O Next.js utiliza o sistema de arquivos para definir as rotas da aplicação. Cada arquivo dentro da pasta
- Componentes Client-Side (
5-next/app/like-button.js):- Next.js permite renderizar componentes no lado do cliente, melhorando o desempenho e a interatividade. O componente
LikeButtonilustra este conceito. Ele usa o hookuseStatepara gerenciar o estado local do botão (número de curtidas), e a atualização da interface ocorre somente no lado do cliente.
- Next.js permite renderizar componentes no lado do cliente, melhorando o desempenho e a interatividade. O componente
- Fast Refresh:
- Experimente a recarga rápida do Next.js, que atualiza a interface do usuário em tempo real durante o desenvolvimento, acelerando o processo de criação e depuração. O Next.js detecta alterações no código e atualiza somente a parte da interface que foi modificada.
Pré-requisitos:
- Node.js: https://nodejs.org/
- npm ou yarn: (geralmente incluídos no Node.js)
- Git: https://git-scm.com/ (opcional para clonar o repositório)
- Navegador: Chrome, Firefox, Edge, etc.
Para os exemplos HTML (1-imperative.html a 4-state.html):
-
Clonar o Repositório:
git clone https://github.com/victor-ferreira-dev/learning-react-next.git
-
Navegue até o diretório:
cd learning-react-next -
Abra os arquivos HTML no seu navegador:
- Explore os exemplos progressivamente, acompanhando a evolução dos conceitos.
Para o exemplo Next.js (5-next/):
-
Navegue até a pasta do projeto:
cd 5-next -
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm run dev
-
Acesse a aplicação em:
http://localhost:3000
Pasta 5-next/:
package-lock.json: Define as dependências do projeto e suas versões específicas.package.json: Define scripts e dependências do projeto.app/:layout.js: Define o layout base para todas as páginas, fornecendo uma estrutura consistente. Neste exemplo, ele apenas renderiza o conteúdo da página dentro de um elemento<html>e<body>.page.js: Define o componente da página principal, ilustrando a renderização de componentes e a passagem de props.like-button.js: Demonstra um componente client-side que gerencia o estado local e interage com o usuário.
- Explore a documentação oficial do Next.js: https://nextjs.org/
- Experimente criar novas rotas adicionando arquivos na pasta
app/. - Crie componentes React mais complexos e aprenda sobre recursos avançados do Next.js, como:
- Fetch de dados com
fetch,useSWRoureact-query - Renderização Server-Side (SSR) e Client-Side (CSR)
- Pré-renderização (SSG)
- API Routes
- Gerenciamento de estado com Context API e Redux
- Estilização com CSS Modules e Styled Components
- Testes automatizados com Jest e React Testing Library
- Implantação em plataformas como Vercel e Netlify
- Fetch de dados com
Sinta-se à vontade para contribuir com este repositório, seja adicionando novos exemplos, aprimorando a documentação ou corrigindo erros.
- Faça um fork do repositório.
- Crie uma branch para sua feature:
git checkout -b minha-feature - Faça commit das suas alterações:
git commit -am 'Adiciona nova feature' - Faça push para a branch:
git push origin minha-feature - Abra um Pull Request.
Este projeto está licenciado sob a licença MIT - consulte o arquivo LICENSE.md para obter detalhes.