Svelte Crash Course 

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

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!! :)

Was waiting for Svelte content since long time... Thanks a lot, Brad!

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 👍

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.

I'm 17min in and this is by far the best svelte tutorial I've seen so far already! 🙏💪

for the radio buttons, we can use (bind:group={selected}).I think its more Svelte-like. thanks Brad as always.

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}

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!

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}

Svelte is getting very popular, that's awesome! 😁

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

Yesss!! I love Svelte. Big companies need to start adopting it asap! :D

The first 20 mins of this video covers more than most videos on RU-vid, you are doing great work.

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!

Amazing and so well explained as always

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.

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

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 doing a new video! You’re always staying on top of the tech trends.

I really like the pace of these crash courses. Not too slow and since they are relatively short they can be rewatched if needed.

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}

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!

Mr. Brad is that kind of teacher whom everybody wanted to be in his class

Wow. Thanks for taking the time to show the different store and variable structures.

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.

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.

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}

Such a pleasant feeling to hear your voice, so much ease and knowledge. This is golden :)

Damn! Talk about timing, I've been looking to get into Svelte for the past month or so. Thanks a lot!

Your voice + Your keyboard sound = fantastic programming code.

Svelte is to React what React is to angular.

This is simply awesome, I could not stop the video once started ☺️. You have sparked a interest to do Svelte.

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!

Perfect timing delivering svelte crash course/21 not too much out there and once again Brad delivers to us, thank you!

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.

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.

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

Thanks for the fantastic tutorial! One thing I may have missed is why you did not use a loop to lay out the ratings.

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.

12:25 reactive value 19:50 overwriting array-ish vars

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

1:15:52 " i dont know why it got here" i saw many of that in other of your videos, the reason is you do typo, and the auto import executed

Thank you Brad, learned a new language today , feeling satisfied for the day❤️❤️❤️

Excellent! I've been seeing Svelte more and more lately and I've been curious about it.

I love this framework... Too bad they don't have any jobs with it in my country.... I'd definitely go for it.

Svelte is my #1 fav go svelte! Go brad!

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

I think svelte is a good to use with canvas apps.

Great crash course! Thanks for all the great content, Sveltekit crash course next 🙏

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 amazing!

Big fan of your content. This tutorial was awesome. Thank you!

a great tutorial to get you started with svelte, thank you Brad !!!

Awesome as always, worth to watch even if you already have used svelte before.

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.

Great tutorial. Clear and conscise. Please make a follow up for sveltekit.

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

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.

perfect summary about the latest features

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.

You are a game changer of web development 🔥🔥

wao. Awesssome Your website is now updated. It looks amazing.

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.

Why are the components that use other variables from other components using export instead of import?

Awesome course! I learned a lot. Thank you Brad!!

I have watched all of your 2021 framework videos so far and they are great for explaining how to use them, but I think that they are missing the point of reusable components. For instance in every video you create your own Button component and i think you are missing the opportunity to show people how to use pre-built components like Material UI or Antd etc.. particularly for general purpose components such as buttons etc.. This is not a criticism on the content you have provided just an observation. Thanks for the videos

Great content as usual. Have you thought about breaking these tutorials up into smaller sections? This way you could stick to your uploading schedule without burning yourself out. Just a thought, since you're struggling with constantly overworking yourself - I (and I'm sure the majority of your subscribers) appreciate your content either way.

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!

its good to have a table of contents. Thank you

seeing bidireccional data transfer was.... something out of this world tbh

yesssss i fucking love svelte! so glad to see this on your channel!

I learn lots of from your video.it is very useful for me.

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❤️

The styling for the Card component doesn't work on my end. I've even copied his github and the same rendering occurs of no separation of the feedback items.

Was wondering when you cleared the text the button was still enabled. 1:03 approx.

Thank you for this tutorial!

Brad, you're amazing one more time. Thank you so much!

God bless you man.

Very nice tutorial, this frameworks rocks :)

input text length validation behaves oddly, it can be seen in the video too. console.log(text.length) and see how it behaves past 10 chars when you delete a char - it adds to 11 instead going to 9.

In 51:00 can you make those buttons with a for loop rather than repeating the code? I am new to JS.

Great content! recoil + react next🥺?

The repo is no longer maintained. Consider using npm init vite and selecting the svelte option..

Degit is pronounced as DEE git. I heard Rich Harris (the creator of degit, Svelte, and rollup) pronounce it on a podcast interview. degit removes the git history to make it smaller.

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.

It's a pretty easy framework Thanks

Good morning sir, I'm so glad to talk with you like this... Ofcourse there is a reason.. ua udemy course, which I tempted to join after watching all the RU-vid videos on JavaScript but sorry to say I feel it's little outdated compared to others isit !!!? and I want to have a new projects on JavaScript in udemy or RU-vid itself like calendar or any updated which I recently asked to my interview so hope plz kindly concern my plee

Great course! Thanks

You are a master thanks a lot

Thanks for this! I hope you could do Svelthree Tutorials too.

Awesome tutorial, thanks a lot for this!

Fantastic! I was super into Svelte early on and was looking for a refresher (been stuck in Angular land). Thanks for the great video!

I don't know if you are already doing this, but I think you gotta upload at around 5-6 PM (with respect to the country most of your views are from). As I see the comments on your videos, I assume most of your audience are Indians. And this video was uploaded at around 10 PM for us here. Just an advice

I have a question. If we have global reactive variables which we can import using a single line, why do we need dispatch events and make it more complicated? Isn't it better to do it the earlier way like I suggested? That would be more inline to how we import classes in Java but the variables will be static instead? The dispatch events system is neat but that's probably only to use it as an event handler in case something happens to then execute code and change the global reactive variable so that all child components can update. Child components can still update the master component's reactive variables so I am not getting why we would need to do this.

Id love to see an update with svelte 5

Amazing, thanks so much

I am getting a bit confused about something. Recently i have built an web app using flutter, and my app is up and running. Now, i was looking for a better way of building the same app. I have learnt basic html, css, js, and react thinking this would be my best option. By next month i have to start rebuilding the app. Before starting the application i need to decide which framework i will use. My app has some complex functionality, example, generate live qr code which can be downloaded as png, display a live mobile device frame within the app, to display live changes based on user input. I am not sure if these two i can achieve using react. And for last two days, i am finding svelte much more easier than react. Can anybody suggest me which option will be good for me. React or svelte