Veja o que você vai aprender
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.
Conteúdo Programático
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
Benefícios de Estudar com a AlgaWorks
Acesso para sempre
Seu acesso ao curso online será vitalício, ou seja, nunca vai expirar.
Aprenda no seu ritmo
Estude a qualquer hora e assista as videoaulas quantas vezes precisar.
Certificado de conclusão
Ao concluir o curso, você vai receber um certificado de conclusão com validação digital.
Certificado de Conclusão
Vários de nossos alunos já relataram o prestígio que tiveram durante entrevistas de emprego por parte das empresas, quando souberam que são alunos da AlgaWorks.
Também já recebemos mensagens de líderes técnicos que dizem dar preferência para candidatos que estudam com a gente.
Sem dúvidas, ter um certificado da AlgaWorks não é um documento qualquer. É um indicador que você investe na sua carreira com treinamentos que realmente capacitam os alunos para resolver problemas reais.
Quando você concluir 100% das aulas do treinamento, vai receber um certificado do curso em seu nome, com validação digital de autenticidade. A carga horária que constará no certificado é de 40 horas.
Os bônus que você vai ganhar
Curso Web Design Responsivo
com HTML5, CSS3 e BEM
Aprenda a criar páginas web responsivas do zero e com uma metodologia que possibilite escalar o seu código.
>>> VALE R$497 <<<
GRÁTIS
Curso Mergulhando
no JavaScript
Domine JavaScript moderno (ES6+). Aprenda a criar os seus próprios códigos JavaScript do jeito certo. Chega de copiar e colar!
>>> VALE R$97 <<<
GRÁTIS
Voucher
de R$50
Você também vai ganhar um cupom de desconto de R$50 para ser usado em qualquer produto da AlgaWorks com uma validade de 12 meses.
>>> VALE R$50 <<<
GRÁTIS
O INVESTIMENTO DO CURSO É DE R$497,00
Você ainda pode pagar em 12x R$51,40 no cartão de crédito.
É menos que um café por dia.
Garantia Total de 07 dias
Compre agora
decida depois!
Se você adquirir o treinamento e mudar de ideia em até 07 dias após a data da compra, é só preencher a solicitação de reembolso e nós vamos devolver 100% do seu dinheiro.
Perguntas Frequentes
Quais os pré-requisitos para fazer o curso?
Você precisa conhecer apenas lógica de programação.
Todos os fundamentos de HTML5, CSS3, JavaScript e TypeScript serão ensinados em cursos extras que você terá acesso.
Mas se você já domina esses fundamentos, poderá pular o conteúdo se desejar e iniciar diretamente em React.
Eu vou aprender a implementar o back-end?
Não. O Ignição React é um curso com foco em front-end.
Mas o front-end precisa se conectar com o back-end (API), certo?
Por isso mesmo nós vamos entregar pra você uma REST API pronta (pra você baixar e rodar), mas vamos além…
Nós vamos usar um documento da especificação OpenAPI para que, caso você queira desenvolver a API na sua linguagem preferida, possa seguir a especificação para usá-la normalmente.
E além disso, você vai aprender como criar um Mock Server com Prism (um servidor de API que imita um servidor real) a partir do documento OpenAPI.
E claro, você vai aprender a integrar a aplicação React com a API usando Axios, que é uma biblioteca muito usada para fazer requisições HTTP.
Eu vou aprender a trabalhar com Redux?
Sim. Você vai aprender todos os conceitos do Redux de forma detalhada, como: o que são Actions, Reducers, Stores e como usar cada um deles da melhor forma.
Você também vai aprender a configurar o Redux no projeto, debugar o estado com Redux DevTools e persistir dados, mesmo sem uma API, com Redux Persist. Tudo isso com TypeScript.
Eu vou aprender a desenvolver componentes com Hooks?
Sim! Atualmente a tendência no mercado é usar hooks e por isso você vai aprender a desenvolver componentes com Hooks (e usaremos no projeto do curso também).
O curso é sobre React para web ou React Native?
O Ignição React é um curso de desenvolvimento web com React.
Você vai aprender muitos conceitos que são aproveitados para desenvolvimento com React Native, mas o foco e o projeto final é para React Web.
Onde será feito o deploy do projeto do curso?
Vamos fazer deploy do projeto na nuvem, na Netlify, uma plataforma de automação de deployment muito usada para projetos front-end.
O legal é que o Netlify tem um plano gratuito para testes e projetos pessoais.
Eu vou receber uma nota fiscal?
Sim! Ela será enviada para seu e-mail após o vencimento da garantia de 07 dias.
Qual é o nível do curso?
O Ignição React é um curso que vai te ensinar desenvolvimento web com React.js do zero até o nível intermediário.
Espere sair do curso conhecendo os fundamentos da tecnologia e com uma pequena aplicação desenvolvida passo a passo.
É possível usar um back-end em Java/Spring e o front-end em React?
Sim, é totalmente possível. A linguagem ou framework na qual o back-end é desenvolvido não faz a menor diferença para o front-end. Se ela seguir os padrões REST, pode ser sim desenvolvida uma API com Java e Spring sem problema algum.
O curso ensina a trabalhar com componentes baseados em classe ou componentes funcionais?
Você vai aprender como fazer das duas formas, mas o projeto do curso será desenvolvido com componentes funcionais, porque essa é a “boa prática” em novos projetos.
Vamos usar TypeScript ou JavaScript?
Usaremos TypeScript, porque é a linguagem que os desenvolvedores React estão preferindo usar em novos projetos.
E lembrando que você não precisa conhecer JavaScript e nem TypeScript, porque ganhará de bônus os nossos cursos sobre esses assuntos.
Qual IDE ou editor de código será usado no curso?
Vamos usar Visual Studio Code, por ser uma IDE com amplo suporte e facilidades ao ecossistema do JavaScript/TypeScript.
O curso possui garantia?
Sim! Se você não ficar satisfeito com o curso você pode solicitar o reembolso em até 07 (sete) dias corridos da data do matrícula.
Ao comprar o curso, eu ganho algum bônus?
Sim! Você vai ganhar os seguintes bônus: Curso Web Design Responsivo com HTML5, CSS3 e BEM, Curso Mergulhando no JavaScript e ainda um Voucher de R$50 para você usar na sua próxima compra na AlgaWorks. Bom demais, né?