O que estudar antes de tentar aprender um Framework JavaScript? (React, Angular, Vue)

Nesse vídeo, vamos fazer um mini render com JavaScript puro na unha, passando pelas principais ideias que os frameworks trabalham enquanto vemos features super importantes do JavaScript pra conseguir trabalhar com outras ferramentas depois.
Muitas pessoas trabalham com frameworks JavaScript sem saber absurdamente sobre a linguagem, será que isso é possível mesmo? Nesse vídeo eu tento trazer alguns pontos importantes de consolidar antes de tentar ir pra algum framework e que se você for, eu tenho certeza que boa parte das coisas vão ficar bem mais claras ou você vai ter um olhar mais clínico pra saber onde voltar a estudar pra poder seguir em frente.
🔸 Imersão React da Alura \o/ (feat. Euzinho)
■ www.alura.com....
🔸 Canal do Front in Sampa (feat. Euzinho)
■ / @frontintech
🔸 Tópicos importantes pra estudar sobre JavaScript:
■ Formação de Front End da Alura : www.alura.com.... (Vejam os posts e ouçam todos os podcasts, ahh e olhem as ementas!!!)
■ Estruturas de dados: www.amazon.com...
■ Template String: Manipulação de string no geral (Regex é um plus)
■ Arrays: Spread, Conversão de arrays para outros tipos
■ Objetos: Manipulação de objetos, destructuring, import e export no JavaScript
■ Funções: Arrow function, escopos...
■ Callbacks: Eventos como o onclick que vimos no vídeo, procura por addEventListener e fica de olho nos próximos vídeos aqui do canal falando só sobre isso :)
🔸Quer ver mais conteúdos meus? Segue ai!
■ / omariosouto
■ / omariosouto
■ t.me/hipstersf...
🔸Sabia que eu tenho séries na Alura também?
■ www.alura.com....
■ www.alura.com....

[@DevSoutinho]

🔸🔸🔸Links super importantes do vídeo: 🔸🔸🔸 🔸 Imersão React da Alura \o/ (feat. Euzinho) É GRATUIIITOOO!! ■ www.alura.com.br/imersao-react/ 🔸 Canal do Front in Sampa (feat. Euzinho) É GRATUIIITOOO TAMBÉM!!! ■ kzbin.info/door/woGd_KU0OxiVT5r-rPrzWA

[@debora468]

Poderiam criar uma nova imersão imersao com React Next e Lottie :D eu amei essa imersão react de vocês foi top demais.

[@ErickWendelAcademy]

Ja cheguei no like!!

[@DevSoutinho]

E eu também!!! segura o love comment tbm hahaha

[@diogozura]

ganhou meu coração no min 16:15 , eu uso muito essa "tá funfando?"

[@investidorint]

Porque tela tem $ antes?

[@econodev]

é por causa de vídeos como esse que logo logo esse canal vai bater os 100k de inscritos.

[@DevSoutinho]

muito obrigado! Féee hahaha

[@fernandooliveira9641]

To estudando Javascript faz um mês. Teus vídeos tem ajudado muito! Vlw mesmo!!! /,,/

[@DevSoutinho]

Booooa!!!! Valeu por compartilhar que ta curtindo \o/

[@adrianobaza]

Muito bom. Dicas super interessantes para mim que estou iniciando no mundo dev.

[@marlene-moraes]

12:27 parece eu reagindo ao JS Obrigada pelo vídeo! Me ajudou demais a entender o que eu preciso na linguagem pra encarar o Angular de vez

[@bilupatu]

Vamos Simbora! Vamos lá! Estou iniciando!

[@crislulucisquinho]

Você fala mais rápido que eu... 😄😄 Tive que colocar na velocidade de exibição 0,75 pra acompanhar ... Ainda tenho pouco conhecimento mas estou avançando em javascript .... css e HTML... tô fazendo os cursos da Alura...Vou fazer a próxima imersão que vai ter de react...pois logo após terminar o que estou fazendo irei fazer a formação em react.... Espero que eu consiga acompanhar com o conhecimento que tenho.... obrigada pelas explicações...

[@DevSoutinho]

Ahahaha tamo junto! Sucesso na jornada. Fico feliz de saber que vai participar nos vemos lá 😁

[@guilhermelima4594]

Esse foi um dos melhores vídeos sobre js que eu já assisti. Obrigado, Mario !

[@GuilhermeTeixeira]

Não sei como demorei tanto tempo pra descobrir esse canal maravilhoso! Você é fodaaaaaaaaa

[@DevSoutinho]

