Curso Completo de React.Js + Next.Js (Intermediário e Avançado)

Aprenda ReactJS, NextJS, Styled-Components, Testes com Jest, Storybook, Strapi, HTML e CSS com TypeScript e JavaScript.

Este curso abrange tudo o que você precisa saber sobre ReactJS e NextJS, desde o básico até tópicos avançados. Você aprenderá como usar ReactJS, NextJS, Styled-Components, Testes com Jest, Storybook, Strapi, HTML e CSS com TypeScript e JavaScript.

É recomendado ter conhecimento intermediário em JavaScript, HTML e CSS para aproveitar ao máximo este curso. No entanto, há seções bônus disponíveis para recapitular o conhecimento em HTML, CSS, JavaScript e TypeScript. Sem esse conhecimento, pode ser frustrante acompanhar as lições.

Seção 1: Introdução

Esta seção fornece uma introdução ao curso, incluindo informações importantes e apresentações.

Seção 2: React (O Básico)

Esta seção é uma introdução ao React. É adequada para aqueles que têm conhecimento intermediário em HTML, CSS e JavaScript, mas nunca usaram o React antes. Você explorará componentes de classe e alguns métodos do ciclo de vida, que são importantes para entender como os Hooks do React funcionam. Você também consumirá uma API falsa e implantará sua aplicação para que ela fique online.

Seção 3: Mock Service Worker e Testes Avançados para o Componente

Nesta seção, você testará o componente mais complexo criado na seção anterior, o componente . Este componente usa vários outros componentes, a API fetch para recuperar dados, tem efeitos colaterais (useEffect) e várias ações que podem ocorrer na página. Para testar as solicitações que buscam dados externos para preencher o componente, você usará o Mock Service Worker, Jest e Testing Library. Esta seção é pequena, mas repleta de conhecimento avançado e divertido.

Seção 4: Hooks do React (Teoria e Hooks Avançados)

Esta seção apresenta os hooks mais importantes do React. Você usará componentes funcionais e entenderá como os hooks useState, useEffect, useCallback, useMemo, useRef, useContext e Context API funcionam. Nesta seção, você também será apresentado à Context API e aos hooks useContext e useReducer, que podem ser usados para criar estados globais na aplicação, semelhantes ao Redux.

Seção 5: Roteamento com React Router Dom

Nesta seção, você aprenderá como usar o React Router Dom para adicionar roteamento à sua aplicação. O React Router Dom é amplamente usado para adicionar rotas ao seu front-end React. Você entenderá como funciona e como usar links de forma eficaz no React.

Seção 6: Projeto 1: Páginas de Destino com Strapi e MongoDB (Back-end)

Esta seção é dedicada ao back-end. Você criará uma API REST usando o Strapi, um CMS Headless bem estabelecido no mercado. O Strapi permite criar APIs de forma rápida, simples e eficiente. Você implantará a aplicação no Heroku gratuitamente, tornando sua API acessível de qualquer lugar do mundo. Esta API será usada em seções futuras, onde você usará React e NextJS para consumir seus dados.

Seção 7: Projeto 1: Páginas de Destino com React (Front-end)

Nesta seção, você criará seu primeiro projeto com React. Ele depende da seção anterior, pois você usará o React para consumir a API criada com o Strapi. Aqui, você começará a usar todos os recursos possíveis do React. Você também começará a usar o Storybook e realizará testes em sua aplicação usando Jest e Testing Library. Os testes podem ser feitos sem a necessidade de uma tela, pois você usará o jsdom para renderizar seu componente via código. Você implantará esta aplicação para que seu site seja acessível de qualquer lugar do mundo.

Seção 8: Projeto 1: Páginas de Destino - Implantação

Aqui é onde você publicará sua aplicação para o mundo. Você implantará tanto o back-end quanto o front-end.

Seção 9: Next.Js com SSR, SSG e ISR (ou ISG)

Nesta seção, você usará componentes React e gerará arquivos estáticos de HTML, CSS, JS e imagens usando o framework do momento - Next.js. O NextJS permite criar coisas incríveis com base no ReactJS. O conhecimento adquirido com o React não é perdido, pois todos os recursos do React também funcionam no Next.js. Você aprenderá sobre renderização do lado do servidor (SSR), geração de site estático (SSG) e regeneração estática incremental (ISR). Você usará tudo o que o Next oferece, como roteamento e funções de busca de dados.

Seção 10: Migrando o Next.js para TypeScript

Nesta seção, você começará a usar o TypeScript. O TypeScript não é uma linguagem de programação, mas um superset do JavaScript (que será explicado no curso). Você migrará todo o código escrito anteriormente de JavaScript para TypeScript.

Seção 11: Usando create-next-app com --example

Nesta seção, você criará um exemplo com todas as configurações feitas nas seções anteriores para usar o create-next-app com a flag --example. Isso permitirá que você inicie projetos com as configurações corretas de forma rápida e eficiente.

Seção 12: Projeto 2: Blog - Back-End com Strapi

Este é o segundo grande projeto do curso. Você criará um blog com Strapi + Next.js, permitindo que você publique seu conteúdo online e se torne mais relevante no mundo do desenvolvimento. Esta seção se concentra apenas no back-end do blog e, nas seções seguintes, você criará o front-end com Next.js e outras tecnologias.

Seção 13: Consultas GraphQL com Strapi

Nesta seção, você começará a usar o GraphQL com os dados da seção anterior. Você aprenderá como instalar e usar o GraphQL para fazer consultas na API do blog.

Seção 14: Projeto 2: Blog - Front-End com Next.js (e React)

Aqui, você criará o front-end para o back-end criado na seção 11. Você usará todo o conhecimento adquirido até agora para criar componentes com React, Storybook, Jest e Testing Library, além de templates para as páginas com Next.js. No final, você terá um blog de alto desempenho, pois usará a geração de site estático do Next.js (SSG).