Menu do Stripe com ReactJS | UI Clone #7

Faala dev!
Você já usou alguma lib de animação no React.js?
Nesse vídeo eu, Guilherme Rodz, reproduzi o menu animado Stripe explicando sua complexidade, do zero!
Bora assistir?
Vaaleu! 💜
Componentes mencionados: github.com/Roc...
Repositório: github.com/roc...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077

[@lucasdias1348]

Que saudades desse professor, o cara é o brabo dos clones ❤

[@viniciusuchoas8385]

Primeiros 43 segundos de vídeo e já deixei meu like! O que que é isso? A Rocketseat vai dominar o mundo um dia, TOMEM NOTA!

[@rocketseat]

Boraaaaa 🚀💜

[@jeffersonferreira43]

Ufa, foi longo mas valeu a pena. Ainda não comecei a estudar React a fundo, mas sei que você falou de muita coisa de alto nível e deu para acompanhar bem, legal que quando eu for estudar já tenho uma referência na prática, avançada e clara.

[@rocketseat]

Fala Jefferson! Valeeeu pelo feedback! 💜

[@gabrielsoares6391]

Já favoritei! Obrigado Rocketseat! Sem vocês eu não chegaria a lugar algum

[@rocketseat]

Faala Gabriel! Que honra. Conte sempre com a gente 😍💜

[@TheCEMF]

Possivelmente a aula mais complexa do canal, parabéns!

[@rocketseat]

Faala dev! Obrigadoo pelo feedback 💜💜

[@cauenolasco]

Boa Rodz, valeu por fazer o vídeo que sugeri, ficou muito absurdo, tankou izi essa Mais uma sugestão: O chat da Intercom, também é MUITO massa e desafiador Outra: Animação de login do Hotmart (ao conectar, ele sobe o formulário e por baixo dele aparece o painel, dá uma experiência muito boa)

[@rocketseat]

Fala Cauê! Valeeeu pelo feedback e sugestões 💜

[@diegogoulart159]

Já dei o LIKE adiantado!!! Lembrando que a nova versão do site do STRIPE ficou irada! (DICA: queria muito aprender a fazer aquele background animado deles). Por enquanto está disponível apenas em stripe.com

[@rocketseat]

Faala Diego! Valeu pelo feedback!! 💜

[@shugazun]

Caraca que vídeo foda, conteúdo incrível, no começo foi meio dificil mais consegui acompanhar hehe. Agradeço pelo vídeo Abraço a todos.

[@rocketseat]

Faala Nelson! Obrigado pelo feedback! Que bom que conseguiu! 💜💜

[@ViniBatatinha]

As vezes vejo esse videos e penso, cara se esse video free e dessa qualidade imagina um next level... um omnistack... ja quero garantir minha vaga para o proximo em agosto!!

[@rocketseat]

Faala Vinny! Não perca essa oportunidade não, bora pra cimaaa 💜 🚀

[@ruijose4803]

esse video é bem da hora 😃 nunca é demais aprende... e para responder a tua pergunta , sim já usei uma lib react.js de animação o GSAP

[@rocketseat]

Boaa! Valeeu Rui 💜

[@almeida.cavalcante]

Rodz é um monstro! Muito bom... certeza que vai ter curso do Rodz na plataforma

[@rocketseat]

hahahaha ele manda bem demaaaais! 💜

[@AndersonSantos-qn5ec]

esse menu é sensacional !! parabéns ! eu estou tentando utilizar ele, mas não estou conseguindo deixar ele na frente do conteúdo das paginas | já usei o z-indez mas mesmo assim o conteúdo do dropdown sempre fica para trás

[@evertonfernandes143]

Melhor quadro e o Guilherme tá mandando muito 💜💜

[@rocketseat]

Tá voando demais!! 💜🚀

[@uivuews1259]

Only English Club!!! Glad I can read the code. Also, amazing tutorial, stripe is a beautiful website!

[@rocketseat]

Thank you for your feedback 💜

[@eliseumds]

Caralho, que marretada. Mandou bem demais explicando algo bem complexo!

[@rocketseat]

Fala Eliseu! Valeeu pelo feedback 💜

[@rafaelsantana5116]

Dentre todos os conhecimentos incríveis obtidos nesta aula, o que vai ficar na minha memória, será a descoberta de que a tecla Tab, além de navegar para frente, ela volta!

[@rocketseat]

Hahahaha Valeeu Rafael! 💜

