Svelte Tutorial for Beginners #3 - Svelte Basics

Key Takeaways

alright then gang so before we write any code whatsoever let's have a little look how everything works in spelt underneath the hood so as I said in the last video we create all of our source code inside this source folder this is where you're going to be writing 99% of your code and this is where we create all of our different spelts components and we have one already created for us up else now components are like building blocks of a website which can be put together and then output to the Dom or the browser to create a whole website for example we might have a component for a header for a contact form for a modal for a footer for a pop-up etc and then at the end each of these components can come together and be injected into the Dom to make a whole website so like we said swells has already created a route component for us called app dots felts and by the way whenever we create a component it must have this extension dot serve else that way you knows that this is a component and it can compile it as such so inside each component we have three different things we can have a script at the top for any kind of component logic we have an HTML template which is the stuff that is ultimately injected into the Dom and then we also have a style tag at the bottom and this is to style the template of this component now moving on to this main J's file this is the file that kind of kick-starts the app it contains the code that ultimately runs first and sets everything up for us first of all it imports the app belts component that's created over here so when we create a component it's automatically exported and we can import it into another file so we're importing that first of all we create a new instance of that components and then we have inside that instance this object and this object has a target property and this is basically saying okay well we have this app component instance now where do you want to inject it into the Dom or the HTML document and we're saying we want to grab the body tag and we want to put this app component so all of this template right here inside the Tagg this is the selector for that tag but we could use a query selector if you wanted a different tag but generally we're going to be using the body type because that is where all of the content is kept in an HTML document so we have inside public this index dot HTML and this is the file right here that I served up over here to the browser and that's what we're seeing if we inspect the element we can see that we have this HTML stuff right here okay now what this main dot J's file is doing is grabbing the document tag inside this index file over here so we have the body tag right here it's grabbing that and it's injecting all of the app templates into that body tag right there that's what this is saying it's saying okay we're creating this instance of the app component and injecting it into the body tag we also see this props property right here which is a way to pass data into a component so at the minute we're passing in this name property which has a value of world now we'll talk more about props later but essentially if we go to app we can see we're grabbing that right here and this export denotes that this value name is being set from a prop outside of the components now I don't want to talk too much about props or anything like that at the minute so I'm going to delete this export statement and we'll talk about those later so hopefully now you understand the general idea here of how this is working we create components and the component is then injected into the Dom now in the future when we create more components we're generally not going to put them into the Dom this way instead what we'll do is nest them into this component this component is a bit like a root component it's the top level component that is injected directly into the Dom this way and thereafter we can just nest all the components into the root component and we'll talk more about that later on but anyway that's kind of how it all works under the hood and when we build our prototype what happens is that Savelle looks at all of our components it compiles them into a single JavaScript bundle and it outputs you right here into the build folder which we can see right here bundle yes and bundle dot CSS so all of the scripts from our different components and all of the styles from our different components are bundled together in single files right here and then from our index we are linking to these files and that's how it all works right so now that we know that a little bit of how it works under the hood let's try writing a bit of code so we've already seen this at the minute where we're out putting a name and we're out put in a variable right here which is defined right here initially it was defined over here and we passed it in as a prop but now we're not accepting it as a prop because we deleted that export statement at the start so if we tried to save this now it would be undefined and this is not going to output a name at all it says hello undefined so instead let's give this a value so I'm gonna say let name equal to yo for example and then to output a variable that we define up here in the script inside the template we just used single curly braces then the variable name like so dead easy so if we save that now we can see hello yeah now I could create another one so I could say let's belt call it equal to something and that is going to be black and then if I want to output that I can do I'm going to delete the current content inside the paragraph tag and instead I'm going to output belt color like so and I'll put the word belts after it so it will be black belts save that and preview we can see black belt alright so that's how we chemically output any kind of variable undated that we define in our script which is nice now what if we wanted to change the data at some point or react to a user event like a click event on a button to change the data well we can do that if we come down here and create a button first of all and inside the button will just say updates belt color if we want to react to a click event on this button we can just say on then call on then click is equal to something now there's something it's equal to is going to be inside curly braces because we're going to dynamically output a function name that we're going to declare up here so imagine that we call this function handle click we'd have to define that up here so let me do that I'm going to say Const handle click is equal to an arrow function you can use regular functions if you wish I'm using arrow functions and then inside this we could change the belt color so I could say belt color is then equal to something else so orange for example okay so this right here is saying we're going to react to a user clicking this button and when they click that on click we're going to run this function okay so that should change the value of belt color and when that changes we're gonna react to that by updating this right here in the browser so if we save that and go over here and say update belt color it doesn't work now why doesn't that work that's because we've misspelled color over here done that the American Way so save that and now if we try this it works it updates it to orange so this stuff right here this is felt syntax it's not regular HTML or JavaScript and we can output variables using regular HTML like this this is all spelt syntax and it makes it really easy to output dynamic data or change dynamic data or react to use events like click events on buttons so that's really nice but what happens then is when we build our project it runs across all of our different components it takes this svelt syntax and it turns or compiles it into regular vanilla JavaScript and that is the stuff that is output right here inside the bundle KS now that looks quite complicated for that little bit of code that we've done but the more components that we create it will become efficient when it creates these bundles for us so now we've learnt the basics of spell we know how to define data in a component we know how to output that data we know how to handle click events on things and by the way you don't have to attach this to a button this could be a paragraph tag or an h1 if you wanted it to be doesn't have to be a button but now we know these basics let's in the next video have a look at use imports and data binding