????????????Get early access to this entire course now on Net Ninja Pro:
https://netninja.dev/p/qwik-crash-course-first-look
???????????? Access the course files on GitHub:
https://github.com/iamshaunjp/Qwik-Crash-Course-1st-Look
???????????? TypeScript Tutorial:
On Net Ninja Pro –
On YouTube –
????️???????? Image Link:
https://stock.adobe.com/uk/search/images?k=mario&search_type=default-view-results&asset_id=388785498
???????????? Qwik docs (getting started) –
???????????? VS Code –
So that my friends just like any other JavaScript framework quick allows us to Easily work with component States now if You've ever used something like react or Vue.js before then you're going to feel Right at home using States in quick but For those of you that aren't sure what State is it's basically a way to keep Track of either Global values or Component specific values these State Values are basically like special Variables that can change over time or In reaction to something and then the Framework can react to those changes by Re-rendering parts of the Dom if it Needs to or running some other code in Reaction to the change for example you Might have some Global state to track The user authentication status now that Might switch between being the user Themselves when they're logged in or Null if they're not logged in now when That state value is the user when They're logged in we might show certain Things on the website to the users such As their Avatar their email address Etc Now when the state value is null meaning They're logged out then we might hide Certain things from the user or you Might have some local component state to Keep track of a list of to-do's on a Specific page and then quick can Re-render parts of the page whenever Those to-do's change to reflect that
State change so that's what state is in A nutshell and in this video I'm going To show you how it works with quick Applications so let's open up the index Page over here and we're going to play Around with using stay inside this Component so the way we create a bit of State using a simple value like a string Or a number is by using a hook called Use signal and that looks like this use Signal click on this to import it up Here from quick and then we pass in an Initial value for example that could be A name Mario now we're going to store What this returns inside a constant so Let's say const name is equal to use Signal and the initial value is Mario Now this can change over time and it Would update the value of the name However before we do that let me show You how to Output this in the template So I could do a P tag right here and Then I could say hello and then to Output some kind of variable or a piece Of State I would use curly braces and Then name which is this thing right here Then dot value To get the value of that signal this Thing right here that piece of state and That's going to be Mario so if I save it And refresh over here we can see Hello Mario awesome Now this thing right here you signal This is good for simple primitive data
So strings booleans numbers Etc but if You wanted to use an object or an array Then I would use instead use store and I'll explain why later for now let's use The use store hook so I'm going to say Const person is equal to use store like So and that needs to be imported from Quick as well up here you store And then as an initial value will be an Object and that object is going to have A name property which is going to be Peach and also an age property which can Be 30. So essentially we just have multiple Signals here use signal is just one Single value whereas you store is Basically an object with multiple Different properties or values and it Can track both of those values So let's output them first of all I'm Going to do another P tag and I will say Hello and then output person and then This time we don't have to say dot value As we did here when we use use signal Instead we say dot and then whatever Property we want to Output so for Example person dot name like so if I Save it we can see Hello Peach I can Also output the age so I'll do a dash And then curly braces again person dot Age and save that and we should see 30 As well which we do awesome so that's How we create the state and use it down Here in the template
Now then what I'd like to do is show you Quickly how to update this date and to Do that we're going to have to dive into Event listeners a little bit but I don't Want you to focus too much on these Event listeners because we're going to Go over those in probably the next video So instead what I'm going to do is just Paste this in and you can see we do have Click events associated with these Particular buttons right here so when we Click this button it's going to Basically update the name value of here So to do that we say name and then dot Value is equal to something else that's All we do to update the value of your Signal now for the store we can say Person dot name is equal to Bowser so we Don't need dot value again we just need The property right here so if I save This I'm going to come over here and we Can see click B and that changes this to Luigi click me again and it changes this To Bowser so that's how easy it is to Update the state as well and when it Updates that update is reflected in the Template okay I don't know why this is Giving me an error by the way Um ignore that for now so um that's how We update the state now I did say if You're going to use an object then use You store and the reason for that is if I copy this right and in fact no if I Just say use signal right here instead
Of use store then it would be person dot Value Dot name right that's how we'd output it Because when we use use signal we have To say dot value after whatever we call This constant and then it would be dot Name same for this person dot value and Then dot age now that's going to be fine To begin with let me change this down Here person dot value dot name So we should see that right here it Works however when we come to updating It's not going to be reactive when we Use use signal it's not going to be able To do that with objects so if I click on This we can see now it's not updating This this one's still working but now It's not updating that and that's Because when we use use signal this is Only going to be reactive when we're Using these simple values strings Booleans and numbers anything like that But if we need an object or an array Then definitely use use store instead to Maintain that reactivity so let's get Rid of those values now like this All right and hopefully when we go back To the browser everything should work Again which it does awesome okay so I Want to do one more example I'm going to Create some more State using use store Again and this time I'm calling this Blogs so this time it's an array which Is why I've used you store again because
Objects and arrays we use you store and Inside the array we have three objects Where each one of these objects kind of Represents a simple block not really but It has a title and an ID so I'm going to Show you how we can map through this Array and output a bit of template for Each one So down here we need curly braces Because we're basically using Dynamic Code so much like this is dynamic in Curly braces these different values We're going to use a JavaScript method Here on the blogs so this thing right Here blogs and then we're going to map Through those so dot map because this is An array remember we can map through Them and this is pretty much the same Way that we'd tackle this in react by The way so if you've used react then This is going to be very familiar to you We're going to map through these fire a Function for each one and for each Function each time we iterate through These we get access to that individual Blog so I'm going to say blog right here And then we're going to return some Template for each one so I just want a Div For each blog Like so and it needs a key prop much Like react root elements inside this map Method do so the key is going to be Something unique for that particular
Blog luckily we have an ID which is Unique so we can output the blog dot ID Right here and then inside the div let's Just output the blog title So blog title like so and now we should See a list of each of the blog titles Which we do awesome now I'm going to do One more button at the bottom and I'm Going to paste this in again Which has an on click event handler Again we will talk about event handlers In probably the next lesson but for now Just know that when we click on this Button we're firing a function and we're Taking the blogs and we're using the pop Method on that which means basically Take off the last item in the array okay So when we click on this button it Removes a Blog and when that happens and This updates the template is going to Update to reflect that so let me save it Remove a block and we can see the last One goes again and again awesome so this All works so that my friends is how we Work with state in quick we can either Use use signal for simple values or use Store for objects and arrays and we're Going to be using State using both of These different hooks as we go through The rest of the series
