Curso Online Ignição React
Assista ao vídeo e conheça o projeto do IGR
Desenvolva Aplicações Web com React.js
Importante: Este curso não oferece Suporte VIP
Você já viu a quantidade de vagas e projetos que exigem conhecimento em React?
Você pensou em aprender, mas ainda não conseguiu começar, porque ficou com muitas dúvidas?
Você não está sozinho!
Muitas pessoas estão falando de React.js, mas infelizmente os profissionais realmente preparados ainda não conseguem atender toda a demanda do mercado.
Se você ainda não está preparado para criar seus primeiros projetos Web com React.js usando typescript, eu vou te mostrar como você pode fazer isso…
...em até menos de DOIS MESES!
Isso mesmo!
Assim que você tiver nosso plano de estudos, você vai começar a desenvolver seus primeiros projetos.
O que você está prestes a conhecer é um curso online que vai te guiar no desenvolvimento de aplicações web usando várias tecnologias, técnicas e ferramentas, como por exemplo:
- Typescript
- Redux
- Hooks
- Shared Components vs. Logical Componets
- Fetch API e Axios
- OpenAPI e Mock Server com Prism
- React Router
- HOCs
Por que escolher React.js?
Fácil aprendizado
Se você está entrando agora no mundo da programação, o React.js é mais fácil e rápido de aprender de forma imediata.
Qualquer pessoa com um conhecimento básico em HTML, CSS e JavaScript pode facilmente compreender.
Simplicidade
Nós baseamos nossa abordagem em componentes com um ciclo de vida bem definido e utilizamos TypeScript, deixando o React.js simples de aprender e com uma chance muito pequenas de erros.
Você vai conseguir criar uma página web profissional do zero.
Flux
O React.js usa ligação de dados unidirecional e uma arquitetura de aplicação chamada Flux.
O fluxo de dados unidirecional (one-way data flow) do React mantém tudo rápido e modular e é o Flux que controla o fluxo de dados para os componentes por meio de um ponto de controlo – o dispatcher.
Dessa forma é mais fácil depurar componentes independentes de grandes aplicações React.js.
Grandes empresas usam
Pelo menos no Brasil, são mais de 200 empresas que usam React e tecnologias do ecossistema.
Por ser um projeto criado pela gigante do mercado Facebook, o React não apenas por ser inteligente e ter uma curva aprendizado menor, se tornou uma das bibliotecas mais usadas pelas grandes empresas.
Confira abaixo quais empresas estão usando:
- Uber
- Airbnb
- Netflix
- Dropbox
- PayPal
- Globo.com
- Buscapé
- B2W
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.
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.
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 Mergulhando no JavaScript
Aprenda os fundamentos da linguagem JavaScript. Com o curso Mergulhando no JavaScript, você vai aprender, desde os conceitos básicos como condicionais, laços de repetição, declarações de funções e etc. até o que há de mais moderno e produtivo da linguagem (ES6+), além de um módulo exclusivo de TypeScript. O Mergulhando no JavaScript é o curso ideal para aqueles que querem ter uma boa base de JavaScript moderno e TypeScript, antes de encarar algum framework (como Angular ou React).
VALE R$97
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
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
Mergulhando no JavaScript
1. Colocando os pés na água
1.1. Introdução ao curso
1.2. Por que devo aprender JavaScript moderno? (ES6+)
1.3. Configurando o ambiente de desenvolvimento
1.4. Obtendo o melhor do suporte
2. A superfície do JavaScript
2.1. Introdução ao módulo
2.2. Hello World com JavaScript
2.3. Criando objetos
2.4. Criando Array de objetos
2.5. O princípio de funções
2.6. Condicionais
2.7. Programação funcional vs Programação imperativa
3. Mergulhando nos fundamentos do JavaScript
3.1. Relembrando alguns tópicos
3.2. Tudo dentro do JavaScript é considerado um objeto
3.3. Entendendo o uso do var
3.4. Declarando constantes (const)
3.5. Declarando variáveis (let)
3.6. Criando funções com function
3.7. Funcion.call e Function.apply
3.8. Criando arrow functions
3.9. Argumentos de função
3.10. Quando não usar arrow functions (Hoisting)
3.11. Trabalhando com template strings
3.12. Timers com setInteval e setTimeout
4. Orientação a ObjetoS
4.1. Introdução ao módulo de OOP
4.2. Criando uma classe
4.3. Métodos e propriedades dentro de uma classe
4.4. Constructor
4.5. Heranças
4.6. Object.prototype e Arrow function
5. Desestruturação e Spread
5.1. O que é desestruturação?
5.2. Desestruturando objetos
5.3. Desestruturando arrays
5.4. Desestruturando funções
5.5. Intrudução ao Spread operator
5.6. Clonando objetos com spread
5.7. Arrays e spread
5.8. Utilizando Spread dentro de parâmetros de funções
5.9. Recebendo argumentos com Rest operator
5.10. Desestruturando um array com Rest operator
6. Manipulação de listas (Arrays)
6.1. Introdução ao módulo
6.2. Criando arrays a partir de listas iteráveis com Array.from
6.3. Criando arrays do zero com Array.of
6.4. Iterando sobre itens de um array from forEach
6.5. Remapeando arrays com Array.map
6.6. Filtrando arrays com Array.filter
6.7. Reduzindo uma lista à um único valor com Array.reduce
6.8. Encontrando um registro específico em uma lista com Array.find
6.9. Validando elementos de uma lista com Array.some e Array.every
7. Promises e código assíncrono
7.1. Introdução às Promises
7.2. Criando uma Promise
7.3. Recebendo o valor da promise com then e catch
7.4. Async e Await
7.5. Múltiplas promises em paralelo com Promise.all
7.6. Promise chaining
8. Módulos e pacotes
8.1. Introdução ao NPM
8.2. Instalando e utilizando um pacote
8.3. Gitignore e node_modules
9. TypeScript
9.1. Por que usar TypeScript?
9.2. Tipando variáveis
9.3. Type aliasing
9.4. Tipando argumentos de funções
9.5. Tipando objetos e propriedades opcionais
9.6. Union vs Intersection
9.7. Interfaces
9.8. Exportando e importando interfaces e types
9.9. Types vs Interfaces
9.10. Generics
9.11. Conclusão e próximos passos
TUDO ISSO VALE R$1.141,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$644,00 de bônus
💳 E você ainda pode pagar em 12x R$51,40 no cartão de crédito
😅 É menos que um cafezinho por dia.
Importante: Este curso não oferece Suporte VIP
Compre agora, decida depois!
Garantia Total de 07 Dias.
Se você adquirir o treinamento e mudar de ideia em até 07 dias após a data da compra, é só entrar em contato com a gente e preencher o formulário de reembolso. É bem simples, prático e fácil.
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.
-
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.
-
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.
-
É 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.
-
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.
-
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.
-
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).
-
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.
-
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.
-
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.
-
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.
-
O curso possui garantia?
Sim! Se você não ficar satisfeito com o curso você pode solicitar o reembolso em até 07 (trinta) dias corridos da data do matrícula.
-
Eu vou receber uma nota fiscal?
Sim! Ela será enviada para seu e-mail após o vencimento da garantia de 07 dias.
-
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é?
Adquira agora e receba:
- Curso Ignição React
- Curso Web Design Responsivo com HTML5, CSS3 e BEM
- Curso Mergulhando no JavaScript
- Acesso vitalício às aulas
- Voucher R$50
- 07 dias de garantia
AlgaWorks Softwares, Treinamentos e Serviços Ltda
CNPJ: 10.687.566/0001-97