Curso Online Ignição React

COMPRAR AGORA

Veja o que você vai aprender

O curso online Ignição React vai te levar do zero ao nível intermediário em desenvolvimento web com React.js.

Veja tudo que você vai aprender passo a passo:

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.

Benefícios de estudar na 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.

  • Suporte de especialistas

    Você vai ter acesso ao suporte de nossos especialistas por 60 dias, para tirar todas as dúvidas que tiver durante as aulas.

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.

E já recebemos mensagens de líderes técnicos indicando que dá preferência para candidatos que estudam com a gente também.

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 Ignição React em seu nome, com carga horária de 40 horas e validação digital de autenticidade.

Os bônus que você vai ganhar

Curso Online Web Design Responsivo com HTML5, CSS3 e BEM

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.

VALE R$447

GRÁTIS

Curso Online Explorando a Linguagem JavaScript

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

VALE R$397

GRÁTIS

Curso Online Programando em TypeScript

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.

VALE R$197

GRÁTIS

Voucher de R$50 da AlgaWorks

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).

VALE R$50

GRÁTIS

Suporte VIP por 2 meses

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

Conteúdo programático

Ignição React

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

Web Design Responsivo com HTML5, CSS3 e BEM

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

Explorando a Linguagem JavaScript

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

Programando em TypeScript

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

TUDO ISSO VALE R$1.638,00

Mas mesmo valendo isso, sabemos que esse valor seria inviável para muitas pessoas. Por isso o curso online Ignição React tem o preço de

apenas R$497 à vista.

💰 Você ganha R$1.141,00 de bônus
💳 E você ainda pode pagar em 12x R$49,90 no cartão de crédito
😅 É menos que um cafezinho por dia.

COMPRAR AGORA

Compre agora, decida depois!
Garantia Total de 30 Dias.

Se você adquirir o treinamento e mudar de ideia em até 30 dias após a data da compra, é só enviar um e-mail para contato@algaworks.com e pedir o seu dinheiro de volta!

Nós vamos estornar seu pagamento integralmente, sem cobrança de taxas, multas... absolutamente nada! Não vamos fazer nenhuma pergunta antes de devolver seu dinheiro, e o mais importante, não ficaremos magoados com você.

Perguntas Frequentes

  • q-iconQuais 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.

  • q-iconQual é 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.

  • q-iconEu 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.

  • q-iconÉ 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.

  • q-iconEu 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.

  • q-iconO 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.

  • q-iconEu 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).

  • q-iconVamos 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.

  • q-iconO 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.

  • q-iconQual 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.

  • q-iconOnde 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.

  • q-iconO curso possui garantia?

    Sim! Se você não ficar satisfeito com o curso você pode solicitar o reembolso em até 30 (trinta) dias corridos da data do matrícula e nós devolvemos 100% do seu dinheiro.

  • q-iconEu vou receber uma nota fiscal?

    Sim! Ela será enviada para seu e-mail após o vencimento da garantia de 30 dias.

  • q-iconTem suporte de instrutores ao comprar o curso?

    Claro! Você terá acesso ao suporte do curso por 60 dias. Dentro desse período você pode fazer quantas perguntas quiser sobre o conteúdo do curso e nossos tutores vão te ajudar a ter o máximo de proveito.

  • q-iconAo 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 Explorando a Linguagem JavaScript, Curso Programando em TypeScript e ainda um Voucher de R$50 para você usar na sua próxima compra na AlgaWorks. Bom demais, né?

Adquira agora e receba:

  • Curso Ignição React
  • Curso Web Design Responsivo com HTML5, CSS3 e BEM
  • Curso Explorando a Linguagem JavaScript
  • Curso Programando em TypeScript
  • Acesso vitalício às aulas
  • Voucher R$50
  • Suporte por 60 dias 
  • 30 dias de garantia. Se desistir, é só pedir a devolução do seu dinheiro, sem letras miúdas e sem ressentimentos
arrow
COMPRAR AGORA

AlgaWorks Softwares, Treinamentos e Serviços Ltda
CNPJ: 10.687.566/0001-97