#draganddrop #imagepreview #react

Mais um projetinho bem bacana para melhorar a usabilidade do seu site. Dessa vez eu vou ensinar o Drag and Drop, também conhecido como Arrastar e Soltar e tudo isso feito usando JavaScript com a biblioteca React.

E não só o Drag and Drop, como também um preview de imagens, para que o usuário possa visualizar as imagens logo após arrastá-las para o site.

Um projeto bem bacana mesmo e que se você colocar no portfolio com certeza ganhará uns pontos com os recrutadores.

Espero que gostem!

Esse video tem fins educativos.

=========

Link Secreto:

❓❓ https://emersonbroga.com/secret❓❓

✅ Tenho um curso de JavaScript do básico ao avançado. http://emersonbroga.com/js

✅ Tenho também um livro sobre ES6, chamado JavaScript: As Novidades do ES6 http://emersonbroga.com/es6

✅ Livro Sobre ES6 Gratuito no Kindle: https://amzn.to/3iE4lIF

✅ E em breve vou abrir mais uma turma do meu curso de React e NodeJS http://emersonbroga.com/react

✅ Video: Carrossel com React https://www.youtube.com/watch?v=cX0N3TNxumw

✅ Video: Upload de imagens com a FETCH API do JavaScript! https://www.youtube.com/watch?v=5RUgDRZjmjA

✅ Video: Alterando respostas da API com Charles Proxy https://youtu.be/AhKy8dSXia4

✅ Video: Busca Instantânea com React https://youtu.be/3vmL_y9CxI8

✅ Video: Dropdown de Cidade e estado https://youtu.be/Aca6mAXi0j4

✅ Video: Como ordenar arrays no JavaScript! https://www.youtube.com/watch?v=JxdsTHdgqAU

✅ Video: Como funciona o useEffect? https://www.youtube.com/watch?v=ehtB6ynyIlU

✅ Video: Usando a FETCH API do JavaScript https://youtu.be/v9JVA6tVmcg

✅ Repositorio do Projeto https://github.com/emersonbroga/drag-and-drop-image-preview/

✅ Download dos assets https://github.com/emersonbroga/drag-and-drop-image-preview/raw/main/photography-group.zip

========= Time Stamps:

00:00 Intro 00:21 Apresentação 01:09 Criando a estrutura inicial (JSX/HTML) 07:27 Estilizando o projeto (CSS) 14:20 Implementando o Drag and Drop (arrastar e soltar) 19:35 Preview de imagens com URL.createObjectURL 26:40 Preview de imagens com FileReader 32:37 Finalização

=========

Acompanhe @emersonbrogadev nas redes sociais e aprenda mais sobre JavaScript/Node/React!

➜ Veja as dicas no Instagram 📸: https://emersonbroga.com/instagram

➜ Assista nosso canal no Youtube 📺 : https://emersonbroga.com/youtube

➜ Curta nossa página no Facebook 👍 : https://emersonbroga.com/facebook

➜ Não perca as atualizações no Twitter 🐦 : https://emersonbroga.com/twitter

➜ Siga nossos repositórios no Github ⌨️: https://emersonbroga.com/github

==========

Sobre Emerson Broga Dev (@emersonbrogadev):

Programador há mais de 15 anos, sou formado em Desenvolvimento de Sistemas pela Faculdade Pitágoras e pós-graduado em Gestão Estratégica de Marketing pela PUC Minas. Trabalhei em diversas agências de publicidade e desenvolvimento de software e atualmente trabalho em projetos internacionais como FOX.com, FXNetworks.com, NatGeo.com entre outros. Estou atualmente dedicando meu tempo a ensinar programação em meu blog e redes sociais. Saiba mais em http://bit.ly/2yFCqR1

========== Agradeço a sua atenção e lhe parabenizo pelo interesse em aprender \o/

draganddrop imagepreview preview imagens arrastar soltar drag drop react demo projeto css javascript react frontend programador dev soudev broga ... https://www.youtube.com/watch?v=G2LrfXwJIm0