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.
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
@@vectoralphaSec 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.
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.
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!! :)
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}
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}
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.
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 👍
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.
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.
The ul inside the RatingSelect component can be easily refactored to not use the same code 10 times for each input: {#each Array(10) as _, index (index)}
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
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!
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.
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.
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!
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.
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!
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
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
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!
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!
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.
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
I’m a knockout js user and feel it’s simpler and cleaner. I could build this example in a fraction of the time with 75% less code using knockout. After 2 years of js development I really believe native js and knockout is the best combo
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.
Even though I really like Svelte so far (I've created the Chart app with it and its very good and performant) I wouldn’t just jump into building complex prod ready apps with it just yet, instead what I'd do is 1) either create widget like apps; 2) have a monorepo with bunch of both Svelte and React apps
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.
Damn state and updating state is so easy. It feels like plain programming : defining variable, due to some condition update variable. No fancy hooks or other stuff like React. The reactive values are still a little foggy with syntax and when to exactly use them (because my mindset is so React centric) but wow im amazed
At 20:00, you can use list.push(object) as long as you reassign the reference of the list variable to itself like this: list.push(obj) list = list It is better I think, as it doesn't copy the whole content of the array, which could be a little slower with a large list length.
@@prch818 The program has to update the DOM according to the data, which doesn't happen by default. The compiler takes care of this, and regenerates the view when it recognises an assignment. However, it cannot detect all kinds of changes made by a simple function call. It would be hard for it to recignise. Therefore, you can say list = list and give it a hint that it should update the view.
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.
Very thankful for his work, but given changes have occurred, what version of Svelte dies relate to or up to? What has changed or no longer applicable. Around the 8:23 minute mark when it showing the package dependencies it shows 3.0.0 for the Svelte compiler. I think at one point there was a 'breaking change', one guy wrote a book and a month later Svelte changed so drastically that he said his book was out of date completely and basically not worth buying - I think it had everything to do with 'routes'. I am sure the basics are always there - or at least good to know the background of a project - to help you understand an on going continuously improving application/environment/programing language, etc. FYI MS Visual Basic had a 'language break' where nothing written in a prior version could be run with the new version - things change life must go on.
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
That is very interesting, thank you so much for taking the time to share... The only question: "how do you do unit testing with variables that are global in a store..."
Would it not be better to pass the store to be used down as props into the list and item components? That way you could have multiple feedback lists or whatever, and you wouldn't have multiple components depending on kind of a global state.
Great video, and Svelte is awesome however events fired using the "createEventDispatcher", don't bubble, meaning I have to "bump" them up myself. That part of Svelte feels a tad bit undercooked, but thankfully, can be avoided by using the browser's native events and explicit event listeners.
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.
Sir i dont know you see my comment or not i am yor huge fan please do react advance project video
ua-cam.com/video/kEQAYXcR6YQ/v-deo.html is that video copying known / permitted ? Someone took your video with his own audio overlay 😮
@@shocchosolutions6275 this is English language misuse, Sir
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
@traversymedia add this to info
You are a hero we didn't deserve.
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.
cool. How long did you start learning web dev before you got the job? Congrats.
Same for me. Self studied programmer.
@@vectoralphaSec 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.
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.
I started my own youtube channel and now a company. Thnxx Brad. Programming dad
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!! :)
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}
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}
Yes, nice improvement!
Great job!
This is my first Svelte course. If I ever do anything significant with Svelte, you have a big credit to that, Brad. Thank you very much.
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.
for the radio buttons, we can use (bind:group={selected}).I think its more Svelte-like. thanks Brad as always.
Can you please show the code for implementing this?
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.
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 👍
The first 20 mins of this video covers more than most videos on UA-cam, you are doing great work.
I'm 17min in and this is by far the best svelte tutorial I've seen so far already! 🙏💪
Was waiting for Svelte content since long time... Thanks a lot, Brad!
More to come. SvelteKit will be next
yes me too
@@TraversyMedia I'm looking forward to this
Me tooooo!!!!
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.
Svelte is getting very popular, that's awesome! 😁
Hopefully we see more job openings for it. It really is an awesome framework
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
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.
The ul inside the RatingSelect component can be easily refactored to not use the same code 10 times for each input:
{#each Array(10) as _, index (index)}
{index + 1}
{/each}
The stores feature of Svelte is simply amazing
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
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
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!
Mr. Brad is that kind of teacher whom everybody wanted to be in his class
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}
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.
Yesss!! I love Svelte. Big companies need to start adopting it asap! :D
Of course you'd be here :P
I agree!
@@salehmdev Kevin is the man 😉
I really like the pace of these crash courses. Not too slow and since they are relatively short they can be rewatched if needed.
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.
Wow. Thanks for taking the time to show the different store and variable structures.
Perfect timing. Was starting to learn it. 👍👍
When I find some new future, I always begin it with your crash course, Thanks!!!
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.
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!
Your voice + Your keyboard sound = fantastic programming code.
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.
12:25 reactive value
19:50 overwriting array-ish vars
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!
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!!
As someone who usually does backend, svelte is a lifesaver for hobby projects. React had me banging my head against the wall.
Same i usually use htmx and svelte as i find react overkill for my simple projects 😂
@@darthtrex9356 how is htmx? I never really tried it before, I'm not sure how request responses or errors would be handled in html
this is by far the best Svelte tutorial.
Thanks for doing a new video! You’re always staying on top of the tech trends.
I can't beleive I just completed a svelte crash course! Thanks Brad.
I really loved svelte through your video, it'll be my next project
Dude this was great, you make things super relatable and easy to comprehend. More svelte content please.
Such a pleasant feeling to hear your voice, so much ease and knowledge. This is golden :)
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
Amazing and so well explained as always
Alpine is on the list for future videos 😊
This is simply awesome, I could not stop the video once started ☺️. You have sparked a interest to do Svelte.
It would be great if you can do SvelteKit or Svelte + Tailwind tutorial next.
Great tutorial as always! ❤️ from Sri Lanka
I think James Q Quick has one with Kit + Tailwind and he is another amazing instructor.
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
Great introduction to Svelte - just what I needed. I really enjoy your work, Thanks so much.
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!
Svelte is to React what React is to angular.
Nope
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!
Damn! Talk about timing, I've been looking to get into Svelte for the past month or so. Thanks a lot!
Your tutorials are awesome. I will try to rebuild your feedback app in Svelte 5. Thanks!
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.
This is awesome. Would love it if you could do a SvelteKit tutorial
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
Thanks for the fantastic tutorial! One thing I may have missed is why you did not use a loop to lay out the ratings.
what are the odds you drop this video the day I start caring about svelte. 🚀
I’m a knockout js user and feel it’s simpler and cleaner. I could build this example in a fraction of the time with 75% less code using knockout. After 2 years of js development I really believe native js and knockout is the best combo
Thank you Brad, learned a new language today , feeling satisfied for the day❤️❤️❤️
Perfect timing delivering svelte crash course/21 not too much out there and once again Brad delivers to us, thank you!
a great tutorial to get you started with svelte, thank you Brad !!!
Big fan of your content. This tutorial was awesome. Thank you!
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.
Everything seems so sensible
perfect summary about the latest features
Just commenting this to push the algorithm for svelte
Great tutorial. Clear and conscise. Please make a follow up for sveltekit.
Even though I really like Svelte so far (I've created the Chart app with it and its very good and performant) I wouldn’t just jump into building complex prod ready apps with it just yet, instead what I'd do is 1) either create widget like apps; 2) have a monorepo with bunch of both Svelte and React apps
Svelte is my #1 fav go svelte! Go brad!
I wonder what is the easiest js framework to work with? I don't care of job market, etc etc. What I care much is about development time.
You are the best Svelte teacher.
How many Svelte teachers have you tried?
Svelte is amazing!
Great job buddy. Concise and skillful.
You are a game changer of web development 🔥🔥
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.
Damn state and updating state is so easy. It feels like plain programming : defining variable, due to some condition update variable. No fancy hooks or other stuff like React.
The reactive values are still a little foggy with syntax and when to exactly use them (because my mindset is so React centric) but wow im amazed
its good to have a table of contents. Thank you
Excellent! I've been seeing Svelte more and more lately and I've been curious about it.
It really is great. Some things are just so simple compared to react
@@TraversyMedia It completely obsoletes React. I cannot look at any other framework anymore.
At 20:00, you can use list.push(object) as long as you reassign the reference of the list variable to itself like this:
list.push(obj)
list = list
It is better I think, as it doesn't copy the whole content of the array, which could be a little slower with a large list length.
Hey! Beginner here. Why do you have to do the 'list = list'? Why isn't the list.push(obj) enough?
@@prch818 The program has to update the DOM according to the data, which doesn't happen by default. The compiler takes care of this, and regenerates the view when it recognises an assignment. However, it cannot detect all kinds of changes made by a simple function call. It would be hard for it to recignise. Therefore, you can say list = list and give it a hint that it should update the view.
I love this framework... Too bad they don't have any jobs with it in my country.... I'd definitely go for it.
Yeah. Give it some time. I think we’ll see some popping up
Svelte looks really interesting and I liked the tutorial. Guess I will try recreating your Feedback app. Thanks!
Awesome as always, worth to watch even if you already have used svelte before.
Awesome course! I learned a lot. Thank you Brad!!
Very nice video! Congratulations and thank u for this content. I came from Vue but now im in love with Svelte 🤣🤣🤣
wao. Awesssome Your website is now updated. It looks amazing.
Great crash course! Thanks for all the great content, Sveltekit crash course next 🙏
I learn lots of from your video.it is very useful for me.
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.
this is why i read the comments... valuable insight like this :)
thanks Chris!
Very thankful for his work, but given changes have occurred, what version of Svelte dies relate to or up to? What has changed or no longer applicable.
Around the 8:23 minute mark when it showing the package dependencies it shows 3.0.0 for the Svelte compiler. I think at one point there was a 'breaking change', one guy wrote a book and a month later Svelte changed so drastically that he said his book was out of date completely and basically not worth buying - I think it had everything to do with 'routes'. I am sure the basics are always there - or at least good to know the background of a project - to help you understand an on going continuously improving application/environment/programing language, etc. FYI MS Visual Basic had a 'language break' where nothing written in a prior version could be run with the new version - things change life must go on.
I really like ur presentation. Thanks brad.
Best JS Framework ever !
Nice! This video was exactly what i needed to get started!
Cool introduction about Svelte, thanks Brad.
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
apart from the copy-pasting of the pre-made code, the tutorial was pretty good
could've benefited from a bit more structure, but still, thank you!
That is very interesting, thank you so much for taking the time to share...
The only question: "how do you do unit testing with variables that are global in a store..."
Would it not be better to pass the store to be used down as props into the list and item components? That way you could have multiple feedback lists or whatever, and you wouldn't have multiple components depending on kind of a global state.
Great video, and Svelte is awesome however events fired using the "createEventDispatcher", don't bubble, meaning I have to "bump" them up myself. That part of Svelte feels a tad bit undercooked, but thankfully, can be avoided by using the browser's native events and explicit event listeners.
Excellent tutorial. Thank you!