Ignição React (IGR)

Single Page Application

Você vai aprender o conceito de Single Page Application. Quais são as vantagens de trabalhar com esse tipo de aplicação, como funcionam as aplicações de página única a nível de infraestrutura e, principalmente, aprender a criar uma Single Page Application com React.js.

TypeScript

Você vai aprender a desenvolver aplicações web com React.js usando o superset TypeScript, o que vai te permitir criar uma aplicação altamente tipada, mais robusta e com menos chances de erros.

Vamos usar TypeScript para criar componentes, gerenciar o estado da aplicação, tipar estados, declarar tipagens alternativas próprias que facilitarão o processo de desenvolvimento no geral, e claro, configurar tudo usando as melhores práticas do mercado.

Componentes baseados em classe e componentes funcionais

Você vai entender o que são componentes baseados em classe (os famosos Class Components), o que são componentes funcionais (Functional Components) e qual a grande diferença entre eles, entendendo, por fim, quando usar cada um.

Hooks

Você vai aprender como funcionam os hooks dentro do React, como criar estados, gerenciar o ciclo de vida e até conectar com o estado do Redux usando a API dos hooks.

Shared Components

Você vai entender a diferença entre Shared Components (componentes compartilhados) e Logical Components (componentes lógicos) e como essa divisão é importante para o escalonamento e reutilização de código da aplicação.

Ao decorrer do curso você vai criar diversos componentes compartilhados, dos mais simples, como um botão, aos mais complexos, como uma tabela que se monta automaticamente com base em um array de dados.

Fetch API e Axios

Você vai aprender a usar a Fetch API, uma forma nativa e moderna do JavaScript de enviar requisições HTTP e compará-la com a biblioteca mais famosa e utilizada no JavaScript para envio de requisições (Axios).

Vai aprender também quais as vantagens e desvantagens de cada uma,  interceptar requisições, gerenciar tokens de acesso e realizar requisições de forma simples usando o Axios.

Services Pattern

Atualmente o Pattern de Serviços (Services Pattern) é amplamente utilizado em todo o mercado, e nesse curso você vai ver como ele te ajudará a manter a lógica da sua aplicação nas camadas corretas, facilitando a manutenção e o desenvolvimento à medida que a sua aplicação escala.

OpenAPI e Mock Server com Prism

O foco do Ignição React é front-end, mas a maioria das aplicações precisam de um back-end também, certo?

E o mais legal é que o back-end não precisa estar pronto para você desenvolver o front-end e até testar as chamadas HTTP na API.

Para isso, você vai aprender a trabalhar com o conceito de "Contract-First". Vamos usar documento da especificação OpenAPI e subir um Mock Server usando a ferramenta Prism.

Controle de estado com Redux

Um dos objetivos deste curso é te ensinar sobre a arquitetura Flux, onde você entenderá o fluxo que os dados percorrem e como funciona o conceito de imutabilidade no Redux.

Você vai instalar e configurar o Redux com TypeScript, aprender a debugar mais facilmente o fluxo dos dados usando o Redux DevTools e também como alterar o estado global da aplicação de forma funcional.

Além disso, você também vai aprender a conectar seus componentes ao estado do Redux de qualquer lugar da aplicação, usando High Order Components, disparar ações dos seus componentes que alteram o estado da aplicação e como disparar ações assíncronas com Redux Thunk.

Tudo isso usando TypeScript, criando suas próprias tipagens.

Por fim, você vai aprender a persistir os dados da aplicação mesmo depois de atualizar a tela, sem a necessidade de um back-end.

Roteamento com React Router

Você vai aprender a implementar roteamento em uma Single Page Application com React Router, criar a tela de 404 (página não encontrada), tela de login, etc.

Vai também aprender como redirecionar programaticamente de uma rota para a outra após determinada ação (como por exemplo depois da ação de login ter sido finalizada com sucesso).

High Order Component