[@kaioRRR]

S E N S A C I O N A L. Parabéns mano. Como vc falou, parece simples mas vai codar pra ver. haha

[@rocketseat]

Faaaala Kaio! Valeeu pelo feedback! Só codando é que vemos a bronca hahaha 💜

Nossa quanto conteúdo!!!!! muito bom!

[@rocketseat]

Fala dev!! Valeeu pelo feedback! 💜

[@andre48250]

Simplesmente incrível. Rocketseat só conteúdo de qualidade, vlw mesmo!

[@rocketseat]

Faaala André! Obrigado pelo feedback 💜

[@victoraugustodesousaazeved5378]

Muito bom esse UI Clone, realmente um trabalho bem profissional, tão profissional que a interface ficou melhor que a original na minha opinião.

[@rocketseat]

Faaala Victor! Valeeu pelo feedback 💜💜

[@givaldoneto6738]

Absurdo!! 🤯🤯🤯

[@rocketseat]

Hahahaha seguraaa 🚀🤯

[@ronnyacacio9944]

Que massaa, melhor quadro 💜

[@rocketseat]

Valeeu pelo feedback Ronny!! 😍💜

[@ezequielpires1279]

Obrigado pelos conteúdos incríveis 👏💜

[@rocketseat]

Fala Ezequiel!! Por nada!! 💜💜

[@nathanpedro7889]

MUITO BOM!

[@natanffs]

Aeeeee. UI Clone longo!!!

[@rocketseat]

Hahahaha e bota longo nisso! 💜💜

[@marcelodasilva4502]

Sem palavras só vaiiiiii

[@rocketseat]

Bora pra cima!! 💜🚀

[@JoaoPedro-id8hi]

Dei like nos primeiros segundos já pelo video maravilhoso E pelo professor usar LINUX

[@rocketseat]

hahahaha valeeeu João !! 💜

[@AlanAugustoDev]

Seloco melhores videos 😍😍😍🥰

[@rocketseat]

Faala Alan! Obrigado pelo feedback 💜😍😍

Outra sugestão interessante de clone seria o desktop do mac OS, abrir browser por

[@rocketseat]

Opa! Valeeu pela sugestão Clóvis 💜💜

[@pedrosoares9634]

Tu sabe que eu te amo, né? VTNC Q AULA BRABA, já sei o q vou fazer nesse fds

[@pedrosoares9634]

Vou passar de sugestão essa interface completamente absurda, segue nesse link q vc vai ver. Eles utilizam React e Three.js para desenvolver moxy.studio/

[@rocketseat]

hahahahaha valeeu pelo feedback e sugestão Pedro 💜

[@stormsora5958]

Cara, que vídeo incrível!! Uma sugestão pegando ideia de um comentário: seria muito bom colocar os tópicos abordados no vídeo com o tempo na descrição para ficar com acesso mais fácil tanto clicando na descrição quanto tendo a barra de progresso visualmente dividida com os nomes dos tópicos. Vídeo SHOW!

[@rocketseat]

Faala Storm! Obrigado pelo feedback e sugestão! 💜

[@LucasSantos-fr7mh]

Muito massa.. nem acompanhei tudo mas já dá pra deixar o like.. valeu!

[@rocketseat]

Opa! Valeeu pelo feedback Lucas!! 💜

[@Halissonskalee]

Muito bom!

[@rocketseat]

Fala, Halisson! Valeeu pelo feedback 💜

[@Maskarado]

Mt bom, sei que comentei em outro video mas traz UI clones ou aulas criando sites inteiros usando diversos recursos. Como Routes e consumindo uma api com axios.

[@rocketseat]

Fala dev! Valeeu pela sugestão 💜💜

[@ricardovasconcelos5580]

Rodz é brabo!!

[@rocketseat]

Fala Ricardo! Valeeu pelo feedback 💜

[@ycarooliveira6529]

Ui Clone é sensacional com react native seria top também

[@rocketseat]

Fala Ycaro! Valeeu pela sugestão!! 💜

[@alaelciolucas6838]

Qual é o linux que você uso ? muito obrigado

[@jonasgedrat658]

Show show show, por favor poderia dizer ou fazer um vídeo do Tailwind.css, oppinião da RocketSeat etc..., eu utilizo e gostaria de saber se vale apena seguir com ele ou nao.

[@rocketseat]

Fala, Jonas! Valeeu pela sugestão!! 💜

[@altamirsantos6030]

