19 сағат бұрын
14 күн бұрын
14 күн бұрын
Ай бұрын
2 ай бұрын
3 ай бұрын
3 ай бұрын
Пікірлер
@joezersmaniotto3103 19 сағат бұрын
Muito bom!
@joezersmaniotto3103 Күн бұрын
Se possível faça o vídeo sobre o virtual dom
@joezersmaniotto3103 Күн бұрын
Poderia fazer um vídeo falando sobre o HOCs e Hooks para mesmos compoents ? Como ficaria com um HOC e com Hooks ?
@yuriadriel43 Күн бұрын
Passa aí o tema q vc usa e configs do vscode
@samuelaraujo9099 Күн бұрын
O segredo é usar um useCallback, e resolvido! ~contém ironia
@monetizacao2119 Күн бұрын
Mano, e validação de imagem? Sempre que chego em um formulário de usuário. Uso as validações utilizando estados e TS puro. N tenho ideia de como validar imagem com zod
@silasbispo01 Күн бұрын
faltou codigo
@devjunioralves Күн бұрын
Não queria focar em código nesse vídeo kkkk Mas tem vários sobre SOLID com código man, recomendo muito tu assistir
@celconeto8340 Күн бұрын
Grande Junior, Eu confesso que eu era um desses! Acreditar que SRP era apenas funções/classes pequenas. Excelente explicação.
@devjunioralves Күн бұрын
Valeuuu demais meu querido! 👊
@guzz_7082 Күн бұрын
A Ideia é legal e tals Mas falar tudo isso e não demonstrar isso em um exemplo é um pouco paia 😔 Seria muito interessante com exemplo
@devjunioralves Күн бұрын
A ideia do vídeo era focar no conceito, mas aqui no canal tem uma playlist sobre SOLID + código, confere lá, tu vai curtir.
@danilochgs Күн бұрын
Trás mais sim mas seria bom você fazer algum exemplo no código pra visualização! Valeu
@devjunioralves Күн бұрын
Valeu Danilo! Vou fazer sim!
@devjunioralves Күн бұрын
👉 Livros importantes: 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
@maycondouglas3179 Күн бұрын
Junior, no next qual seria a melhor forma de fazer uma paginação ? Usando a URL para fazer a comunicação entre os componentes(como na hr da paginação e busca) mas aí a cada vez que mudar a url a página completa será renderizada correto ? Ou a melhor maneira seria usando um contextAPI ?
@vyvissouza4727 2 күн бұрын
Que plugin maneiro é esse ? Que já vai mostrando os erros?
@ClodoaldoBrito-wn9ip 3 күн бұрын
Man como é que eu faria pra ele considerar só o layout da minha página details ? por que ele pega o layout da page principal aí acanha meu designer, tipo ele junta os 2
@v1cferr 4 күн бұрын
Um tema que ganhou meu coração tanto no VSCode quanto em qualquer outro software é o TokyoNight. Com cores foscas e muito clean.
@Jean-wj4tn 4 күн бұрын
Boa noite, gostaria de trazer um ponto. Na documentação do React na parte "Render and Commit" diz que só existem 2 situações pra um componente renderizar: 1 - É a primeira renderização do componente (acionado pelo método render do nó root do ReactDOM) 2 - Quando o estado de um componente ou o estado de um ancestral muda. Caso um componente fosse renderizado novamente quando uma prop muda, então não haveria necessidade de usar um estado para manter valores entre renderização, pois os componentes filhos sempre iriam refletir as novas props passadas. Um componente só vai renderizar novamente (se essa não for a renderização inicial) caso o estado de um pai na árvore for alterado.
@alanmarinho13 5 күн бұрын
Possivelmente é por isso que n está atualizando certo o estado authUser na minha função para verificar se meu meu usuário está autenticado quando ele entra no app (estou chamando um loadAuthStatus que tem uma pá de setState dentro de um useEffect)🤡
@devjunioralves 4 күн бұрын
Kkkkkk não faça isso, pois debugar nessas situações é quase impossível.
@Sr.zangao 5 күн бұрын
Qual é seu tema?❤❤
@user-xp6wf8kk3p 5 күн бұрын
Não seria a mesma coisa retirar o useState que está recebendo as props e mandala direto no value? value={name} e value={username}?
@devjunioralves 5 күн бұрын
Nesse caso sim, mas em uma situação que precise atualizar esses valores, aí seria necessário algo a mais, como um useState, ou passar essas informações para um hook form e etc
@LucasRodrigues-vs5qj 5 күн бұрын
Cara, que video excelente. Passando para agradecer por ter me ajudado a construir algo tão importante para um projeto. Consegui implementar e ficou show!
@devjunioralves 4 күн бұрын
Que massa Lucas! Valeu demais pelo comentário 👊
@andersonsr.poliglota868 6 күн бұрын
Bacana, em
@devjunioralves 4 күн бұрын
Valeuuu 👊
@andersonsr.poliglota868 6 күн бұрын
Muito legal teu conteúdo
@devjunioralves 4 күн бұрын
Valeu demais Anderson!!!
@artur-bb6js 6 күн бұрын
Que dica Sensacional, estava com dúvida, já tive esse mesmo problema criando meu formulário com react, agora consigo resolver meu problema, ótima solução, parabéns
@devjunioralves 4 күн бұрын
Que show Artur! Fico feliz em ter ajudado 👊
@victorhugorosafonseca3243 6 күн бұрын
fazendo dessa forma eu ainda preciso do onChange? Coloca um console log qndo submeter o formulario pra ver o que chega
@eduardooliveira5257 6 күн бұрын
se o useState tá no topo do componente faz sentido ele ser executado primeiro
@devjunioralves 4 күн бұрын
Não necessariamente, o useState poderia ter sido declarado depois de funções que funcionaria.
@EliabyTeixeira 6 күн бұрын
Muito bom!!
@Tomita84 6 күн бұрын
Duvida: pra esse caso (x, y : Props), ok ... Mas e se for um (account, person : UserAccounts), também funciona ?? Teria alguma implementação diferente qdo puxa um tipo externo ?
@jheanbrizadao2429 6 күн бұрын
valeu, man
@IgorAlves15 6 күн бұрын
Eu não entendi o pq de passar uma função para o useState sendo que useState({name, username}) também funciona.
@versaleyoutubevanced8647 6 күн бұрын
porque ele aprendeu isso recentemente e quer usar em tudo, é normal todo mundo tem essa fase
@devjunioralves 4 күн бұрын
Sim Igor, é só uma opção a mais, eu acho legal mostrar formas diferentes, mas não significa que deva sempre usar. @versaleyoutubevanced8647 Sim claro, tem vídeo de 2 anos atrás aqui no canal falando disso 👍
@IgorAlves15 Күн бұрын
@@devjunioralves entendi, valeu pelo retorno.
@silvanopimentel7270 6 күн бұрын
Mas os Lazy Initializers não executam apenas na etapa de montagem do componente? E quando se fala sobre re-renderizar não estamos falando da etapa de atualização do componente? Então como é possível os dados contidos em data estarem sempre atualizados?
@CarlosSilva-hy8xt 6 күн бұрын
o estado altera, a prop passada vai ser alterada, então o componente que recebeu a prop entra em estado de montagem novamente e executa a atualização de estado.
@silvanopimentel7270 6 күн бұрын
@@CarlosSilva-hy8xt Acredito que estou fazendo algo errado então, pois realizando alguns testes, quando eu alterado a prop passada, o estado interno do componente não é atualizado, poderia me dizer o que há de errado com o código a seguir? Quando eu clico no botão de atualizar o nome apenas o estado do componente pai (App) é alterado, não sendo refletido no filho (Component). import React from 'react'; export function App(props) { const [user, setUser] = React.useState({ name: 'Teste', username: 'teste123', password: '321' }); return ( <div className='App'> <pre>{JSON.stringify(user)}</pre> <Component name={user.name} username={user.username} /> <button onClick={() => setUser({ ...user, name: 'Novo' })}>Alterar nome</button> </div> ); } export function Component({ name, username }) { const [data, setData] = React.useState(() => ({ name, username })); return ( <div> <pre>{JSON.stringify(data)}</pre> </div> ); }
@IgorAlves15 6 күн бұрын
@@CarlosSilva-hy8xt Eu fiz um teste aqui colocando um input no pai para alterar o estado de um campo que vai ser passado como prop. Quando eu atribuo essa prop ao estado do filho, ao montar é utilizado as informações que vieram da prop. Porém se eu mudar o estado do pai, o estado do filho não é alterado. Da uma olhada no exemplo: ``` import { useState } from 'react' type User = { name: string idade: number } type TesteProps = { idade: number name: string } export function Teste({ idade, name }: TesteProps) { const [state, setState] = useState<User>({ name, idade }) return ( <div> <h1> Pai - {name} - {idade} {state.name} - {state.idade} </h1> <button onClick={() => setState((user) => ({ ...user }))}> Alterar idade </button> </div> ) } ``` ``` import { useState } from 'react' import { Teste } from './Teste' export function Teste02() { const [name, setName] = useState('Igor') return ( <div> <input value={name} onChange={(event) => setName(event.target.value)} /> <Teste name={name} idade={23} /> </div> ) } ```
@silvanopimentel7270 6 күн бұрын
@@CarlosSilva-hy8xt Acredito que estou fazendo algo errado então, fiz alguns testes e esse valor não atualizava, pode me dizer qual o problema do código a seguir? Quando clico no botão ele apenas atualiza o estado do componente pai (App), mas o estado do componente (Component) não é alterado: import React from 'react'; export function App(props) { const [user, setUser] = React.useState(() => ({ user: 'Teste', email: '[email protected]', password: '1234' })); return ( <div className='App'> <pre>{JSON.stringify(user)}</pre> <Component name={user.name} email={userm} /> <button onClick={() => setUser({ ...user, name: 'Novo' }}>Alterar nome</button> </div> ); } export function Component({ user, password }) { const [data] = React.useState(() => ({ user, password })); return ( <pre>{JSON.stringify(data)}</pre> ); }
@silvanopimentel7270 6 күн бұрын
@@CarlosSilva-hy8xt Não sei se os outros comentários apareceram ai, enviei duas vezes porem não esta mostrando aqui, mas durante os testes que fiz, quando um componente pai tem um estado e passa ele como props para um componente filho, e nesse componente filho se utiliza essas props como valores do estado, mesmo com o lazy initializer o estado do componente filho não é atualizado junto do estado do componente pai, não sei se estou fazendo algo errado e por isso não atualizou, tentei enviar o código mas os comentários não estão aparecendo
@MordyDeep 6 күн бұрын
então resumindo: 1- Quando o componente é montado, primeiro de tudo é carregado os estados, depois os efeitos colaterais. 2- se eu precisa receber alguns dados que vem de por exemplo uma requisição fetch... é melhor jogar essa função fetch dentro do useState e retornar o valor. Ao invés de fazer isso dentro de um useEffect e dps jogar o valor em um useState, seria como dar uma volta "desnecessária"? peguei o código? KK
@MordyDeep 6 күн бұрын
como os estados vem antes da renderização, nesse caso os dados já estariam em tela quando o componente ser montado? 1 - isso faria a primeira renderização ficar travada em uma promessa por exemplo? se sim, então dependendo da quantidade de dados faz mais sentido continuar buscando no useEffect dps que a tela já é montada ( pela UX) ?
@MordyDeep 6 күн бұрын
pra resolver este problema eu preciso usar o padrão de fazer a requisição no componente pai e passar como props pro componente filho que seta essas props em um useState(() => {props})? Isso se for fazer alguma possível manipulação de estado, caso contrario nem precisa do useState, já que se as props alterarem através do componente pai, o filho também é re-renderizado, correto?
@marcelo55850 6 күн бұрын
caso eu tenha minha pagina que faz uma req e eu uso os dados dessa req em 1 dos meus 5 componentes que a pagina renderiza. eu preciso usar esses dados em apenas 1 dos componentes, como evito a renderização desnecessaria dos outros 4 ?
@emersonsilva7118 6 күн бұрын
Faz a requisição dentro do componente específico
@devjunioralves 6 күн бұрын
Uma solução é como o Emerson disse. Outra solução, poderia utilizar o compound pattern, onde você vai compondo seus componentes via props. Tem vídeo aqui no canal sobre, vale a conferida!
@TTX8000 6 күн бұрын
ótimo vídeo 👏🏻 pfvr, continue trazendo vídeos mais teóricos sobre o reactjs... tem sido muito bom
@devjunioralves 6 күн бұрын
Valeu demais, vou continuar sim! 👊
@devjunioralves 6 күн бұрын
📚 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
@manaurevasconcelos5381 6 күн бұрын
fala mano bom dia!! por acaso teria esse repositorio no github? gostaria de ver um pouco o layout e o funcionamento da sidebar, to desenvolvendo um app e queria tirar essa duvida. abraço, conteudo top
@valeriopro228 7 күн бұрын
Então o useEffect é mais para funções assíncronas 👍
@maycondouglas3179 7 күн бұрын
E se por acaso o meu não funcionar mesmo eu fazendo dessa maneira do vídeo, há alguma hipótese para n funcionar ?
@estevanulian 7 күн бұрын
Fala Junior, td certo? Numa situação onde seja necessário fazer uma requisição HTTP e atualizar o estado, não tem como fugir do useEffect, certo?
@devjunioralves 7 күн бұрын
Opa, tudo certo e você? Nesse caso, seria interessante fazer a requisição em um componente ancestral e passar essa informação via prop, daí tu poderia seguir como no vídeo.
@sonhar122 7 күн бұрын
top! faz uns vídeos sobre organização do codigo/pastas dependendo do tipo de projeto xD. tipo se for um projeto que vai escalar, um projeto simples ou complexo. Sempre fico na duvida de quais pastas criar para separar cada tipo de coisa kkkk
@leonardo4m 7 күн бұрын
como faz um input que nao pode dar espaço?
@reicariri 8 күн бұрын
É muita, mas muita gente que usa React sem saber desse ciclo. Muito bom.
@devjunioralves 8 күн бұрын
Exatamente, o que pode gerar muitos comportamentos inesperados! Valeu demais 👊
@silvanopimentel7270 8 күн бұрын
Uma dúvida, neste código, teria como evitar o uso do useEffect, tentei sem ele mas o valor de data sempre é diferente do valor de user? // useLoadData.js export function useLoadData() { const [user, setUser] = useState(); const [isLoading, setIsLoading] = useState(true); useEffect(() => { async function load() { await new Promise(resolve => setTimeout(resolve, 3000)); setUser({ name: user-${Math.random() * 1000}, password: ${1000 + Math.random() * 1000}${ 1000 + Math.random() * 1000 }, }); setIsLoading(false); } if (isLoading) { load(); } }, [isLoading]); const refetch = useCallback(() => { setIsLoading(true); }, []); return { user, isLoading, refetch }; } // App.js export function App(props) { const userQuery = useLoadData(); return ( <div className='App'> <Component isLoading={userQuery.isLoading} user={userQuery.user} /> </div> ); } // Component.js export function Component({ isLoading, user }) { const [data, setData] = useState({ name: user?.name, password: user?.password, }); function handleInputChange(event) { setData(data => ({ ...data, [event.target.name]: event.target.value, })); } return ( <div className='form'> <input name='name' placeholder={isLoading ? 'Carregando...' : 'Nome'} value={data?.name} onChange={handleInputChange} /> <input name='password' placeholder={isLoading ? 'Carregando...' : 'Senha'} value={data?.password} onChange={handleInputChange} /> <button>Login</button> </div> ); }
@websterrafael8978 8 күн бұрын
Salve, otimo video, pode me dizer o nome desse servidor q vc usa do lado do código? ?
@devjunioralves 8 күн бұрын
É um browser simples, chama Min. Valeu man 👊
@JetroBernardodeSousaJunior 8 күн бұрын
Eu nunca deixo comentários, mas dessa vez preciso deixar meu muito obrigado!
@devjunioralves 8 күн бұрын
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
@narcisoribas1818 9 күн бұрын
Conteúdo muito bom, agora surgiu uma dúvida, utilizando rotas dinâmicas, como fica a questão da guarda de rotas, ou melhor rotas autenticadas?
@rafaelponciano7257 9 күн бұрын
Salve, bom o video... Voce consegue confirmar uma coisa p/ gente ? Se nao me engano nao é indicado/ideial voce usar o mesmo state dentro do seu setState.. O setState recebe o valor atual dele como callback No caso setData(old => {...old, key: value}) Se eu estiver correto, acho que conseguimos melhorar ainda mais esse codigo ai.. mas nao tenho ctz.. Eu conheco isso pois ja tive problema em sistemas complexos em usar o state dentro do setstate...
@werllentrindade7616 9 күн бұрын
Sensacional
@devmais 10 күн бұрын
Fantástico!!!!