Os HOCs (não confunda com Hooks) são os famosos High Order Components, e no Ignição React você vai ver como eles podem ajudar na segurança da aplicação e na conexão de componentes com o estado e ações do Redux.

Segurança da aplicação

A segurança da aplicação é fundamental, por isso no Ignição React você vai aprender a implementar segurança em componentes usando High Order Components que renderizam ou não os componentes com base no perfil do usuário.

Você vai aprender a fazer chamada em um endpoint de autenticação de uma REST API, salvar o token de acesso no navegador e enviar esse token nas requisições sempre que necessário.

Build e deploy em produção na Netlify

Você vai aprender a fazer build da sua aplicação e reduzir o tamanho dos arquivos finais com apenas um comando.

Vamos fazer deploy do projeto do curso na Netlify, que é um serviço de hospedagem de na nuvem muito usado para aplicações front-end.

E o legal é que o Netlify tem um plano gratuito para testes e uso pessoal.

A cada push no master do repositório Git, o Netlify gera uma nova versão da aplicação automaticamente, sem necessidade de ficar subindo arquivos toda hora.

Você vai aprender a criar páginas responsivas com HTML5 e CSS3 usando a metodologia BEM. Se você ainda não sabe ou não é muito bom nisso, esse curso vai te preparar para fazer o curso de Ignição React.

Aprenda a criar os seus próprios códigos JavaScript do jeito certo. Chega de copiar e colar!

Aprenda a programar em uma linguagem para desenvolvimento JavaScript fortemente tipada. Você vai aprender os fundamentos, uso de orientação a objetos e um pouco de ES6.

Você vai ganhar um voucher com valor equivalente a R$50,00, para adquirir qualquer outro curso na AlgaWorks (válido por 12 meses a partir da data da sua compra).

Você vai ganhar o Suporte VIP de nossos especialistas por 3 meses, para tirar todas as suas dúvidas durante os seus estudos.

1. Introdução
1.1. Introdução ao React
1.2. Aprendendo o básico do React no Codepen
1.3. Configurando o ambiente de desenvolvimento
1.4. Iniciando a nossa SPA com React CLI
1.5. Como funciona o suporte da AlgaWorks
1.6. Estrutura do projeto SPA
1.7. Apresentando a aplicação final e dicas para seguir o curso

2. Mergulhando nos fundamentos do React
2.1. Criando o primeiro componente em React
2.2. Componentes baseados em classe
2.3. Ciclos de vida dos componentes
2.4. Componentes funcionais (com hooks)
2.5. Entendendo o hook useEffect
2.6. Dando cara à nossa aplicação (estilizando com CSS)
2.7. Entendendo tudo sobre Props
2.8. Shared components e arquitetura
2.9. Criando o componente Input
2.10. Renderização de listas em detalhes
2.11. Preparando para criar o componente de tabela
2.12. Estrutura HTML de uma tabela
2.13. Estilizando o componente de tabela com Sass
2.14. O grande problema do componente de tabela genérico
2.15. Resolvendo o problema do componente de tabela genérico com organização de dados
2.16. Propificando a tabela
2.17. Iniciando o componente de formulário
2.18. Interligando o estado do componente com o formulário
2.19. Cadastrando o produto no estado da aplicação
2.20. Reutilizando o componente de formulário
2.21. Limpando um formulário com estado
2.22. Habilitando botões de ação na tabela
2.23. Finalizando a interface do projeto
2.24. Revendo o que aprendemos neste módulo

3. Interligando com o back-end
3.1. Introdução a conexão com APIs
3.2. Fetch API: requisições com JavaScript moderno
3.3. Produtividade com Axios
3.4. OpenAPI: Configurando a API do AlgaStock na máquina
3.5. Entendendo o pattern de serviços
3.6. Atualizando o schema do produto
3.7. Finalizando o serviço de produtos
3.8. Mock server com Prism