sauhsahusa po seja bem vindo, que honra de elogio, espeero que curta os outros vídeos \o/

[@GuilhermeTeixeira]

@@DevSoutinho Acabei de sair da Imersão React animadaço! Vou assistir todos!!! Hahaha Valeu!

[@Marujhin]

Quem quiser exercitar isso que o Mario fez, criar um To-do list, com opção de adicionar e deletar itens é um bom treino

[@sergiolc_]

eu fiz uma, foi bem divertido fazer

[@claudiakruger]

Estou iniciando, mas foi bem legal ver o que me aguarda no futuro próximo.

[@DevSoutinho]

que bom que curtiu \o

[@ProgramadorABordo]

Estamos fazendo código Vanilla bem parecidos, Mario! Hahaa essa mentalidade entranhada de já fazer pensando em componentes, separando o estado e tentando simular a reatividade dos componentes! :) As complexidades começam a acontecer a partir do ponto que parou: gerenciar os eventos, fazer um sistema de componentes reativos mais escalavel, manipular dom com a API de dom e não somente string, conversa entre componentes, etc. :P coisas que essas libs no geral resolvem muito bem! Sem contar a parte de gerenciamento de estado. Ainda dá pra fazer algo maior com Vanilla dessa forma pensando em alguns patterns como observer, mediator, factory, facade... Talvez adicionar uma lib pra ajudar com o DOM como RE:ROM e Incremental DOM.. Enfim, parabéns pelo vídeo! Fico feliz de ver conteúdo mais raiz no KZbin e não só Nutela :)

[@DevSoutinho]

Booooa valeuzao mano!!! Desde quando eu dava os cursos na Caelum (Se não me engano lembro de ti em uma turma lá globo.com) eu sempre tentava deixar essa parte clara, pq é o que faz mt gente achar que as bibliotecas fazem magia, a meta é abordar esses tópicos mais avançados na série lá refazendo o React, o vídeo ta no forno ainda acabei quebrando o speedrun pq se não ia dar mt tempo sahusauh. Pra esse aqui a ideia foi bem essa, mostrar o começo com o que a pessoa precisa estudar pra conseguir sofrer menos depois :)

[@ProgramadorABordo]

@@DevSoutinho também lembro de você lá na globo.com haha e também no braziljs 2018! Muito bom! A proposta que você trouxe para reconstruir o React foi bem interessante tbm! Já pensei em trazer vídeos assim mas iria ir debugando o código hehe Eu tenho muito essa pegada também sobre oq aprender antes dos fw, foi assim que surgiu meu curso JS Raiz e tbm trago isso no meu canal tbm com os vídeos (oq precisa pra aprender redux, angular... Vue). Acho um excelente tema pra gente fazer um collab qlqr dia ein ;)

[@DevSoutinho]

Caara, me chama pelo face ou twitter bora combinar \oo

[@allangoulart2811]

Excelente didática Soutinho.

[@DevSoutinho]

Vaaaleu mano!!!

[@mateusrocha6993]

Parabéns, muito bom o jeito que vc começa a resolver o problema de um jeito simples e vai avançando, muito bom , você poderia falar sobre isso, como você destrincha o problema em partes e vai caminhando até chegar a conclusão.

[@DevSoutinho]

Opa! Cara eu aprendi isso no treinamento de instrutor da Caelum e da Alura :) Mas posso fazer um vídeo sobre sim, na real da até pra analisar meus vídeos e ver que sempre tem um padrãozinho, que inclusive reflete muito sobre como eu trabalho nas tarefas do meu dia a dia e tal \o

[@joaooliveira8601]

Simples mas MUITO útil

[@DevSoutinho]

Valeuzao pelo feedback

[@joaooliveira8601]

@@DevSoutinho que isso, voce é foda. qualidade altíssima seu conteúdo. que seu canal voeee

[@plataformameugym]

Venho do Java e estou começando a tentar melhorar meu Javascript, parabéns pelo canal e didática é excelente! Sucessos!

[@DevSoutinho]

Muuito obrigado!!!

[@CarlosEduardoFSouza]

Disponibiliza o código!!! please

[@pauloamigoni]

cara .... vi tu na Frontend week .... vc manda mto bem... poxa e ainda ganhei um curso por 3 meses da Alura.... imersão já inscrito também..... valew

[@DevSoutinho]

Aeeeeee nos vemos na imersão!!!

[@lucasoliveirapereiradasilv7003]

Essas criações básicas de manipulação direta de js no html é bem legal, além de ser uma excelente porta de entrada pra stack js, parabéns pelo trabalho

