NLW#05

• Repositório da trilha de ReactJS da NLW#05 pela RocketSeat

Resultado Final

Tecnologias

• Este projeto foi desenvolvido utilizando as tecnologias Front-End: ReactJS, TypeScript e Next.js

Primeiro Dia - React e Next.js (Conteúdo Técnico)

• Apresentação do projeto
• Ambiente de desenvolvimento
• Fluxo de uma API
• Iniciando com React
• Conceitos do React (Componente, Estado e Propriedade)
• SEO com React
• Iniciando com Next.js (Server Side Rendering e Static Site Generation)
• Criando projeto com Next.js

Segundo Dia - Consumo de API (Conteúdo Técnico)

• Porque TypeScript?
• Criando estilos globais
• Componente: Header
• Componente: Player
• Configurando API em JSON
• Consumindo API na home
• SPA vs SSR vs SSG
• Gerando home de forma estática
• Criando a build do projeto
• Executando a build

Terceiro Dia - Páginas do App (Conteúdo Técnico)

• Página: Home
• Roteamento no Next.js
• Página: Episódio
• Páginas estáticas e dinâmicas

Quarto Dia - Contexto e Áudio (Conteúdo Técnico)

• Entendendo a Context API
• Criando contexto do Player
• Dando play nos episódios
• Exibindo informações no player
• Adicionando
• Usando Refs no React
• Ouvindo evento de play e pause

Quinto Dia - Controlando Player (Conteúdo Técnico)

• Controles de próximo e anterior
• Controle de loop
• Controle de shuffle
• Controle do tempo atual
• Controle pelo slider