4. Controlando o estado global com Redux
4.1. Introdução ao Redux
4.2. Store, Reducer e Actions
4.3. Debugando o estado com o Redux DevTools
4.4. Conectando componentes com o Redux
4.5. Disparando actions com componentes
4.6. Redux Thunk: Actions Assíncronas
4.7. Redux Thunk e o TypeScript
4.8. Redux conectado com API = Actions + Services
4.9. Refatoração e boas práticas

5. Roteamento
5.1. Introdução ao React Router
5.2. Criando a primeira rota
5.3. Criando a view 404 Not Found
5.4. Criando a view de Login
5.5. Criando a view de perfil (dica para mockar os dados do Redux)
5.6. Login: Autenticando o usuário com Redux Persist
5.7. Segurança: Protegendo views e componentes com um HOC (High Order Component)

6. Build e produção
6.1. Build vs Desenvolvimento Webpack, Babel e Sass
6.2. Gerando o bundle e entendendo os arquivos de map
6.3. Eject vale a pena?
6.4. Deploy do AlgaStock no Netlify
6.5. Conclusão e próximos passos

7. Bônus: aulas extras
7.1. Como funciona o logout
7.2. Redirecionando para a home após o login
7.3. Corrigindo o Redux DevTools em produção

1. Introdução
1.1. Introdução ao curso
1.2. Apresentando o projeto
1.3. Preparando o ambiente de desenvolvimento

2. Começando com HTML
2.1. O que é HTML?
2.2. Estrutura básica do documento
2.3. DOCTYPE e codificação
2.4. Primeiras tags: títulos, quebras de linhas e parágrafos
2.5. Comentários
2.6. Ênfase, importância e marcação
2.7. Imagens
2.8. ncoras (links)
2.9. Elementos estruturais

3. Começando com CSS
3.1. O que é CSS
3.2. Estilos incorporados e Regras CSS
3.3. Estilos em arquivos externos
3.4. Seletores de tipo, classe e ID
3.5. Agrupando seletores
3.6. Seletores descendentes
3.7. Seletores de filhos diretos
3.8. Cores
3.9. Formatação de textos
3.10. Inspecionando com Chrome DevTools
3.11. Entendendo a propriedade display
3.12. Adicionando bordas
3.13. Espaçamento interno (padding)
3.14. Margens de elementos
3.15. Box model e a propriedade box-sizing

4. Iniciando o projeto do curso
4.1. Preparando o projeto
4.2. Criando o cabeçalho da página
4.3. Listas ordenadas e não-ordenadas
4.4. Adicionando os planos
4.5. Flutuando elementos
4.6. Usando pseudo-elementos
4.7. Configurando os planos lado a lado com float
4.8. Criando um botão
4.9. As pseudo-classes :focus e :hover
4.10. Reset CSS e Normalize.css

5. Web Design Responsivo
5.1. O que é Responsive Web Design?
5.2. Unidade de medida: pixel
5.3. Unidade de medida: percentual
5.4. Meta tag viewport
5.5. Layout fixo e fluído
5.6. Layout responsivo e media queries
5.7. Como funciona um sistema de Grid CSS
5.8. Sistema de grid do Bootstrap
5.9. Ajustando o projeto para usar Grid CSS

6. Especificidade, BEM e boas práticas
6.1. Especificidade do CSS
6.2. Caos no CSS: porque uma metodologia é importante?
6.3. A Metodologia BEM: seu código escalável
6.4. Como usar BEM na prática - parte 1
6.5. Como usar BEM na prática - parte 2
6.6. Ajustando o projeto do curso com BEM
6.7. Mais organização: CSS com Guidelines