[@DevSoutinho]

Siiiiim!!! A meta é justamente essa, valeu cara!

[@Marlon.Moretti]

Brabo demais

[@adriannos9516]

Opa, beleza? cara, já programo a um tempo WEB em PHP, estou a pouco tempo pegando um pouco de react, uma dúvida que eu tenho é sobre criar os métodos usando " const nomeDoMetodo = () => { }" e "nomeDOMetodo() { }" o que muda entre as duas formas na funcionalidade em sí?? Única diferença que eu notei na prática foi no contexto "this" caso for uma classe/componente de classe, no mais gostaria de entender melhor

[@DevSoutinho]

Cara isso por si só rende um vídeo... vou ficar devendo aqui, mas vou organizar algo em vídeo pra trazer! Por hora, da uma olhada aqui: www.bookstack.cn/read/ES6Beyond/spilt.7.ch2.md

[@thiagoras]

13:10 qual o nome e como faço pra usar essa edição de multi-linha?

[@allendaniel1330]

Faz um vídeo ensinando configurar VScode?

[@DevSoutinho]

Opa não precisa de muito setup não! Tem um vídeo aqui sobre minhas extensões do VScode acho que por elas já da pra ver o que eu uso diferebte /o

[@gustavoseabra7495]

Nunca vi vídeos tão explicativos como o seu!! Conhecendo agora o canal conteúdo MT bom

[@DevSoutinho]

Haaaaaa, muito obrigado!!!! fico bem feliz com esses feedbacks fica de olho que tem mt mais vindo!

[@laonyegardien1433]

Sei que to um pouquinho atrasada, mas ainda assim: > Não seria mais fácil ter passado para o onlick o índice do elemento, para quando for carregar a handleLike realizar só uma operação (a de acessar o objeto pelo array) do que mais um Loop? > Usando js vanilla, é melhor renderizar todos os elementos (igual ele fez no exemplo) ou só renderizar de novo o que mostra os likes?

[@yurif0331]

Aprendeu algum framework?

[@justfelipe7542]

Mano faz um vide sobre sua carreira, qual sua formação, como vc chegou onde está agora e tal

[@DevSoutinho]

Vai rolar \o/ Só não sei quando... talvez uma live e tal to pensando ainda no formato, se pa uma comemoração 10k inscritos, ta chegando!!! hehe

[@joaresmiranda7040]

Muito legal o conteúdo do vídeo e explicação

[@adrianasatybertelli7668]

Eu to apaixonada por esse canal, quanto conteúdo bom e relevante!! Parabéns!!

[@sanmcosta]

Parabéns Mário, muito orgulhoso de ti. Um aperto com a canhota.

[@diogozura]

caramba esse vídeo me ajudou bastante, eu comecei com aquela sede ao pote, de querer aprender React.js sem mesmo me sentir confortável com JavaScript...

[@sidneyweb]

SENSACIONAL!!! que aula!!!! 🙌 👏👏👏

[@DevSoutinho]

Vaaaleu!!’ 😍😍😍

[@kauanmocelin]

Muito bom, ficou bem claro a divisão das responsabilidades da forma que ensinou. Com relação a camada de renderização dos componentes, penso que temos duas abordagens: a que você mostrou usando a marcação html dentro da string e a outra seria criar os componentes manipulando o DOM(algo assim "document.createElement("p");"), saberia me dizer qual a melhor abordagem e qual a diferença entre elas? Valeu!

[@DevSoutinho]

Cara eu particularmente prefiro a ideia de ir no mais declarativo por marcação, que é mais próximo do que os frameworks fazem e é mais fácil de compor novas tags na estrutura e tal \o

[@rayanequeiroz1937]

Excelente vídeo! Muito rico e com dicas ótimas

[@gabrielrocha4149]

Muito top, fico muito boa essa explicação de separar dados de coisas de tela,isso é muito importante.

[@CarlosEduardoLou]

topzeira

[@DevSoutinho]

Heheh

[@Fenderoutside]

Obrigado pelo vídeo Dev Soutinho, muito massa mano! Estou aprendendo JS, mas esse vídeo muito esclarecedor das infinitas possibilidades de trabalhar com dados. O código está disponível em algum repositório?

[@tiagocunhafernandes6607]

kkkk eu também fiquei boqueaberto quando vi o angularjs colocando no label o que eu digitava no input.. e sim, imaginava que dava pra fazer com um simples onchange mas já dava pra perceber que era alguns níveis acima aqui..

[@DevSoutinho]

