Aprenda como criar uma PWA personalizada com React usando Workbox e Webpack

Visão geral do curso

Este curso é projetado para iniciantes, intermediários e alunos avançados que desejam criar uma Progressive Web App (PWA) personalizada com React do zero usando Workbox e Webpack. Ao longo deste curso, você obterá uma compreensão abrangente das PWAs do React e aprenderá como utilizar o Workbox e o Webpack para aprimorar a funcionalidade e o desempenho do seu aplicativo.

Conteúdo do curso

Durante este curso, você abordará os seguintes tópicos:

1. Introdução ao React PWA com Webpack e Workbox

- Entenda os fundamentos das PWAs do React e os benefícios que elas oferecem. - Explore as funcionalidades e capacidades do Workbox e do Webpack.

2. Criando um projeto React do zero com Webpack 5

- Configure um aplicativo React usando o Webpack 5 e o Babel. - Configure o Webpack Dev Server para desenvolvimento e produção do React.

3. Utilizando ícones SVG, Google Fonts e estilos no React

- Implemente ícones SVG no seu aplicativo React. - Integre fontes e estilos do Google no seu aplicativo. - Crie um componente de layout para um design consistente.

4. Navegação no React usando o Reach Router

- Aprenda como navegar entre diferentes páginas no seu aplicativo React usando o Reach Router.

5. Definindo uma imagem de fundo com estilos inline no React

- Adicione uma imagem de fundo ao seu aplicativo React usando estilos inline.

6. Gerenciando variáveis de ambiente personalizadas no React com Dot Env

- Entenda como lidar com variáveis de ambiente personalizadas no seu aplicativo React usando o Dot Env.

7. Buscando dados no React usando o Axios

- Aprenda como buscar dados de uma API no seu aplicativo React usando o Axios.

8. Service Workers e o plugin Workbox Webpack

- Adquira um entendimento profundo dos service workers e seu papel nas PWAs. - Configure e utilize o plugin Workbox Webpack para gerenciamento de service workers. - Implemente o recurso InjectManifest para registro de service workers.

9. Precaching e estratégias de cache com o Workbox no React

- Utilize o Workbox Core para implementar precaching e estratégias de cache na sua PWA do React. - Aprenda sobre os métodos preCacheAndRoute e skipwaiting. - Faça cache de fontes do Google usando o Workbox e implemente as estratégias de cache StaleWhileRevalidate e CacheFirst.

10. Fazendo cache de imagens nos service workers

- Descubra como fazer cache de imagens nos service workers para melhorar o desempenho e a funcionalidade offline.

11. Cache em tempo de execução no React PWA com o Workbox

- Aprenda como implementar cache em tempo de execução na sua PWA do React usando o Workbox.

Por que aprender React PWA com Workbox e Webpack?

As Progressive Web Apps (PWAs) estão se tornando cada vez mais populares devido à sua capacidade de fornecer uma experiência de usuário perfeita em diferentes dispositivos e plataformas. Ao dominar as PWAs do React com o Workbox e o Webpack, você adquirirá um conjunto de habilidades valioso que pode aprimorar significativamente suas capacidades de desenvolvimento web. Além disso, entender os service workers e as estratégias de cache permitirá que você otimize o desempenho e a funcionalidade offline de suas aplicações web. Matricule-se agora e embarque em uma jornada para criar sua própria PWA personalizada com React usando o Workbox e o Webpack!