Caraca, q menu chique

[@rocketseat]

hahaha demais né? Valeeu pelo feedback Altamir 💜

[@ianpires8582]

pra eu poder fazer esse projeto por exemplo, estou tendo dificuldades pois eu clono os aquivos e eles estao diferentes, devo excluir? devo manter? eu mesmo crio um novo arquivo? da um help pls

[@ianpires8582]

@@rodz então, eu estava tendo problemas porque eu usava o github todo manual, sem comandos no terminal, então tive que aprender e tals, mas agora estou conseguindo acompanhar aqui. mas obrigado de qualquer forma, vocês são incríveis.

[@ReinanSalazar]

Bom dia boa tarde boa noite, seguindo a aula eu fiquei com a tela branca nos navegadores nos primeiros 16:00 minutos, vamos ver daqui para frente, estou usando Windows 11 Pro, Visual Studio Code 1.70.2 sem telas de erro apresentadas

[@wesleylopex]

muito bom!!

[@rocketseat]

Faala, Wesley! Obrigado pelo feedback 💜

[@brunofontana7795]

Topzera!! go code!

[@rocketseat]

Valeeu Bruno!! 💜🚀

Like já nos primeiros segundos!

[@rocketseat]

Valeeeu José 💜

[@geancbr9687]

sabe me responder em quanto tempo a stripe paga? estou vendo a possibilidade de começar uma operação de e-commerce na gringa, mas iria precisar de giro $$ no Brasil temos o mercadopago que libera na hora, mas não serve na gringa... em quanto tempo o stripe libera a grana?

[@rocketseat]

Fala Gean! Não sabemos sobre isso 😐 💜

[@wallaceviterbino992]

Muito bom, ótimo video!

[@rocketseat]

Fala Wallace! Valeeu pelo feedback 💜💜

[@tayanmatheus8330]

Brabo dmsss

[@rocketseat]

Faala Tayan! Valeeu pelo feedback 💜

[@AndersonFaro9]

Guilherme, cara... parabéns pelo video, quero fazer um pedido: Faz um clone usando essa mesma lib, com algo que seja usado um banner animado daqueles que fica tempo em tempo passando, por favor... agradeceria... fica na paz.

[@leonardovales7637]

Podia sair uns UI Clone com React Native também hein

[@rocketseat]

Fala Leo! Valeeu pela sugestão 💜

[@voguh__]

particularmente eu parei de usar "container" apenas quando se trata do container (ava) do componente, eu passei a usar "nome do componente/pagina"Container, pq as interfaces se necessario nao fica tudo "IContainer"

[@rocketseat]

💜

[@voguh__]

@@rodz acho que uma coisa tbm que me fez mudar é que estou acostumado com o estilo Bootstrap da vida, container>row>col daí sempre que uso grid eu renomeio a "grid" para container kkkk

[@Patinhow100]

Alguém sabe me dizer de onde ele tiro uessa função temp1? Não conseguir entender essa parte. Aos 59:19.

[@Patinhow100]

@@rodz Muito obrigado pela atenção, Rodz! Abraços, meu nobre.

[@junangameplays3271]

shift + alt e clicka pra cima ou pra baixo para copiar a linha toda

[@rocketseat]

Boaa Junan!! 💜

[@allisondealmeida]

Como eu faço pra estilizar o placeholder de um input do tipo date?

[@rocketseat]

Faala, Allison! Você conhece nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas que tiver :purple_heart::purple_heart::purple_heart: Segue o link: www.rocketseat.com.br/comunidade

[@mastertmplayer]

Só queria um tutorialzin pra deixar a distro com essa aparência linda...

[@JoaoPedro-id8hi]

cara tu pode remover os icones da área de trabalho, instalar o pacote do material icon theme na pasta .icons e instalar essa dock que é chamada de Plank. Quando usava Linux Mint, usava exatamente essa aparencia kk

[@mastertmplayer]

@@JoaoPedro-id8hi e o esquema dos botoes de maximizar e tals parecidos com mac? sabe como faz?

[@JoaoPedro-id8hi]

@@mastertmplayer Sei sim. Se tu quer deixar parecido com o Mac, baixa o La Capitaine Icon Theme e bota na .icons, aí tu baixa o Mac OSX Theme pra GTK3 e bota ele na .themes. Pra mudar eles pro lado esquerdo eu não lembro agora, mas nas configurações e fácil achar

[@mastertmplayer]