Caaara o sentimento sempre foi esse uhashusauhas Então tem uma complexidade maior que os frameworks fazem, é claro lá no vídeo fazendo o react vai ter um próximo só mostrando como lidar com essa separação, mas com os pontos aqui do vídeo facilita mt tentar entender como começar com cada um e saber até os pontos que ficam faltando pra evoluir quando pegar alguma dúvida e tal. Eu mesmo fui tentar usar um map sem saber oque era array na época do angular asuhsauh n sai do lugar :(

[@bernardo1496]

Mario, continua trazendo conteúdo para melhorá no aprendizado de Javascript.

[@DevSoutinho]

Opaaa podexa!!!! E se inscreve na imersão React, o curso foi feito com carinho

[@bernardo1496]

@@DevSoutinho Tô inscrito! Pode deixar! ;)

[@fabiovige]

Parabéns, bem explicado... fácil de entender. Pena que escolhi o curso errado.

[@DevSoutinho]

Poxa! Tu já manja de JS? Se quiser umas dicas só falar /o

[@drielisonlopes]

Meu primeiro contato com React com esse vídeo e Like Like Like... ir pra imersãoReact agora!!!

[@DevSoutinho]

ahahahaha #partiuImersao, cade o link do seu projeto? quero ver!

[@drielisonlopes]

​@@DevSoutinho T-T acabei parando na segunda aula... :(

[@scorpionsubzero9066]

não to nesse nivel ainda. mas acho que uma lista das matérias necessarias seria bom tbm.

[@gleybsonfarias6332]

Muito show sua didática mano! Parabéns. Por mais conteúdos assim.

[@DevSoutinho]

Muuito obrigado!!! Tem muuito vídeo no forno prontinho pra sair

[@helioendrio5225]

Manja muito

[@DevSoutinho]

asuhsahuhusahuas valeu!

[@caiqueoliveira957]

soutinho, vídeo muito bom! ansioso pela imersão 2022!!

[@DevSoutinho]

Só vem!!!! hoje vai ter a live com a Alura

[@alexsandroribeiro6759]

E não tem imersão Angular, estou estagiando, e tenho o básico do javascript, no meu squad estão desenvolvendo em angular, gostaria se teria um roadmap do javascript de necessário antes de eu me jogar no estudo do angular?

[@DevSoutinho]

da uma olhada no techguide.sh e me fala o que achou do guia de angular /o

[@alexsandroribeiro6759]

@@DevSoutinho Valeu meu querido, vou da uma olhadinha!

[@alexsandroribeiro6759]

@@DevSoutinho Shooow de bola Mestre! Vlw demais era o que eu precisava....

[@marlonmnz]

E aí Mário “2x” Souto! Vim pelo Dev na Estrada. Parabéns pelo canal, seus conteúdos estão me ajudando muito, ainda mais no meu caso que sou iniciante. Valeu!

[@DevSoutinho]

ahhahahaha fico feliz em ajudar!!! logo logo tem mais podcast saindo hehe

[@thiagoandrade3704]

muito bom, maravilhosa aula, obrigado

[@marcelodasilva4502]

Mano, não consigo testar agora mas não daria pra trocar esse join pelo replace? pensei eu criar um objeto com o html e um array com os chanells e no final fazer um forEach de uma template renderizando as posições do array ? claro de momento me veio isso na cabeça depois pensar como colocaria a logica dos likes

[@DevSoutinho]

Cara daria! Teria que passar uma regex com /,/g mas daria sim :) Pegou bem o espírito do vídeo de pensar em como tratar os dados haha

[@marcelodasilva4502]

@@DevSoutinho como ficaria se desenrolase com classe esse desafio ai hein, fugiria muito e metodologia do react? Outra coisa vc poderia criar um método de estudo pra quem está iniciando la no alura, seu conteúdo é foda de mais parabéns...

[@hey_dan]

Eu to estudando bibliotecas como React Query e SWR, seria bacana um vídeo sobre isso.

[@DevSoutinho]

Opaaa, mas vai rolar! Só to organizando o canal pq tem muuuuuita coisa pra falar asuhshua

[@pauloh.rodrigues7592]

Show!!!

[@DevSoutinho]

Vaaaleu!!!

[@naldo_1988]

Excelente explicação, estrutura do conteúdo e didática, parabéns!

[@willianferreira1634]

Cara não consigo perder um vídeo teu, mesmo sendo coisas básicas que eu já sei ksksksk. Queria ter grana pra fazer teus cursos la na Alura ksks. Um dia vou conseguir!

