ReactJS, Hooks, Recoil, TDD, Clean Architecture, SOLID

Crie um sistema completo em ReactJS com Typescript e Hooks, utilizando TDD, Clean Architecture, Design Patterns e SOLID.

4.69 (729 reviews)
Udemy
platform
Português
language
Web Development
category
ReactJS, Hooks, Recoil, TDD, Clean Architecture, SOLID
2,200
students
41.5 hours
content
Sep 2021
last update
$199.99
regular price

What you will learn

Usar TDD da forma correta

Usar o Clean Architecture em um projeto feito com ReactJS

Usar Design Patterns da forma correta

Usar os princípios do SOLID

Usar o React Testing Library

Usar o Cypress

Criar animações com CSS

Criar um sistema completo, consumindo uma API Rest

Usar Git da forma correta

Description

Nesse curso irei demonstrar na prática como criar um sistema em ReactJS utilizando Typescript, Hooks e seguindo as melhores metodologias do mercado. Se você está cansado de cursos básicos e quer realmente aprender sobre conteúdos avançados e relevantes como: Design Patterns, Clean Architecture, SOLID, DRY, KISS, YAGNI e TDD, você está no lugar certo. O objetivo maior desse treinamento é fazer você sair da sua zona de conforto e ver que existem muitas coisas a serem estudadas para se tornar um líder técnico ou um arquiteto de software.

Vamos criar um sistema completo com Login, Cadastro, Lista de Enquetes, Responder uma Enquete e Resultado da Enquete.

Ao fim do curso tem uma sessão bônus mostrando como refatorar o gerenciamento de estado de toda a aplicação para o Recoil.

Além de tudo isso irei mostrar na prática como utilizar o Git, Jest, React Testing Library, Cypress, Integração Contínua e como fazer para manter nosso código sempre limpo, organizado e bem estruturado, criando inclusive travas para evitar que códigos defeituosos ou mal formatados sejam commitados em nosso repositório.

Esse curso fará você evoluir mais do que anos de faculdade. Mostrarei pra você, de forma objetiva, todos os conhecimentos que obtive ao longo dos anos de minha carreira. Você terá a oportunidade de evoluir em semanas ou meses o que os programadores sêniors levam anos para aprender.

Content

Introdução

Código Fonte
Configurando o Git
Configurando as dependências
Clean Architecture

Login - Domain e Data Layer

Testando a integração do RemoteAuthentication com o HttpPostClient
Testando que o RemoteAuthentication vai chamar o HttpClient com o body correto
Testando casos de erro
Testando caso de sucesso

Infra Layer - Implementando o HttpPostClient

Criando o AxiosHttpClient e testando sua integração com a biblioteca axios
Refatorando o AxiosHttpClient

Login - Presentation Layer

Configurando o React
Configurando o Webpack
Criando o layout da tela do Login
Refatorando layout do Login em componentes
Definindo um Router para o sistema
Testando o estado inicial do Login 1/2
Testando o estado inicial do Login 2/2
Testando a integração com o Validation
Mostrando status de erro ou sucesso baseado na resposta do Validation
Testando a integração com o Auhentication
Refatorando os testes do Login
Testando caso de sucesso e erro
Testando a navegação entre componentes
Refatorando os testes

Validation Layer

Criando o RequiredFieldValidation
Criando o EmailValidation
Criando o MinLengthValidation
Aplicando o Design Pattern Composite
Aplicando o Design Pattern Builder

Login - Main Layer

Fazendo a composição do Login
Refatorando os Factories
Ajustando o AxiosHttpClient
Criando últimos testes para bater coverage 100%
Criando variável de ambiente e subindo versão

Integração Contínua

Integrando o projeto com TravisCI e Coveralls

Movendo LocalStorage para Infra

Criando o SaveAccessToken UseCase
Testando caso de exceção
Testando o LocalStorageAdapter
Mudando o Login para usar o SaveAccessToken ao invés do localStorage diretamente
Ajustando o Webpack e subindo versão

SignUp

Criando o AddAccount UseCase
Criando o CompareFieldsValidation
Corrigindo bug no Eslint
Criando layout da tela de cadastro
Criando testes para o SignUp 1/3
Criando testes para o SignUp 2/3
Criando testes para o SignUp 3/3
Criando um componente para o SubmitButton
Criando a composição do SignUp

Testes de Integração com Cypress

Configurando o Cypress
Criando testes de integração para o Login 1/2
Criando testes de integração para o Login 2/2
Criando input com animação
Mockando requests nos testes de integração
Finalizando os testes e fazendo outro refactor no input
Refatorando os testes de integração
Criando testes de integração para o SignUp
Subindo versão pro Github

LoadSurveyList

Criando o caso de uso do LoadSurveyList
Como resolver Cross Cutting Concerns
Integrando o LoadSurveyList com o HttpGetClient
Adicionando o HttpGetClient ao AxiosHttpClient
Criando o layout do SurveyList
Tornando o layout responsivo
Criando efeito de shimmer
Adicionando mais dados ao localstorage
Migrando o Router para o Main Layer
Criando um contexto para a aplicação
Adicionando testes ao CurrentAccountAdapter
Aplicando o Design Pattern Proxy

Reviews

