Svelte Crash Course

  Рет қаралды 227,135

Traversy Media

Traversy Media

2 жыл бұрын

Learn the fundamentals of Svelte by building a feedback app
Code:
github.com/bradtraversy/svelt...
👇 Website & Courses:
traversymedia.com
freelancemastery.dev
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
The article where I got the image:
blog.bitsrc.io/react-vs-svelt...

Пікірлер: 315
@TraversyMedia
@TraversyMedia 2 жыл бұрын
Around 44:45 a few minutes got cut off when I created the Button.svelte component. It's not a big deal, you can see the code, but it cut out me creating it. Sorry about that. Also, the repo is in the description if you need to see any part of the code.
@shocchosolutions6275
@shocchosolutions6275 2 жыл бұрын
Sir i dont know you see my comment or not i am yor huge fan please do react advance project video
@44galore
@44galore 2 жыл бұрын
kzfaq.info/get/bejne/oauBdLyJyLiaiYU.html is that video copying known / permitted ? Someone took your video with his own audio overlay 😮
@user-rg6qw2mi1d
@user-rg6qw2mi1d Жыл бұрын
@@shocchosolutions6275 this is English language misuse, Sir
@hakakahamuta7175
@hakakahamuta7175 2 жыл бұрын
You are a life changer for me! Following you for a year, I got a job. I have no words to thank you enough. I wish you all the best, buddy.
@vectoralphaAI
@vectoralphaAI 2 жыл бұрын
cool. How long did you start learning web dev before you got the job? Congrats.
@narcissisticnarcissus4956
@narcissisticnarcissus4956 2 жыл бұрын
Same for me. Self studied programmer.
@hakakahamuta7175
@hakakahamuta7175 2 жыл бұрын
@@vectoralphaAI Thank you. I have been following Brad for about 10 months now, I have completed Brad's Modern HTML & CSS and Modern JavaScript courses, where I gained the most knowledge, but his free content on youtube is also enough to get a job. Good luck.
@Almighty_Flat_Earth
@Almighty_Flat_Earth 2 жыл бұрын
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
@TheCodebookInc
@TheCodebookInc 2 жыл бұрын
I started my own youtube channel and now a company. Thnxx Brad. Programming dad
@mohammadrezakarimi2400
@mohammadrezakarimi2400 2 жыл бұрын
00:20 What is Svelte 00:49 Compare to React 01:39 Why use Svelte 03:16 What should you know first 03:45 Svelte Component 04:46 How to get started 05:14 Project overview 06:30 Let's get started 08:01 VS code extension 08:17 Generated files explained 11:29 Basic fundamentals 15:47 Conditionals 17:16 Foreach loop 20:20 Starting a real-world application 01:03:34 Adding some transitions 01:06:02 Stores
@zikrullohtolibjonov3710
@zikrullohtolibjonov3710 2 жыл бұрын
@traversymedia add this to info
@josephperezcodes1173
@josephperezcodes1173 Жыл бұрын
You are a hero we didn't deserve.
@szabolcsjobbagy30
@szabolcsjobbagy30 Жыл бұрын
This is the BEST SVELTE VIDEO FOR BEGINNERS, I recommend this one to everyone who wants to learn Svelte. And yesterday, on DEC 14, 2022 as a historical moment, Sveltekit 1.0.0 was officially RELEASED, so the formerly beta version is now fully stable, official version! CONGRATULATIONS to the Svelte & Sveltekit Team!! :)
@SiddheshNan
@SiddheshNan 2 жыл бұрын
Was waiting for Svelte content since long time... Thanks a lot, Brad!
@TraversyMedia
@TraversyMedia 2 жыл бұрын
More to come. SvelteKit will be next
@nitrox5631
@nitrox5631 2 жыл бұрын
yes me too
@andrewshorts1198
@andrewshorts1198 2 жыл бұрын
@@TraversyMedia I'm looking forward to this
@computerscience1152
@computerscience1152 2 жыл бұрын
Me tooooo!!!!
@Almighty_Flat_Earth
@Almighty_Flat_Earth 2 жыл бұрын
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
@dragonballmysteries7580
@dragonballmysteries7580 2 жыл бұрын
I have been waiting a long time for Brad to make a course like this! I have wanted to study svelte for a while now and Brad makes it easy. Love to you and your family!
@sajidshaikh3155
@sajidshaikh3155 2 жыл бұрын
Thank you Brad for this crash course. I had asked you on Twitter if you are planning a crash course on Svelte and you had said "Yes " and you delivered 👍
@urssounds
@urssounds 2 жыл бұрын
I'm 17min in and this is by far the best svelte tutorial I've seen so far already! 🙏💪
@toongurl
@toongurl Жыл бұрын
Oh man I'm, so happy you're doing svelte kit. I got my start as a react dev with your videos. Now we've migrated to Svelte Kit and I'm struggling. Your content makes learning this so much easier. I hope you do a bigger project with stores and reactivity if you have the bandwidth. Even a copy of one of your old react projects but built with svelte instead would be super helpful.
@davidpineda7072
@davidpineda7072 2 жыл бұрын
Thanks Friend! I just started getting into Svelte, coming from an Angular and Ember background. So much wow on how easy this is. Keep up the good work!
@omedjamal1056
@omedjamal1056 2 жыл бұрын
for the radio buttons, we can use (bind:group={selected}).I think its more Svelte-like. thanks Brad as always.
@pickavana8056
@pickavana8056 Жыл бұрын
Can you please show the code for implementing this?
@stevenharder308
@stevenharder308 Жыл бұрын
Wow. Thanks for taking the time to show the different store and variable structures.
@flavio-copes
@flavio-copes 2 жыл бұрын
Svelte is getting very popular, that's awesome! 😁
@TraversyMedia
@TraversyMedia 2 жыл бұрын
Hopefully we see more job openings for it. It really is an awesome framework
@ahmad-murery
@ahmad-murery 2 жыл бұрын
if you are Falvio Copes the one I know then I'm expecting a new book will be added soon to your free books collection :D
@Almighty_Flat_Earth
@Almighty_Flat_Earth 2 жыл бұрын
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
@luismartins1150
@luismartins1150 2 жыл бұрын
Great video as aways. I was planning on start using Svelte and this came at the perfect time. I hope you do a Sveltekit crash course!!
@WolfManThoughts
@WolfManThoughts 9 ай бұрын
Coming from a React Developer. I really like this framework a lot. Very precise, simple and helps you to exactly what you want to do.
@themongru
@themongru 2 жыл бұрын
Great tutorial as always. As a bonus, you could implement the each loop instead of hardcoding all ten rating selections: {#each [...new Array(10)].map((_, i) => i + 1) as rating} {rating} {/each}
@pickavana8056
@pickavana8056 Жыл бұрын
Yes, nice improvement!
@bernanribeiro3329
@bernanribeiro3329 Жыл бұрын
Great job!
@stephenjames2951
@stephenjames2951 2 жыл бұрын
I really like the pace of these crash courses. Not too slow and since they are relatively short they can be rewatched if needed.
@kittymedusa3618
@kittymedusa3618 2 жыл бұрын
Thanks for doing a new video! You’re always staying on top of the tech trends.
@-ambatuedit
@-ambatuedit Жыл бұрын
This is an amazing video for beginners, thanks for making it free 🙏 Tip that could be useful for someone: instead of typing all html radiobuttons one by one a foreach can be used like this: {#each [1,2,3,4,5,6,7,8,9,10] as currRating} {currRating} {/each}
@harigovind511
@harigovind511 11 ай бұрын
The first 20 mins of this video covers more than most videos on KZfaq, you are doing great work.
2 жыл бұрын
nice to see some love for svelte, being using it for 1 year and half in production, never going back to react lol, great content
@felixvargasjr6678
@felixvargasjr6678 Жыл бұрын
I’m looking to learn svelte, coming from react would you say that it’s just an easier tool compared to react? Sorry I’m just learning and hoping to get some insight
@renarsdilevka6573
@renarsdilevka6573 2 жыл бұрын
Such a pleasant feeling to hear your voice, so much ease and knowledge. This is golden :)
@jonathanemmett8043
@jonathanemmett8043 Жыл бұрын
Dude this was great, you make things super relatable and easy to comprehend. More svelte content please.
@it-s-me-mohit
@it-s-me-mohit 2 жыл бұрын
Perfect timing. Was starting to learn it. 👍👍
@MrLT-vf3wr
@MrLT-vf3wr 11 ай бұрын
This was great. Thank you. I'm stoked I was able to solve the challenge you set forth AND I was able to refactor on my own once you introduced the "store" concept. All the best!
@justingolden21
@justingolden21 2 жыл бұрын
Svelte is sooooooooooo much easier than React to learn, read, and write. Svelte kit is awesome too. Glad you made this video. Love your content man.
@harsimransinghbatth5032
@harsimransinghbatth5032 2 жыл бұрын
Damn! Talk about timing, I've been looking to get into Svelte for the past month or so. Thanks a lot!
@skryonline5825
@skryonline5825 2 жыл бұрын
For average and count I would do derived store. This would make it even cleaner code. Great tutorial, thought. Keep up with the Svelte, Brad! I think it has lots of potential and tutorials like this help people to learn about it. Thanks
@vaniad555
@vaniad555 2 жыл бұрын
Perfect timing delivering svelte crash course/21 not too much out there and once again Brad delivers to us, thank you!
@GGSoft2009
@GGSoft2009 Жыл бұрын
When I find some new future, I always begin it with your crash course, Thanks!!!
@kvncnls
@kvncnls 2 жыл бұрын
Yesss!! I love Svelte. Big companies need to start adopting it asap! :D
@salehmdev
@salehmdev 2 жыл бұрын
Of course you'd be here :P I agree!
@TraversyMedia
@TraversyMedia 2 жыл бұрын
@@salehmdev Kevin is the man 😉
@mageprometheus
@mageprometheus Жыл бұрын
Excellent! I'm looking at Svelte for plugins in Obsidian so I won't need some of the app boilerplate but this completely cleared up the brain fog. Time to watch a demo using the latest and check what's changed in the past 12 months.
@th3oth3rjak3
@th3oth3rjak3 Жыл бұрын
This was a great intro to Svelte! I've been exploring a lot of front end frameworks like Angular and React. I honestly find that this is way easier to use then either of those based on this video. I'm going to have to make a few projects in it and try it out!
@paulthomas1052
@paulthomas1052 Жыл бұрын
Great introduction to Svelte - just what I needed. I really enjoy your work, Thanks so much.
@madhanganesh1
@madhanganesh1 2 жыл бұрын
This is simply awesome, I could not stop the video once started ☺️. You have sparked a interest to do Svelte.
@user-yc7xn8vn6k
@user-yc7xn8vn6k 2 жыл бұрын
The stores feature of Svelte is simply amazing
@paul2DD
@paul2DD Жыл бұрын
a great tutorial to get you started with svelte, thank you Brad !!!
@VenkateshMogili
@VenkateshMogili 2 жыл бұрын
Thank you Brad, learned a new language today , feeling satisfied for the day❤️❤️❤️
@SRG-Learn-Code
@SRG-Learn-Code 2 жыл бұрын
Awesome as always, worth to watch even if you already have used svelte before.
@ryanwood9288
@ryanwood9288 2 жыл бұрын
If you are running an m1 mac, you may get an error when you npm run dev for the first time "You are not authorized to view this page" or similar. Port 5000 is being used by the airplay receiver, you need to use a different port. In package.json, add --port "new port number here" without the quotes to the start script and you're good to go. This will also change what port the dev script uses.
@clingyking2774
@clingyking2774 2 жыл бұрын
I can't beleive I just completed a svelte crash course! Thanks Brad.
@klhmia
@klhmia 2 жыл бұрын
Awesome tutorial as always, Brad. Thank you so much. Svelte really trolled us with these file extension names... I miss .js / .jsx - but the overall tech is awesome. Looking forward to more Sveltelteletle
@ccmm4094
@ccmm4094 2 жыл бұрын
Great job buddy. Concise and skillful.
@user-jb2vv1ie2w
@user-jb2vv1ie2w 2 жыл бұрын
Your voice + Your keyboard sound = fantastic programming code.
@AramKoshgerian
@AramKoshgerian 2 жыл бұрын
Amazing and so well explained as always
@TraversyMedia
@TraversyMedia 2 жыл бұрын
Alpine is on the list for future videos 😊
@TrevorTinker
@TrevorTinker 10 ай бұрын
Big fan of your content. This tutorial was awesome. Thank you!
@blankslate6393
@blankslate6393 2 жыл бұрын
Great tutorial. Clear and conscise. Please make a follow up for sveltekit.
@dukeselwood
@dukeselwood 2 жыл бұрын
This is awesome. Would love it if you could do a SvelteKit tutorial
@___Kevin
@___Kevin 2 жыл бұрын
First of all thank you very much, I was looking for some lightweight framework to make a simple but elegant website for a friend. Svelte is perfect for this kind of project
@cosput
@cosput 2 жыл бұрын
Thanks for the crash course, it's well done. Some constructive feedbacl: 7:28 degit doesn't clone, it downloads the tar for the latest commit, which is faster than cloning, and you won't get the commit history.
@s000sdas
@s000sdas 2 жыл бұрын
Mr. Brad is that kind of teacher whom everybody wanted to be in his class
@Erik-rj5xz
@Erik-rj5xz 2 жыл бұрын
Nice! This video was exactly what i needed to get started!
@jeff_tech
@jeff_tech 10 ай бұрын
Awesome course! I learned a lot. Thank you Brad!!
@rah2023
@rah2023 2 жыл бұрын
this is by far the best Svelte tutorial.
@matthewritter8988
@matthewritter8988 2 жыл бұрын
Great crash course! Thanks for all the great content, Sveltekit crash course next 🙏
@_whatistruth
@_whatistruth 2 жыл бұрын
its good to have a table of contents. Thank you
@ABsazerNer
@ABsazerNer Жыл бұрын
I really loved svelte through your video, it'll be my next project
@vitoroliveira6170
@vitoroliveira6170 2 жыл бұрын
Cool introduction about Svelte, thanks Brad.
@irfankhanmohammed6964
@irfankhanmohammed6964 2 жыл бұрын
I really like ur presentation. Thanks brad.
@edwassermann8368
@edwassermann8368 Жыл бұрын
Excellent tutorial. Thank you!
@katrineren6457
@katrineren6457 2 жыл бұрын
I am just planning to learn Svelte and Brad made this video!
@AkisLaoutaris
@AkisLaoutaris 2 жыл бұрын
Brad, you're amazing one more time. Thank you so much!
@xtapa3271
@xtapa3271 Жыл бұрын
Svelte looks really interesting and I liked the tutorial. Guess I will try recreating your Feedback app. Thanks!
@anupamaweerawardhana9652
@anupamaweerawardhana9652 2 жыл бұрын
It would be great if you can do SvelteKit or Svelte + Tailwind tutorial next. Great tutorial as always! ❤️ from Sri Lanka
@pickavana8056
@pickavana8056 Жыл бұрын
I think James Q Quick has one with Kit + Tailwind and he is another amazing instructor.
@MrValVet
@MrValVet 7 ай бұрын
Thank you for this tutorial!
@multitasker8830
@multitasker8830 2 жыл бұрын
You are a game changer of web development 🔥🔥
@danielbordeleau
@danielbordeleau Жыл бұрын
Thanks! Great crash course!
@bytestreamr
@bytestreamr 2 жыл бұрын
Superb content as always, thanks Brad
@dav3evans
@dav3evans 2 жыл бұрын
Really nice video mate, thankyou! For anyone getting to the point where you have to do the dispatch and then create the event forwarding to pass things up to the main App - If like me you thought something like "hhmmm, that's kinda clunky", absorb it as an approach and wait for the Store implementation at the end - MUCH nicer, and worth it to see how much cleaner it is. Question! - So I can learn more, does anyone have a take on why you'd ever use that approach with the store technique being there? Is it a legacy approach that will just be used less? Having seen both in action I can't see an immediate reason to not use a store, even for a small app.
@DavidTheBlane
@DavidTheBlane Жыл бұрын
Awesome tutorial, thanks a lot for this!
@gasparcoding
@gasparcoding 2 жыл бұрын
perfect summary about the latest features
@michelchaghoury870
@michelchaghoury870 2 жыл бұрын
hello brad, gr8 vid like always, can u please show us the best way to develop large-scaled react/Next apps (no need to build an entire project) if you can give us some recommendations and best practices, how, when and other tips that help us to have a clean and well structured project even if it getts big and bigger
@kalukheabhijit5283
@kalukheabhijit5283 2 жыл бұрын
I learn lots of from your video.it is very useful for me.
@koolvoid
@koolvoid Жыл бұрын
Very nice tutorial, this frameworks rocks :)
@yanmendes6200
@yanmendes6200 2 жыл бұрын
Very nice video! Congratulations and thank u for this content. I came from Vue but now im in love with Svelte 🤣🤣🤣
@badasscoder4481
@badasscoder4481 2 жыл бұрын
wao. Awesssome Your website is now updated. It looks amazing.
@somerset006
@somerset006 Жыл бұрын
Thanks for the fantastic tutorial! One thing I may have missed is why you did not use a loop to lay out the ratings.
@TCoPhysics
@TCoPhysics 2 жыл бұрын
This was great, thank you!
@acs2777
@acs2777 2 жыл бұрын
Thanks for this video. Just a quick question. How would you add so the results and list can be sent to any given mailadress or to any receiver. I mean one feedback to a specific mailadress and one to hidden or open mailadress?
@lennyedwards62
@lennyedwards62 2 жыл бұрын
Needs a large project as a udemy, big man. Best wishes
@irlshrek
@irlshrek 2 жыл бұрын
yesssss i fucking love svelte! so glad to see this on your channel!
@seabass_1
@seabass_1 2 жыл бұрын
Svelte is my #1 fav go svelte! Go brad!
@johnrobertsguitar
@johnrobertsguitar Жыл бұрын
Amazing, thanks so much
@jellepals
@jellepals Жыл бұрын
Great course! Thanks
@lone-eltemplodeltalento6196
@lone-eltemplodeltalento6196 2 жыл бұрын
Hey, I was learning React and saw some videos about Svelte. It seems to do the same things but in a easier way, with lees code and more readable. Im wondering if Svelte is as poweful as React? Couse im falling in love with it! Thanks.
@daymaker_bybit
@daymaker_bybit 2 жыл бұрын
Thank you so much for this great video. Svelte is great technology.
@jhonatanjacinto
@jhonatanjacinto 2 жыл бұрын
Excellent tutorial... I'm really considering migrating from React to Svelte... Things seem much much simpler with this framework. Thanks again for your work, man!
@emirmasinovic
@emirmasinovic Жыл бұрын
Great tutorial man! I got stuck a bit in the stores due to syntax mistake for a bit. After making a build, path referencing in the index.html gave me some error. Just add /public/... in html's global.css and bundle.js in case you get the same error.
@jc7832
@jc7832 2 жыл бұрын
Great video! Thanks!
@brianlambert3271
@brianlambert3271 Жыл бұрын
Nicely done, sir!!
@shwackthenoobsac
@shwackthenoobsac 2 жыл бұрын
Great tutorial thank you!
@ScriptRaccoon
@ScriptRaccoon 2 жыл бұрын
Great tutorial! Svelte looks good, but I still haven't seen any JS framework where the communication (in particular, upwards) between components is really easy. All that code (creating stores, importing them, or using event dispatchers) is not necessary when you write vanilla JS / jQuery. Also I really don't want to import specific animation effects before using them as in Svelte - jQuery is much better here.
@jeevansingh5170
@jeevansingh5170 5 ай бұрын
Thanks for this !
@siddiqahmed3274
@siddiqahmed3274 2 жыл бұрын
Sir also waiting for supabase/react project + Deployment. Hope it will be live soon. And thank you so much for all quality content. May God bless you❤️
@user-bi8rl9od9v
@user-bi8rl9od9v Жыл бұрын
Likes the video so thanks. Somthing that could be better is the RatingSelect HTML: {#each [1,2,3,4,5,6,7,8,9,10] as num} {num} {/each}
@aarchiiee
@aarchiiee 2 жыл бұрын
Well delivered as usual.
@segsfault
@segsfault 2 жыл бұрын
Man I literally love you !!!!!!!!!
@pappapuddins
@pappapuddins 2 жыл бұрын
Hey Brad, solid video. Just a quick question though, wouldn't it be a bit more efficient in the feedback form component to make use of reactive values instead of creating the function that handles input? You could have one reactive value that checks if the length of text is correct, another reactive value for the disabled state of the button, and finally another one for the message, which is simply an empty string if the form is valid, or a string with your message if the form is not valid. Seems like you're missing out on Svelte's amazing reactive value system here, since two-way data binding for the text is already handled by the input.
@justinoneill2837
@justinoneill2837 2 жыл бұрын
this is why i read the comments... valuable insight like this :) thanks Chris!
@eduardogomez4676
@eduardogomez4676 2 жыл бұрын
You are a master thanks a lot
@nicoladellino8124
@nicoladellino8124 2 жыл бұрын
Very nice video, TNX
Astro Quick Start Course | Build an SSR Blog
2:44:04
Traversy Media
Рет қаралды 49 М.
TypeScript Crash Course
52:27
Traversy Media
Рет қаралды 586 М.
World’s Deadliest Obstacle Course!
28:25
MrBeast
Рет қаралды 86 МЛН
WHO DO I LOVE MOST?
00:22
dednahype
Рет қаралды 59 МЛН
Balloon Stepping Challenge: Barry Policeman Vs  Herobrine and His Friends
00:28
Svelte Origins: A JavaScript Documentary
32:27
OfferZen Origins
Рет қаралды 185 М.
I built a $5 chat app with Pocketbase & Svelte. Will it scale?
13:34
Svelte 5 is a beast, but is it worth switching?
37:55
Syntax
Рет қаралды 19 М.
Vite Crash Course | Faster Alternative To CRA
16:24
Traversy Media
Рет қаралды 186 М.
WTF Do These Even Mean
13:44
Web Dev Simplified
Рет қаралды 75 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,5 МЛН
HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
56:47
Traversy Media
Рет қаралды 134 М.
Vue JS Crash Course
1:50:52
Traversy Media
Рет қаралды 1,3 МЛН
Forms Will Never Be the Same
10:10
Huntabyte
Рет қаралды 51 М.
МОЩНЕЕ ТВОЕГО ПК - iPad Pro M4 (feat. Brickspacer)
28:01
ЗЕ МАККЕРС
Рет қаралды 84 М.
DC Fast 🏃‍♂️ Mobile 📱 Charger
0:42
Tech Official
Рет қаралды 485 М.
Cadiz smart lock official account unlocks the aesthetics of returning home
0:30
🔥Идеальный чехол для iPhone! 📱 #apple #iphone
0:36
Не шарю!
Рет қаралды 1,1 МЛН