Como aplicar SOLID no ReactJS na prática (com testes)?

Рет қаралды 6,293

3 ай бұрын

No desenvolvimento de aplicações ReactJS, o uso dos princípios SOLID, desempenha um papel crucial na construção de código modular, flexível e de fácil manutenção.
Princípios como Dependency Inversion (DIP), Single Responsibility (SRP), Interface Segregation (ISP) são essenciais para criação de componentes desacoplados, mais reutilizáveis e mais fáceis de testar. O mesmo vale para os React Hooks.
Nesse vídeo, vamos aprender como podemos aplicar conceitos avançados como DIP e o SRP, além de testes, custom hooks e muito mais.
---
🔴🔴🔴 NÃO LEIA 🔴🔴🔴
✅ Curso de Next.js 13:
hotm.art/lA0ujDcw
📷 Segue lá no Instagram:
devjunioralves
💭 Participe da nossa comunidade no Discord:
discord.com/invite/bVxW4Dhgrf
🧑‍💻 Repositório do canal:
github.com/jjunior96/dev-junior-alves-youtube
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
kzfaq.info/get/bejne/baqYn7pjrdzepHk.html
Signals no React.js?!
kzfaq.info/get/bejne/m9VhjdVqns6nXWg.html
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
kzfaq.info/get/bejne/nL6Adah838qWZpc.html
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
kzfaq.info/get/bejne/jJd9ZpyZsKvDdGw.html
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
kzfaq.info/get/bejne/pJmCaM-iq5iYl40.html
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
kzfaq.info/get/bejne/fNBlbLlepqqmlmw.html
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
kzfaq.info/get/bejne/gNlla7N72qq0d40.html
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
kzfaq.info/get/bejne/q66odpt3rZnQYWQ.html
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
kzfaq.info/get/bejne/bdN7pdVep9CuiWw.html
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
kzfaq.info/get/bejne/m9GGn8qp0J2wfI0.html
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
kzfaq.info/get/bejne/gNlla7N72qq0d40.html
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑‍💻 Blog: www.devjuniorplus.com.br
💼 LinkedIn: www.linkedin.com/in/junior-alves-b66a10127/
💻 GitHub: github.com/jjunior96
📷 Instagram: devjunioralves
👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.

Пікірлер: 48

@devjunioralves 3 ай бұрын

👉 Playlist sobre SOLID no ReactJS: kzfaq.info/get/bejne/jJd9ZpyZsKvDdGw.htmlsi=leBpuugcT1pE2ruO 👉 Playlist sobre testes no frontend com ReactJS (com hooks): kzfaq.info/get/bejne/d5t9hZhhzNewZas.htmlsi=v5BOxEE5W_t-KV22 -- 👉 Livros sensacionais pra você: Lógica de Programação e Algoritmos com JavaScript: amzn.to/48Cj65Z JavaScript: O Guia Definitivo: amzn.to/48jh9vp Como ser um programador melhor amzn.to/48WYGVj Arquitetura Limpa (Clean Arch) amzn.to/3Viqw7v Clean Code amzn.to/3hHXVKY Estruturas de dados e algoritmos com JavaScript amzn.to/49FOzFd --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

@douglasleandro7707 17 күн бұрын

O poder da abstração simples e bem utilizada, sendo mostrado na prática. Parabéns pelo vídeo! 👏👏👏👏👏

@BrunoLopese1 Ай бұрын

Eu já assisti umas 3 vezes pra entender o padrão pois é realmente muito interessante para ganhar tempo desacoplamdo o código

@devmais 8 күн бұрын

Fantástico!!!!

@eduardobertozi8506 Ай бұрын

Cara muito legal esse vídeo, estou vendo bem atrasado mas gostei bastante. Será muito bem vindo algum vídeo usando clean arch e solid no react :D

@FrancaBr. 3 ай бұрын

Que vídeo incrível, traz mais conteúdos assim, de Clean arch, dip, DDD etc

@devjunioralves 3 ай бұрын

Que massa que curtiu man, vou trazer sim!

@jsdev5362 2 ай бұрын

Cara, parabéns!

@AdeilsonTube 2 ай бұрын

Massa, manda mais

@Yuri-yu3pp 3 ай бұрын

Vídeo perfeito! Traz mais, pfvvv. Trabalho em empresa pequena, então sou meio que o líder do front, sempre passo sues vídeos p os estagiários já irem pensando em tópicos mais avançados.

@devjunioralves 3 ай бұрын

Que massa Yuri, fico feliz em estar ajudando! 👊

@alamo_DevFlow 3 ай бұрын

Muito bom, a comunidade react tá precisando de mais conteudo avançado assim

@marcusmliima 3 ай бұрын

Já utilizo bastante dos conceitos que tu disse nessa aula, inclusive ano passado participei de uma reescrita de um sistema e fiz por separação de módulos e era nessa pegada desacoplando tudo, ficou bem bacana mesmo! Curti o conteúdo e continua postando mais, sempre bom pra galera discutir, aprender e compartilhar coisas novas.

@devjunioralves 3 ай бұрын

Sensacional Marcus, se tu quiser, poderia compartilhar suas experencias com o pessoal no discord, seria incrível.