José
June 23, 2023
O curso era bem o que eu esperava. Nem sabia que dava para implementar o clean architecture no front end dessa forma. E como fica fácil dar manutenção, testar e encontrar as coisas nesse projeto. Vai ajudar muito no meu trabalho e para eu promover algumas melhorias no projeto da empresa onde trabalho.
Andrei
June 9, 2023
Curso bom para ver como ele pensa e estrutura seu código, mas apenas isso. Se quiser ir fazendo o curso junto, não recomendo, pois ele não é atualizado e muitas bibliotecas irão demandar um bom tempo de pesquisa por conta própria para corrigir os bugs. No geral, a didática é muito boa.
Junior
April 9, 2023
Sem duvidas o melhor curso que ja fiz, pra vc que quer se aprofundar na Clean Architecture e TDD é um prato muito cheio! Maguinho, planos para um curso novo voltado para o front ?
Gustavo
February 22, 2023
Adquiri o curso para aprender mais sobre TDD e Clean Architecture e, de fato, o instrutor tem muito conhecimento sobre os assuntos e soube passar bem os conceitos. O problema é com o suporte, pois já tem alguns meses em que as dúvidas dos demais alunos não foram respondidas; a API e o site em produção aparentemente não estão funcionando, pois eram hospedadas no plano Free da Heroku, alguns serviços que o instrutor usou são pagos agora (como o TravisCI e o próprio Heroku). Dá pra contornar esses problemas baixando o repositório de backend, fazer os ajustes necessários, e usar outros serviços de ci/cd e hospedagem gratuitos para terminar o treinamento. No caso, usei o GithubActions e a Vercel - só que aí teria que ter a API de produção pro site funcionar direitinho. Mesmo assim, ainda vale a pena fazer o treinamento.
Anderson
February 6, 2023
O curso é muito bom para introduzir o conceito de TDD e Clean Architecture, porém a minha nota baixa fica pelo fato de que este curso pelo jeito foi esquecido pelo autor. Existe uma API que foi criada pelo autor do curso para estas aulas, porém a API não está mais acessível. Eu tentei postar uma dúvida e também tentei entrar em contato com o autor do curso sem sucesso. É uma pena que o curso tenha ficado depreciado por falta de suporte do autor.
Adriano
January 25, 2023
O curso é exatamente como eu esperava, denso e repleto de aplicações práticas sobre arquitetura, testes e patterns. O Manguinho apresenta muito conhecimento e segurança sobre todos os pontos que aborda e com certeza vale o preço cobrado. Recomendo demais.
Guilherme
December 14, 2022
O curso é bom, um dos poucos de react voltado para arquitetura e testes, porém precisa ser atualizado e melhorado. Muitas bibliotecas estão desatualizadas, além disso há muitas correções e alterações que adicionam tempo e atrapalham na fluidez do curso.
Wuirlen
October 3, 2022
Estou gostando muito do curso, está sendo um aprendizado incrível, também está sendo mais do que eu esperava.
Felipe
August 13, 2022
Mango é monstro!!! Muito bom mesmo. Finalmente um curso que vai além dos hello worlds que não refletem em nada os sistemas do mundo real. Indico para todo mundo por onde passo, pois vale cada centavo!
Bruno
June 3, 2022
Gostei bastante da aula e de cara consegui pegar alguns padrões que não são explicados em outros cursos
Gerson
April 11, 2022
Curso muito bom. Gosto muito da forma como Manguinho aplica o conteúdo, colocando situações reais do dia a dia de um programador mais avançado. Me chamou atenção, também, a forma como ele passa conceitos abstratos, os tornando de fácil abstração. Super recomendo para programadores de pleno pra senior. Se você for muito iniciante, sofrerá um pouco.
Itamar
January 23, 2022
O curso Clean React do Manguinho é bom, mas deixa a desejar no suporte. O professor abandonou o curso e as tecnologias estão atualizadas, o que torna o aprendizado um pouco mais difícil. É importante lembrar que se você monetiza um curso com um valor alto, é seu dever oferecer suporte adequado aos alunos. No geral, ainda é um curso útil para quem quer aprender React, mas não espere ajuda do professor. 3 estrelas.
Marcelo
January 9, 2022
Curso muito bom. O professor ensina de forma bem simples vários conceitos a padrões que são amplamente utilizados por programadores experientes em grandes projetos. Com os conhecimentos adquiridos, consegui colocar em prática nos projetos em que estou atuando, e a manutenção e qualidade dos mesmos melhorou absurdamente. Recomendo o curso para programadores já experientes e que queiram melhorar a qualidade de seus códigos.
Victor
October 5, 2021
que curso bom, não sei como consegui programar tanto tempo sem testes a parte ruim é que toda vez que vejo os código que já fiz quase choro xD
Rafael
September 22, 2020
Como eu já fiz o curso de backend do Mango, consegui pular bastante conteúdo devido a similaridade entre os dois cursos, assim dando mais ênfase as particularidades de frontend como testes, html/css e cypress. Curso top de mais, super indico para quem está saindo de júnior pra maior! Parabéns Mango, continue com essa qualidade!

Coupons

DateDiscountStatus
6/23/20225% OFF
expired

Charts

Price

ReactJS, Hooks, Recoil, TDD, Clean Architecture, SOLID - Price chart

Rating

ReactJS, Hooks, Recoil, TDD, Clean Architecture, SOLID - Ratings chart

Enrollment distribution

ReactJS, Hooks, Recoil, TDD, Clean Architecture, SOLID - Distribution chart
3093558
udemy ID
5/5/2020
course created date
5/30/2020
course indexed date
Bot
course submited by