7. Encerrando o projeto e mais CSS
7.1. Unidades de medida: em e rem
7.2. Ajustando unidades de medida no projeto
7.3. Adicionando chamada principal
7.4. Adicionando depoimento
7.5. Adicionando rodapé
7.6. Posicionamento estático e fixo
7.7. Posicionamento relativo
7.8. Posicionamento absoluto
7.9. Adicionando rótulo no plano
7.10. Ajustando margem do plano
7.11. Adicionando aspas no depoimento
7.12. Adicionando o bloco de navegação
7.13. Adicionando o menu para telas pequenas
7.14. Ajustando o menu para telas médias e grandes
7.15. JavaScript Hook: chaveando o menu
7.16. Criando um formulário: assinatura de plano
7.17. Concluindo o formulário de assinatura de plano
7.18. Entendendo as tabelas do HTML
7.19. Aplicando estilos em tabelas com CSS
7.20. Conclusão e próximos passos

1. Introdução
1.1. Introdução ao workshop
1.2. Como usar o suporte
1.3. Introdução ao JavaScript
1.4. Instalando o Node.js no Mac
1.5. Instalando o Node.js no Windows
1.6. Rodando JavaScript no Sublime Text no Mac
1.7. Rodando JavaScript no Sublime Text no Windows

2. Fundamentos do JavaScript
2.1. Variáveis e hoisting
2.2. Tipagem dinâmica
2.3. Tipo Number
2.4. Tipo String
2.5. Tipo Boolean
2.6. O operador typeof
2.7. Operadores aritméticos
2.8. Operadores de comparação
2.9. Operadores lógicos
2.10. Estrutura de controle if, else if, else
2.11. Operador ternário
2.12. Estrutura de controle for
2.13. Estrutura de controle while
2.14. Valores null e undefined

3. Funções
3.1. Introdução a funções
3.2. Alert e console.log
3.3. Funções matemáticas
3.4. Criando funções
3.5. Escopo de função e global
3.6. Closures

4. Introdução a objetos
4.1. Introdução a objetos
4.2. Criando objetos
4.3. Objetos dentro de objetos
4.4. Apagando propriedades do objeto
4.5. Iterando sobre propriedades do objeto
4.6. Comparando objetos

5. Arrays
5.1. Introdução a arrays
5.2. Criando arrays
5.3. Array vs Object
5.4. Adicionando e removendo elementos do array
5.5. Iterando nos elementos com forEach
5.6. Funções toString() e join()
5.7. Elementos do array
5.8. Mais da API de arrays

6. JavaScript no Browser
6.1. Conhecendo o Developer Tools
6.2. Debug com o Developer Tools
6.3. Boas práticas
6.4. Objeto window
6.5. CDN vs local hosting

7. jQuery
7.1. Introdução ao jQuery
7.2. Seletores
7.3. CSS
7.4. Introdução ao HTTP
7.5. Ajax e promises
7.6. Manipulação do DOM
7.7. Plugins jQuery

8. Trabalhando com eventos
8.1. Introdução a eventos
8.2. Eventos de manipulação do DOM
8.3. Disparando eventos
8.4. Temporizadores

9. Funções e objetos
9.1. Entendendo o protótipo do objeto
9.2. Como funciona o shadowing
9.3. Funções fábrica
9.4. Funções construtoras
9.5. Module Pattern
9.6. Propriedade prototype das funções
9.7. Usando a função bind
9.8. Disparando eventos customizados
9.9. Chamando funções através de call e apply
9.10. Namespaces
9.11. Conclusão

1. Introdução
1.1. Introdução ao curso
1.2. O que é TypeScript?
1.3. Instalando o Node.js e NPM
1.4. Conhecendo e instalando o Visual Studio Code
1.5. Instalando o TypeScript
1.6. Primeiro código com TypeScript

2. Fundamentos do TypeScript
2.1. Declaração de variáveis (var, let e const)
2.2. Tipos básicos
2.3. Inferência de tipos
2.4. Arrays e iterações

3. Orientação a objetos
3.1. Classes e objetos
3.2. Propriedades e métodos
3.3. Construindo sua primeira classe
3.4. Herança
3.5. Interfaces

4. Outros recursos do ES6
4.1. Fat arrow functions
4.2. Template strings
4.3. Promise
4.4. Conclusão