@WallisonMouraDev 2 ай бұрын

Que vídeo sensacional. Parabéns por compartilhar de seus conhecimentos conosco. Espero que traga mais conteúdo assim de Clean Arch no Front. Novamente parabéns Junior, ajuda bastante sobre essas questões de desacoplamento!

@user-ed6te3rr4z 2 ай бұрын

Show

@dyhalmeida1 3 ай бұрын

top demais, continue abordando vídeos assim, pra deixar nossos componentes o mais desacoplados possíveis 🥰

@devjunioralves 3 ай бұрын

Massa que curtiu!!!

@erikbolinha5726 3 ай бұрын

ótimo conteúdo, fez todo sentido pra neste momento.

@isaacnewton2307 3 ай бұрын

esse tipo de implementação me lembra muito o manguinho kkkk fiz o curso de clean arch e tem muito desse desacoplamento da camada de service e as pages bom demais

3 ай бұрын

Eu também fiz o curso do Manguinho e tá bem parecido mesmo, juntando esse desacoplamento com clean architecture fica uma maravilha. Muito bom o vídeo!

@atejap 3 ай бұрын

Muito bom conteudo. Vai a alem de mostrar como funciona, mas como usar a ferramenta de forma escalável.

@cleversonffaria 3 ай бұрын

Boa noite, ótima explicação. Eu penso que pra nível componente, isso faz muito sentido e deixa a gente ter um controle absoluto de tudo que esta sendo transitado nele. Porém, a nível screen vamos precisar consumir o service, não consumindo diretamente o axios, mas sim uma classe que implementa o axios para fazer as requisições. Parabéns pelo conteúdo!

@mauriciom8539 3 ай бұрын

Muito bom lelek. Pode me falar suas referências ? Por exemplo se você se baseia muito nos cursos do manguinho ou qual curso ? (não assisti nenhum de clean arch para react)

@TheVandoenterprise 3 ай бұрын

Vídeo animal! Salvo! Agora é estudar pra fazer sozinho 😅

@4Trevos 3 ай бұрын

Fala mano! Cara excelente video, essa é uma das minhas maiores dificuldades hoje, constatemente eu ficava pensando em como realizar testes de customHooks e da UI de maneira desacoplada e independente. Valeu demais!

@devjunioralves 3 ай бұрын

Que show mano! Massa que curtiu o vídeo. 👊

@rockNbrain 3 ай бұрын

Belo vídeo Junior ... parabéns 🎉

@devjunioralves 3 ай бұрын

Valeuuu!

@welingsonsantos9572 3 ай бұрын

Seu canal é muito bom, ensina coisas bem legais cara, continua! Nesse caso ai o que eu já aplicava no meu código é criar uma função chamada de, por exemplo, CreateUser, GetUser etc em uma pasta chamada services e em um arquivo chamado User.ts. O restante do que mostrou por enquanto acho complexo de entender

@devjunioralves 3 ай бұрын

Perfeito man, vai indo aos poucos pra entender o por que de utilizar assim, se ainda ta confuso/complexo, é porque provavelmente tu ainda não precisa. É super importantes irmos aprender sob demanda, pois o conteudo é muitoooo vasto.

@johan.vilela 3 ай бұрын

🤯 Caraca! Muito bom. Quero chegar nesse nível de organização.

@devjunioralves 3 ай бұрын

Que show que curtiu mano, fica muito bom de testar!

@isabellasantiago9862 Ай бұрын

traz conteúdo de clean arch !!

@devjunioralves Ай бұрын

Boa Isabella, tem uma playlist aqui no canal sobre arquitetura de software, recomendo muito dar uma olhada!

@jheanbrizadao2429 3 ай бұрын

Valeu 😊

@devjunioralves 3 ай бұрын

Valeu man 👊

@benmacario.s 3 ай бұрын

Estava dando uma olhada no seu blog, qual CMS você usa para criar os artigos? e qual lib usa para renderizar o html vindo do cms? Sei que é fora do tema do vídeo, mas gostei bastante do seu, parece ser bem dinâmico.

@MarcosPaulo-zj7mh 3 ай бұрын

Mano me responde uma coisa, nesse caso como vc tirou o axios, onde vc iria fazer a requisição da api externa? Me perdi nessa parte.

@itamarmonteiro3066 3 ай бұрын

Top! show!! 👏 Uma pergunta: Qual o nome da fonte true type e o tema que vc usa no vs code?

@jheanbrizadao2429 3 ай бұрын

🎉🎉🎉🎉🎉🎉

@BearkFearGamer 3 ай бұрын

parece mais complicado :S mas eu entendi

@felixpcll 3 ай бұрын

Eu tenho um pouco de dificuldade de justificar toda essa volta nos cenários que trabalho hoje. Em um caso onde não existem testes na aplicação de frontend, vc acha ainda assim que faze sentido implementar a inversão de dependência?

@devjunioralves 3 ай бұрын

Sim, faz sentido, porém é mais difícil pois tu não tem algo que garante que não vai gerar problemas. O que eu indicaria é, começar a criar testes, pelo menos das partes mais críticas e depois tu tem mais segurança pra refatorar.