@@JoaoPedro-id8hi vlw msm, to com windows 10 aqui mas com vontade tremenda de voltar pro linux mais uma vez, so n volto por causa dos programas da adobe q sou familiarizado

[@rocketseat]

Boa João!! 💜

[@limazia]

Faz um vídeo sobre React Loading Skeleton

[@rocketseat]

Opa! Valeeu pela sugestão Limazia! 💜

[@gustavocandido9662]

Pera como vc tá usando esse auto indent sem ter configurado eslint?

[@rocketseat]

Faala Gustavo! Você pode usar o Format Document do próprio VSCode. Dependendo do seu sistema o atalho pode ser diferente, mas buscando lá em Preferences > Shortcuts você pode pesquisar por "Format Document" no seu 💜

[@idlucassanti]

Seria interessante menu mobile também.

[@rocketseat]

No caso do mobile entram outros aspectos de usabilidade que um menu como esse talvez não faria tanto sentido Lucas. Mas vamos tentar trazer mais conteúdos sobre mobile e animações 💜

[@cedrio1027]

to tentando cria um questionário com 10 perguntas e 5 opções de escolha com react, ta bem complicado se pudesse fazer um exercicio mostrando como se faz ia se bacana, como salva e atualiza essas informações etc

[@cleitonbugs]

opa, é só procurar como funciona um post com comentários, tá cheio na web, cria um objeto Pergunta e outro chamado Resposta (com o pergunta_id) dentro. Qdo vc inicializa e instancia.. Caso orientação a objeto seja um pouco complexo, vc pode botar a pergunta em uma ul e nas lis, vc coloca pergunta.respostas[0], pergunta.respostas[1], ..., pergunta.respostas[4]. abs

[@rocketseat]

Faala, Cedrio! Você conhece nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas que tiver 💜💜💜 Segue o link: www.rocketseat.com.br/comunidade

[@cleitonbugs]

@@rocketseat o loko, deu overlap na minha resposta

[@cedrio1027]

@@cleitonbugs fiquei full foco e esqueci de volta aqui pra ve se responderam, acabei resolvendo sozinho, mas obrigado pela ajuda de qualquer forma rapaziada (3 dias kkk)

[@alaelciolucas6838]

olá, faz um clone do site nação rubro-negra com reactjs para vender plano de socio-torcedo pode ser de outro club ...muito obrigado vlw!!

[@andrecoelho2775]

code . também funciona no windows

[@rocketseat]

Boa André! 💜

[@bacplayer5700]

Não sei

[@27lucaslol]

Rapaz, use framer motion em tudo que vier!!

[@rocketseat]

Hahahah né 💜

[@PauloRicardo-dk6yf]

Nossa!!! Eu doente e pensando em ligar o pc agora. Rsrs!!!

[@rocketseat]

E aí, já fez ? hahaha 💜

[@iagoqueiroz1904]

Dá pra reproduzir pelo codesandbox.io/ ?

[@rocketseat]

💜

[@leto5055]

Que história é essa de fim da Rocketseat?

[@luizgoncalves1421]

É um fim, para um novo começo. Leia o email com mais atenção e vai perceber.

[@leto5055]

@@luizgoncalves1421 Eu li, e acabei percebendo. Obrigado! :)

[@rocketseat]

É apenas o fim do que vocês conhecem como Rocketseat. Traremos muitaaaas novidades em breve. Não posso dar spoilers 👀 💜

[@rogeriomq]

A fala agoniada do Rodz em alguns momentos é comédia viu. rsrsrsrsr, sei como é., a mente mais a frente do que os dedos... rsrsrsrssr

[@rocketseat]

hahahaha 💜

[@antoniocosta7565]

Eu tô numa procrastinação de aprender js💔💔💔😪

[@rocketseat]

Pare com isso rapaz!! Já se inscreveu na NLW? 💜 nextlevelweek.com

[@fernandoantonio2]

Só um adendo, Hidden se fala 'Hídden' e não 'Háidden'

[@rocketseat]

💜

[@luiquecruz]

achei que só eu estava agoniado com iss haha

[@MazeGamer]

Clona a interface do Facebook

[@rocketseat]

Fala Paulo! Valeeu pela sugestão 💜

[@gabriellmatias7203]

KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK SE NAO FICOU CLARO, ME DESCULPE ALKSDJALKSJDALKSDJALSKDJ

[@almeida96]

Volta com typescript!

[@The96tiago]

muito complexo slk