[@DevSoutinho]

Po cara! Eu tenho um cupom do canal que talvez ajude: www.alura.com.br/devsoutinho Mas se inscreve na Imersão React que é uma mega amostra grátis \o/

[@willianferreira1634]

@@DevSoutinho Hahaha, assim que melhorar a situação aqui, com toda certeza vou assinar. E claro que vou fazer a imersão React.

[@reidogado4710]

Video top

[@DevSoutinho]

Valeu!!!

[@amossilas134]

Sensacional essa aula 🚀🚀🚀👏👏👏

[@DevSoutinho]

Valeu amós!!! \o/

[@melquiasribeiro5304]

video massa demais! li seu post sobre internacionalização, muito bom. Sera que teria como fazer um video sobre o tema? tipo um projeto simples com mudaça de idioma e talz?

[@DevSoutinho]

Siiim, mas é claro!!! Esse post eu escrevi a um tempão, que bom que ainda ta ajudando gente \o/

[@juelmapereira4277]

👏👏👏👏👏

[@maxguttierrez]

por que o cifrão na const tela? ' "$tela"

[@WiuverRibeiro]

Aaaaaeeee tudo que eu estava precisando mestre!❤️

[@DevSoutinho]

Que massa!!!

[@maxwellalvesdesousa5153]

Like só pelo "tá funfano", uso muito aqui! hahahhaaha... Brincadeira, sempre like pq o conteudo é de qualidade! OFF: Mario eu uso muito TypeScript, e as vezes não sei onde fica as tipagens dos eventos do JS, existe algum local onde eu possa ver sempre que eu precisar? Eu sei que o React tem tudo, mas eu não sei qual interface é de cada,.

[@eduardonk4975]

Que vídeo massa, parabéns!!!

[@DevSoutinho]

Valeu cara!!!

[@cesarvaz6622]

Muito massa seus vídeos

[@DevSoutinho]

Muuito obrigado pelo comentário \o/ empolga bastante pra continuar fazendo :D

[@cesarvaz6622]

@@DevSoutinho esse vídeos de engenharia reversa estão muito massa. Ajuda muito a compreender a "magica" por trás dos frameworks e libs. Faz uma série. E parabéns pelo trabalho.

[@jobiltavares]

Estou aprendendo JavaScript e preciso de muita ajuda

[@mayarapimenta1241]

Vim do nerdtech e não vou mais embora

[@TheDaianesantos]

Adoro seus vídeos!! Ótima didática. Palmas de like 👏🏻👏🏻👏🏻

[@wizzy7449]

No 220v só pra não perder o costume.... hehehe

[@DevSoutinho]

De praxe sauhsauhasuh

[@ednaldoalbino2182]

Amor secreto

[@gilbertoaristeubeltramenet5773]

Que bruxaria é essa de alterar as linhas do objeto ao mesmo tempo?

[@DevSoutinho]

Essa magia é o Ctrl + D e o resto tem nesse post meu aqui: www.alura.com.br/artigos/visualstudio-code-instalacao-teclas-de-atalho-plugins-e-integracoes

[@FlavioAlcantara10]

Salva de Palmas para o Dev Coutinho

[@DevSoutinho]

😆😆😆

[@lucas_angelo]

"Fazendo vários nadas com eles" HAHAHA rachei o bico

[@justfelipe7542]

top

[@DevSoutinho]

Valeu!

[@LUIZCARLOSPeGo]

vai ter angular?

[@DevSoutinho]

Na imersão React agora não, mas pode rolar uma imersão angular no futuro uhahusasauh

[@taka904]

JimCarrey no final do vídeo 😂😂😂😂😂

[@aces1_]

A gente não joga mais (ou joga né) o tibiazinho más nunca quer deixar de ficar por dentro do que tá rolando no game né? kkk' [ Nalu 2:06 ]

[@DevSoutinho]

Eu nem almoço se o Nalu não lançar vídeo hahahaahha

[@joaooliveira8601]

Sempre acho que os videos dele está em 1.5x

[@DevSoutinho]

SDSUHSUHUHSUHASUH É o padrão cara, to tentando diminuir, mas faz parte da personalidade

[@VMacabu]

2021 aqui \o/

[@luisfelipe7009]

vim pelo #imersaoreact

[@georgeskormikiaris7950]

Resumo do vídeo: saiba JavaScript antes de usar um framework JavaScript.

[@lucasmotta5085]

F I R S T

[@DevSoutinho]

WEEEE ARE THE CHAMPIONS

[@rbltv]

top