React Avançado: Leve suas bases para o próximo nível

Storybook, Github Actions, Publicação no NPM, TypeScript, Padrões de Componentes, PWA, Formik, Formulários Dinâmicos e Mais

Bem-vindo ao meu curso de React Avançado! O objetivo principal deste curso é aprimorar suas habilidades existentes em React. Este curso não é destinado a iniciantes, pois é voltado para pessoas que já possuem conhecimento em React com Hooks.

Visão geral do curso

O curso começa com uma breve introdução ao React com TypeScript. Vídeos adicionais estão disponíveis no YouTube para referência adicional (criados por mim, totalizando mais 5 horas não incluídas aqui). Em seguida, prosseguimos para criar um pequeno projeto que nos permitirá praticar diferentes padrões de criação de componentes. Explicarei vários padrões populares e, juntos, construiremos gradualmente um conjunto robusto de componentes que implantaremos no NPM usando o TSDX. Ao longo do caminho, abordamos a separação de módulos e o carregamento tardio, e também compartilho minha abordagem personalizada preferida para trabalhar com módulos. Em seguida, mergulhamos no Formik, validações, Yup e formulários dinâmicos. Criamos componentes reutilizáveis simples que nos salvarão de escrever o mesmo código repetidamente. Em seguida, passamos para o Storybook, explicando o que é e como pode ser útil. Criamos algumas configurações e publicamos nosso Storybook em vários lugares. Eventualmente, criamos os arquivos de configuração TypeScript necessários, fazemos modificações no package.json e configuramos as versões semânticas para agilizar o processo de criação e atualização de componentes usando o GitHub Actions como intermediário. Depois disso, passamos para a elevação de um aplicativo do zero para o nível de especialista, que inclui um backend personalizado com JWTs. Transformamos nosso aplicativo React em um PWA, explicando configurações automáticas, manuais e personalizadas que nos permitem trabalhar offline. Também exploramos como instalar o aplicativo como se fosse um aplicativo Windows, Linux ou Mac.

Principais tópicos abordados no curso:

O curso está repleto de informações valiosas para aprimorar suas habilidades em React. Aqui estão alguns dos tópicos específicos que abordamos: - React com TypeScript (95% do curso) - Carregamento tardio e suspense - Rotas filhas - Modularização - Git e GitHub para gerenciamento de branches, versionamento e ações - Padrões de criação de componentes - Padrão de Componentes Compostos - Padrão de Estilos Extensíveis - Padrão de Props de Controle - Padrão de Inicializador de Estado - Padrão de Função Filha - Padrão de Inicializador de Estado Personalizado + Função Filha - Implantações no NPM usando TSDX - Storybook para NPM - Implantação manual no NPM: TypeScript + create-react-app - Lançamento Semântico Automático - Formik - Formulários tradicionais - Validações manuais - Validações com Yup - Hooks personalizados do Formik - Componentes do Formik - Abstração do Formik - Componentes personalizados reutilizáveis para o Formik - Formulários dinâmicos - Validações para formulários dinâmicos - Storybook - Introduções - Propriedades - Opções - Elementos - Controles - Implantações - Publicação no NPM - TypeScript - Documentação automática - Bônus: Chromatic - Bônus: Notas no Chromatic - GitHub Actions: Procedimento para criar o seguinte - Configurações de ações - Instalação do Node - Compilação do aplicativo React - Versionamento semântico - Gerar lançamento - Publicação automática no Npm - Implantação automática do Storybook - PWA: - Service Worker - Manifesto - Configurações automáticas do npx create-react-app - Configurações manuais - Estratégias de cache - Pré-cache - Apenas cache - Cache primeiro com fallback de rede - Rede primeiro com fallback de cache - Somente rede - Modo offline - CRUD offline - Criar - Ler - Atualizar - Excluir - Sincronização em segundo plano - Workbox - Configuração manual - Configuração do assistente - Configuração preferida (manual) - Sincronização em segundo plano - IndexedDB - Workbox CDN - Módulos do Workbox - React - Detectar online e offline Mais uma vez, o objetivo deste curso é aprimorar suas habilidades existentes em React com Hooks e levá-las para o próximo nível, para que suas aplicações React sejam ainda melhores. Espero que este curso seja muito útil para você e estou ansioso para vê-lo lá dentro!