Visão Geral

Este curso apresenta, de forma clara e prática, como trabalhar com navegação em aplicações React utilizando o React Router. Você aprenderá desde a configuração inicial até a criação de rotas avançadas que tornam suas interfaces mais organizadas, fluidas e modernas.

Objetivo

Após realizar este curso, você será capaz de:

• Criar rotas e navegação em aplicações React.
• Estruturar páginas e componentes de forma organizada.
• Utilizar rotas dinâmicas e parâmetros.
• Aplicar navegação programática.
• Proteger rotas e criar fluxos de autenticação simples.
• Trabalhar com layout routes, nested routes e lazy loading.

Publico Alvo

• Iniciantes em React.
• Estudantes de tecnologia.
• Desenvolvedores iniciantes em front-end.
• Pessoas que já dominam o básico de JavaScript.
• Quem deseja criar aplicações com múltiplas páginas e navegação estruturada.

Pre-Requisitos

• Lógica de programação básica.
• Conhecimento básico de JavaScript.
• Conhecimento básico de React (componentes, props e estado).

Conteúdo Programatico

Module 1 – Introduction to React Router

1. What is React Router and why use it
2. SPA vs MPA
3. Installing React Router
4. Basic structure of routes

Module 2 – Creating Basic Routes

1. Setting up BrowserRouter
2. Route and Routes components
3. Navigating with Link and NavLink
4. Creating first pages

Module 3 – Dynamic Routing

1. URL parameters
2. useParams Hook
3. Nested routes
4. Route structure best practices

Module 4 – Programmatic Navigation

1. useNavigate Hook
2. Redirecting users
3. Navigation patterns in modern apps

Module 5 – Route Protection

1. Creating private routes
2. Basic authentication flow
3. Protecting pages based on user state

Module 6 – Layout Routes and Nested Structures

1. Creating a global layout
2. Header, footer, and sections
3. Nested layouts for dashboards

Module 7 – Code Splitting and Lazy Loading

1. lazy() and Suspense
2. Loading pages dynamically
3. Improving performance with route-based splitting

Module 8 – Final Project

1. Building a complete multi-page React app
2. Implementing authenticated and public routes
3. Navigation, parameters, layout, and lazy loading