0:01 Hey guys, in this tutorial we're going 0:03 to be taking a look at ReactiveJS 0:05 and this is a JavaScript template driven 0:08 UI library. And I know that there's many 0:11 different JS frameworks out there. I've 0:13 done videos on a lot of them. And this 0:16 one, I chose this one today because it's 0:19 really easy to learn and also we just 0:22 did a a course on it at eduanix.com. 0:25 So I figured I'd make a quick video on 0:27 it. Now, in terms of other technologies 0:30 like it, I think that ReactJS is 0:32 probably the closest to how reactive 0:35 works, it's strictly in the view. It has 0:38 no back-end capabilities and it's used 0:40 to build interactive UIs. All right. The 0:44 main difference from React, I think, is 0:46 how it utilizes templates and it kind of 0:49 reminds me of MeteorJS in that aspect. 0:52 All right, so let's go ahead and jump 0:54 in. This is the the official website and 0:56 there's pretty good documentation. 0:58 There's a 60-second setup here which 1:01 kind of just gets you set up with a very 1:03 very basic idea of how it works. There's 1:07 tutorials which are really nice. Uh 1:10 examples, okay, different UIs, different 1:13 applications that use Reactive and 1:16 documents. And then there's a set an 1:19 area for all the the plugins. All right. 1:21 So, there's there's quite a bit to it, 1:23 but it's pretty easy to understand. All 1:25 right. So, what we're going to do is 1:27 we're just going to create an index html 1:30 file, and we're going to work from that. 1:32 So, I'm going to create a folder. We'll 1:34 just call this 1:37 uh we'll call it reactive 1:40 sandbox. 1:42 Okay. And then in there, we're going to 1:43 create just a index html file. 1:51 Now, Ractive is available through npm if 1:54 you want to use something like Webpack 1:56 and you want kind of a a better 1:58 application environment and I get into 2:00 that in the course, but for now I just 2:03 want to focus on the syntax and how it 2:05 works. So, I think that this is a little 2:07 bit easier. 2:12 All right. So, we'll go ahead and 2:15 open this in Chrome. 2:20 All right. So, let's just get some 2:23 standard HTML in here. 2:28 We'll add a title. And all we have to do 2:30 to get it set up and and be able to use 2:32 it is just include this script tag right 2:35 here. 2:36 Okay. So, we're going to put that 2:38 actually we're going to put that down in 2:40 the body. 2:41 Just like that. And there's basically 2:44 three different areas that we need to 2:46 set up. First is going to be where we 2:48 want this to be output. So we're going 2:50 to create a div and I'm going to give it 2:51 an ID of app. 2:55 Okay, similar to how Angular works. And 2:58 then we're going to go down. Um actually 3:00 we're going to go above the script tag 3:02 and that's where our template's going to 3:04 be. So templates are going to have a 3:07 script tag and an ID which I'm just 3:11 going to call template. 3:13 And then we need to add the type which 3:15 is going to be text slash reactive. 3:22 Okay. And then down here is where our 3:24 instance will go. So script. 3:28 And what we'll do is create a variable 3:31 reactive and set that to new 3:36 reactive. And then we're going to pass 3:38 in some curly braces. And we need to 3:41 specify a couple things. First is going 3:43 to be the element that we want it to be 3:46 output which is a div with the id of 3:48 app. So we're going to say l or eel and 3:52 then pass in the id of app. Okay, it 3:55 doesn't have to be an id. It could be a 3:56 class or it could be uh just an element 3:59 itself. And then we need to tell it 4:01 where the template is. So template 4:06 and that has an ID of template. 4:10 All right. And then we can also pass 4:11 along any data we want, which I'll just 4:14 leave blank for now. But let's go up 4:16 here in the template and we'll say this 4:21 is my app. 4:25 All right. So, let's go ahead and save 4:27 that. And if we go over to index html 4:31 and reload, we get this is my app. All 4:33 right. I'm just going to open the 4:34 console up with F12. And you can see 4:36 that Aactive is in debug mode. 4:40 Okay, so that's essentially the 4:43 foundation for reactive. We have our 4:45 instance here. We have our template and 4:48 we have whatever element we're going to 4:50 output it in. All right. Now, if we want 4:53 to add some dynamic data, we can go down 4:56 here and let's say 4:59 greeting. We'll set that to 5:03 hello world. Okay. Okay. So now up here, 5:06 let's go ahead and put in an H1. 5:10 And we'll we're going to use mustache. 5:13 That's what uh that's the template 5:14 engine that Reactive uses. And we'll say 5:17 greeting. Save it. Reload. And we get 5:21 hello world. 5:23 Now we'll add another piece of data 5:25 here. We'll say name. 5:28 Set that to Brad. and we'll say greeting 5:34 my name is 5:37 and then throw in name. Okay, so we get 5:40 hello world my name is Brad. So we can 5:44 also use these dynamic variables inside 5:47 of a style tag if we want to uh change 5:50 the way it looks. So for instance in our 5:53 H1 we'll put a style 5:57 and we'll set color 6:02 to color 6:05 and down here we'll define a variable 6:08 called color and we'll set it to red. 6:13 Reload and you can see that it's now 6:14 red. 6:16 Now Reactive has an extensive API that 6:19 we can use. So if we go to docs, you'll 6:22 see down here to the left, there's all 6:24 different types of methods that we can 6:27 use. So one of them is set. 6:30 If we check that out, so the way that we 6:34 use this is by saying reactive set and 6:38 then the key path and then the value. 6:40 Okay, key path is basically uh a 6:43 location of a piece of data. All right. 6:46 So, if we go down here and we'll take 6:48 this variable or active that we created 6:51 and say dot set 6:54 and let's say we want to set the color. 6:59 Uh we'll set the color to green. 7:04 Okay. Save that. Reload. And now you can 7:06 see it's changed to green. We can also 7:09 have get. So if we say let's do 7:13 console.log blog and we'll say 7:16 reactive.get 7:20 and we'll pass in here name and then if 7:24 we go and reload you'll see down here 7:26 it's going to output the name value. Now 7:29 we can also nest properties. So let's 7:31 say in the data we want to add an 7:34 address 7:36 and we're going to set that to be an 7:37 object and we'll say street. 7:43 We'll say 49 Main Street and then we'll 7:47 do city 7:52 Boston and then state. 7:56 All right. So now up in our template, 8:00 let's go ahead and put in a ul. 8:08 And in here we'll say 8:11 uh what is it? address 8:14 dot street. 8:20 Copy that. 8:22 Then we'll do city 8:25 and state. So if we go ahead and reload, 8:29 we get our address. Now notice that we 8:32 have to do this address. Street address 8:35 city. There's something we can do um to 8:39 short to kind of make this a little 8:40 easier, especially if you have multiple 8:42 levels here. I mean, we only have one 8:44 here, but you may have objects with 8:48 objects with objects. So, what we can do 8:51 is wrap this in a width statement. So, 8:56 we're going to say width 8:59 address. 9:01 And then we need to end that with. 9:04 And then we can get rid of this address. 9:10 Save. Reload. 9:13 And you can see it's still there. Now, 9:14 if I was to remove the width, 9:18 we're going to get an error. Okay? Or 9:20 not an error, but it's just not going to 9:22 work. So, we can do that. And we can 9:24 also shorten this up and get rid of the 9:26 width and just do the number sign 9:29 address and then down here address. 9:36 And that works. 9:39 Now another thing we can do is store 9:41 arrays down here. So after address we'll 9:44 put a comma and let's say friends. Okay. 9:48 So friends we'll set to an array. And we 9:50 could make it just a normal array, but 9:52 what I'm going to do is put some objects 9:54 in here. Okay, so each friend will be an 9:56 object with a name. 10:01 We'll do name and let's do age. 10:06 Okay, so there's one friend. 10:18 And we'll do one more. 10:21 We'll say name 10:25 Jen. 10:30 All right. So, we have an array of 10:32 objects here. 10:34 And if we go up and go under the ul, I'm 10:37 just going to create a heading here. Say 10:40 friends. And if we try to just put in 10:45 friends like that and reload, you'll see 10:47 that we just get this object and then 10:49 obviously we don't want that. So what we 10:51 need to do is make it into a section. So 10:54 we'll add a number sign here and then a 10:57 closing tag. 10:59 And then we can access any of the fields 11:02 we have in here. So name and age. So, 11:05 uh, let's actually wrap this in a ul 11:12 and then in here we'll put an li 11:16 and we'll say name 11:20 dash and then the age. 11:24 Okay, so if we save that, reload, now we 11:27 get a list with each name and the age. 11:31 Now, we also have conditionals. And even 11:34 if I set this friends right here to 11:36 false 11:39 and we reload, it's not going to show 11:41 up. Okay, it's it's as easy as that. 11:43 Instead of doing some kind of if 11:45 statement up here, which we can do, 11:46 which I'll show you in a second, we can 11:48 just set this to false and the section 11:50 won't show. Even if we put something in 11:52 here that's not one of those fields, 11:54 it's still not going to show. nothing 11:56 inside of that section will work or will 12:00 be displayed. All right, so I'm going to 12:02 go back and just put those in. 12:05 Now, we can also do if statements. We 12:08 can do different conditionals. So, let's 12:11 go down here and put a comma and then 12:15 we'll say show 12:17 let's do show address. Okay, we're going 12:19 to set that to false by default. So now 12:24 if we go up here and where we have our 12:26 address, where we have the ul, I'm going 12:28 to surround that. We're going to say if 12:32 show address and then down here we'll 12:35 close off that if. 12:40 Okay. So now if I save that and reload, 12:44 you'll see the address isn't showing. 12:46 Okay. And if I change it to true, 12:50 reload, it will show. 12:53 Now, we can also add in an else. So, 12:55 we'll say if show address, and then down 12:59 here, we'll say else, 13:06 we'll say address 13:10 hidden. 13:11 So, if we save that, actually, let's go 13:14 change this to false. 13:17 Reload and we get address hidden. 13:21 Now in addition to using sections like 13:24 we did with friends, we can also iterate 13:26 using each. So what I'm going to do is 13:28 I'm going to paste in uh a property 13:31 called jobs which is an array of 13:33 different jobs that the users had. All 13:36 right. So we have company title and the 13:38 years that they worked there. This 13:40 should actually be years. Okay. So, what 13:43 we'll do is go up here and let's add an 13:47 H3 and we'll say 13:50 work history. 13:54 And let's do we'll put a ul. Actually, 13:57 you know what? Let's do a table. We'll 13:58 make it look a little better. 14:01 Okay. So, table will have uh table row 14:06 and these will be headings. So this one 14:09 will say ID. 14:12 This one will be let's see company. 14:18 This will be job title 14:23 and years. 14:27 Okay. So that's our heading. 14:30 And let's go ahead and copy that. 14:34 And then what we're going to do is we're 14:36 going to wrap it in an each. We'll say 14:38 each jobs. 14:42 We got to close it. 14:44 And then we'll paste that in. 14:48 Okay. Now these are going to be changed 14:50 to TDs. 15:00 Okay. So the ID one I'm going to leave 15:02 that for now. And then this we're going 15:04 to change to company. 15:08 This one will be changed to title. 15:13 And this one will be 15:16 years. All right. So let's go ahead and 15:19 save that and reload. 15:21 And now you can see that we have our 15:23 table with our company job title and 15:25 years. Now for the ID, we're going to 15:27 use the index. And the way that we can 15:29 get that is if we go right here and we 15:32 put a colon and then a variable. Let's 15:34 say I and then we'll replace this with 15:39 I. Reload. And you can see we get the 15:42 index of each of each item. 15:46 And let's just grab Bootstrap to make 15:48 this look a little better. We'll just 15:50 grab the CDN. 15:57 Just throw that up here 16:01 and say href. Paste that link in. 16:08 Okay. And let's just add a class 16:13 to our where is it? Our table. 16:23 All right. Right. So, that looks a 16:24 little better. 16:26 Now, if we wanted to add on to this, 16:30 actually, let's wrap it in a container. 16:43 Okay, that should push everything to the 16:45 middle. So, if we want to add on to 16:47 this, what we can do is go down to the 16:52 bottom here and we'll say dot push. 16:59 We want to push onto jobs 17:04 and we're going to paste in a new object 17:06 to add. So let's say company 17:11 just say test company 17:15 and what else? Title 17:18 we'll say lead 17:20 developer 17:22 and years we'll say two. So let's save 17:27 that and reload. And you can see that 17:29 test company has been added on to the 17:31 end here. 17:34 If we want to get rid of one of these, 17:36 we can use splice. So we'll say reactive 17:42 splice 17:43 and that's going to take in 17:47 uh jobs. 17:49 And then we want the index of the one we 17:52 want to delete. Let's say we want to 17:53 delete tech guy which has the index of 17:55 two. And then this parameter is how many 17:58 we want to delete from there. So we just 18:00 want one. So reload and you'll see that 18:03 tech guy is gone. If I was to change 18:06 this to three, it's going to get tech 18:08 guy and then the ones after it as well. 18:11 All right, I'm just going to comment 18:13 that out. 18:18 All right, so now we're going to move on 18:19 to events. Okay, so events are pretty 18:23 easy. We they have what's called an 18:26 event directive. Uh and if you've worked 18:28 with Angular, you probably know what a 18:29 directive is. It's basically just a 18:31 custom um HTML tag or element. Okay. So, 18:36 we're going to go let's go right under 18:38 where the address is 18:41 and 18:42 let's see where we have address hidden. 18:46 Actually, let's go under the the whole 18:48 thing under the if and we're going to 18:50 create a button. Okay. Now, for the 18:53 event directive, we're going to use on 18:55 dashclick. 18:59 Okay. Let's say show 19:03 address. Okay. Now we can make this go 19:06 to uh a function that we can create. So 19:08 let's call this show address. 19:14 And then we'll go down here. 19:16 And the way that we do this is to use 19:18 the on method. So we're going to say 19:21 reactive.on 19:23 and then the name of the the function 19:25 which is show address. 19:29 And then second parameter here will be 19:32 uh self- calling function. 19:35 And then let's say 19:39 uh let's see we'll do 19:41 reactive dot set and we want to set 19:47 show address 19:50 to true. 19:52 All right. So let's go ahead and save 19:54 that and reload. Click that. And you see 19:57 we get our address. 20:00 Now, if we click it again, it's not 20:02 going to hide it because we just set it 20:04 up to show it. Now, a better way to do 20:07 this would be to use reactive.ggle. 20:11 Okay. So, if we toggle and then we get 20:13 rid of this second parameter and we 20:16 reload, shows it. Hit it again, hides 20:18 it. Okay. So, it just toggles it from 20:21 true to false. 20:23 And if we want to change the text in the 20:25 button, we can do that. 20:28 So we'll go up here 20:33 and let's do Oops. Why did that show up? 20:37 So we'll say if 20:43 show address 20:46 um if show address 20:51 and then we'll do else 21:01 actually if it's show address then we 21:03 want the text to say hide address else 21:07 show address. Okay, so we reload says 21:10 show address. Click it says hide 21:13 address. 21:16 Now in addition to these proxy events, 21:18 we can also have method calls where we 21:21 can kind of encapsulate it a little 21:23 more. So let's say under our work 21:25 history we're going to put uh under the 21:29 table let's put a button 21:35 and we're going to set on click 21:41 say add job and here we're going to say 21:45 add job and I'm going to add parentheses 21:47 on the end this time 21:50 and then down here 21:52 we don't want to be in the data. We want 21:55 to let's go right above it and we're 21:58 going to say add job. 22:01 Actually, go like that and say function. 22:05 Make sure you put a comma there. And 22:07 then what we'll do is grab this 22:09 oractive.push 22:11 and cut it. 22:13 And up here we'll go ahead and paste 22:15 that in. 22:23 And let's save that. Reload. See, we 22:26 have a add job button. I click that and 22:29 the job gets added. 22:32 Okay. So, this is a way to kind of keep 22:34 everything encapsulated in the instance. 22:39 Now, let's take it a step further and 22:41 encapsulate this in a component. Okay, 22:44 so this whole work history thing, let's 22:46 make this a component. So, we'll go 22:48 right above where our main instance is, 22:51 and we're going to create a variable, 22:53 and we'll call it, 22:56 we'll just call it jobs, and we're going 22:58 to set that to reactive.extend. 23:05 All right. And then in here, we'll pass 23:06 in some curly braces. And same thing, 23:10 we're going to do a template just like 23:11 we did with the main instance. And let's 23:14 give it an ID of jobs. 23:18 All right. And then we're going to use a 23:21 what's called a life cycle method. And 23:24 basically these are different methods or 23:27 events that get fired off at certain 23:29 times during a life cycle during the 23:31 rendering of a component or an 23:33 application. So the one that we're going 23:36 to be using here is on innit. So we're 23:39 going to say oninit function. 23:43 All right. And then pretty much 23:44 everything we do is going to go in here. 23:47 All right. Now we need to create another 23:50 script tag under the main template here. 23:54 So let's go right here and we'll say 23:57 script. Give it an ID of jobs 24:01 and a type 24:04 of text slash reactive. 24:13 And for now, let's just say this is 24:18 jobs component. 24:21 And then we need to specify it as a 24:24 component down here in the instance. So, 24:25 let's go right under template and we'll 24:27 say component, 24:30 which is 24:32 I believe it's 24:34 I believe it's an array. No, it's an 24:36 object. 24:38 All right. And then we're going to say 24:41 jobs and assign that to that jobs 24:44 variable right here. Okay. So, now it 24:47 knows that jobs is a component. Now to 24:50 display it, we're going to go into 24:54 our main template here. And a component 24:58 syntax is just basically uh an HTML tag. 25:01 So jobs. 25:04 All right. Now, if we save that, 25:07 uh let's see. Unexpected identifier 25:11 on 80. 25:13 Oh, we didn't put a comma here. 25:18 Okay. Okay. So, you can see right here, 25:19 this is the jobs component. Now, what I 25:21 want to do is move this into the jobs 25:23 component. So, let's go to our main 25:27 template here, and we'll grab from here 25:31 down to here, and we'll cut it. 25:36 And then we're going to just paste that 25:38 right in here in the jobs template. 25:41 Okay. So, if I save and reload, now it's 25:45 coming from the template. 25:47 Now I want this to be isolated. 25:50 Basically I want it to have its own 25:51 data. Right now the data is in this main 25:53 instance. So up here we're going to say 25:58 isolated and we're going to set that to 26:01 true. 26:02 All right. And now if I reload you can 26:05 see that the data is no longer there. 26:07 So, what we have to do is create in here 26:14 data 26:16 and then we're going to grab this. 26:21 Okay, we'll cut that 26:24 and then we'll just paste that up here. 26:28 Okay, because the idea is we want 26:30 everything encapsulated, the data, any 26:32 functions, everything, events. So, if I 26:35 reload now, you can see that the data is 26:37 back. Now, we do have this warning down 26:40 here saying we shouldn't um store an 26:42 object uh an array of objects directly 26:45 in here, but normally this would come 26:48 from some kind of database or API. Um 26:51 but we're not doing that. We're just 26:52 sticking with the view because that's 26:55 what is and I don't want to introduce 26:58 any other technologies. So, we're just 26:59 going to keep it and just ignore this 27:01 warning. All right. Right. And if I 27:03 click add job, you can see that it's no 27:05 longer working because our component is 27:07 isolated. So what we'd have to do is 27:09 take this add job and cut it 27:14 and put it up here. 27:20 Now that we're working in the component, 27:22 we don't want to use this reactive 27:24 variable here. We want to use this. 27:26 Okay. So save that. Reload. And now the 27:29 add job works. 27:32 All right. So, now we're going to get 27:33 into data binding. And Ractive uses 27:36 two-way data binding much like Angular. 27:39 Okay. So, if you have experience with 27:40 Angular, data binding works very 27:43 similar. So, what we're going to do is 27:45 we're going to go into our component 27:47 template and right above that button, 27:51 we're going to put in a form tag. 27:56 Okay. Okay. And then let's take this and 28:01 copy it or cut it. Paste it in the form. 28:07 And instead of this uh on click, we're 28:11 going to get rid of that. And we're 28:13 going to put inside the form tag 28:16 unsubmit. 28:19 And we'll set that to add job. 28:25 And let's put an input 28:29 with the type of text. 28:34 Okay. And let's add a class as well. 28:38 We'll add a bootstrap class of form 28:41 control. 28:45 And this here we're going to change that 28:48 to a submit. We'll say input 28:52 type is going to be submit. 28:55 and then value will be submit. 29:01 All right. So, let's go ahead and reload 29:03 that. Um, let's make this look a little 29:06 better. We'll put the button. 29:09 Let's put a class here for the submit 29:11 button. We'll say btn btn 29:15 default, which is a bootstrap class. All 29:18 right. And what we'll do, let's also put 29:22 in a placeholder. 29:27 And we'll just say add job. 29:30 Okay. So when we submit this, you can 29:34 see that it does add it, but then it 29:36 flashes away. That's because the form is 29:38 actually getting submitted, and we don't 29:40 want that. So, what we can do is go down 29:43 to add job and we just want to go to the 29:46 very end and say return false. 29:50 Okay. So, now if I save that now, that 29:54 didn't work either. 29:56 Uh, let's see. Return false. That should 30:00 do it. 30:02 All right. You know what? We're going to 30:03 do this a little bit different. I don't 30:04 want to I'm not going to have it like 30:07 this. I'm going to put this inside of on 30:09 innit because I think that's what the 30:10 issue is. So up where we have the add 30:13 job, I'm going to remove the 30:15 parenthesis. And then in here, we're 30:17 going to say this on 30:23 add job function. 30:27 And then we'll grab the push and also 30:30 the return false. And we'll paste that 30:33 in there. 30:39 Let me just tab this over. 30:43 Okay. And then we can get rid of this ad 30:45 job. 30:47 Okay. So if we now reload and we submit 30:50 now you can see it's getting added. Now 30:53 test company is being added because we 30:55 haven't specified anything different. 30:57 So, um, what I want to do is to show you 31:00 how this data binding works. Inside of 31:04 our data in the component, we're going 31:07 to go right after this jobs, and let's 31:10 say 31:11 new job, which I'm going to set to 31:15 um, for now, we'll set it to an empty 31:17 string. And then up in the input, 31:22 which is right here, we're going to say 31:24 value equals 31:28 double curly braces and new job. Okay. 31:32 Now, that's going to be bound to 31:34 wherever we put this variable. So, let's 31:36 put it right under the form. We'll say 31:39 new job 31:41 and reload. And now, as I start typing, 31:44 you can see that data is being binded. 31:46 Uh, and it's going both ways. is 31:48 whatever we put in here is going to 31:49 output here. Uh and then also if we were 31:53 to set this to test, you can see that 31:57 it's also filling in the value of test. 32:00 Okay, so that's how data binding works. 32:02 It's really easy and also very helpful. 32:06 All right, so what we want to do is 32:08 obviously we don't want to echo our 32:09 typing down here. So we're going to get 32:11 rid of that this new job. I just wanted 32:14 to show you how that works. 32:16 So now what I want to do is whatever we 32:18 type in here, I want to add as a job. 32:22 Okay, but we're going to need a couple 32:23 more fields. So we'll have company, um, 32:27 job title, and years. So let's grab this 32:32 text input. 32:35 And we're going to paste two more inputs 32:37 in. Okay, this is going to be the 32:40 company. So we'll change this to 32:44 add company. 32:46 Add title, 32:50 add years. 32:52 Okay. And then let's change this to 32:57 job title. 32:59 No, job company, 33:05 job title, and job years. 33:10 And then we're going to add those down 33:12 here. All 33:25 right. So then what we want to do is 33:28 when we submit it, it's going to go to 33:31 this add job and let's create a new uh a 33:36 new object here. So we'll say var new 33:39 job. set it to an object. 33:45 Okay. And I'm just going to grab this. 33:50 Okay. Now, we want to fill this in with 33:54 the form values. And we can do that with 33:56 this.get 33:58 and pass in company 34:02 or what is it? Job company. 34:07 And then we'll copy that. 34:10 This will be job title 34:14 and this will be job years. 34:19 Okay. And then we want to push onto it 34:22 right here. Except we're just going to 34:24 put in new job. All right. So, let's 34:27 save that. Reload. 34:30 And let's say test company 34:35 some title and four years. Submit. And 34:38 you can see that those have now been 34:40 added. Okay. And if we want to clear the 34:43 form afterwards, we can do that as well. 34:46 If we go 34:49 down here and let me just bring this 34:51 back, 34:54 we can say this.get 35:00 job company. 35:02 I'm sorry, not get set 35:05 job company to blank. 35:13 And same thing with the other two 35:14 fields. 35:16 Job title, 35:19 job years. 35:22 Okay, we'll reload. Put something in 35:25 here. Submit. And you can see that the 35:26 form cleared. 35:29 All right, so we are getting there. Um, 35:32 let me just separate these inputs a 35:34 little bit here. We'll put 35:37 uh let's put a title here. I just want 35:39 to make it look a little better. 35:46 And then we'll put 35:50 actually let's wrap it in a bootstrap 35:52 class. 35:54 So div class equals 35:57 form group. 36:13 All right, 36:15 there we go. So that looks a little 36:17 better. 36:19 Now the next thing I want to talk about 36:21 is observers. and observers. Basically, 36:24 we can make it so that we can watch a 36:26 key path for changes. And a key path 36:29 meaning the um the location of of some 36:31 kind of data. So, we're going to go down 36:34 to our main instance and let's say we 36:37 want to watch for the name. All right. 36:40 So, down here, we're going to say 36:44 reactive. 36:48 And in here we want to pass in what we 36:51 want to watch which is the name and then 36:53 a function. 36:57 Okay. And this function will take in 37:00 new value, 37:02 old value and key path. Okay. Now we can 37:06 have anything we want happen when the 37:10 name changes or a name is added 37:12 whatever. So let's just do a console 37:14 log. Okay. Okay, something very simple. 37:18 And we're going to console log the key 37:20 path and then let's concatenate a 37:23 string. We'll say changed to and then 37:27 add on new value. 37:31 Okay. So now if we save that and we run 37:33 it, it's going to say name changed to 37:35 Brad because that was the initial 37:37 assignment up here. Now if we were to 37:40 set that 37:47 We'll say name 37:51 Shawn and we reload. We get name change 37:54 to Shawn. Okay. So, it's constantly 37:56 watching name and then does whatever we 37:59 ask it to anytime it's set or updated or 38:03 changed in any way. Now, if we want to 38:07 watch something like friends, which is 38:08 an array of objects, if I was to change 38:13 uh this right here name to friends 38:17 and reload you'll see we get friends 38:20 change to and then just a bunch of 38:22 objects all right now we can target what 38:25 we want to watch if we say for instance 38:27 friends one which would be Mike 38:32 reload now Mike is uh an object so we 38:36 have to specify what property we want so 38:38 let's sayame 38:41 reload load and you can see friends.1 38:44 name is the keypath and it changed to 38:46 Mike. Okay. Now we can also use patterns 38:49 if we want to watch all of these. We can 38:52 replace the one here with a wild card 38:55 with an asterisk. And now if we run that 38:58 it's going to run for all of them. Okay. 39:00 So it shows us John, Mike, and Jen. 39:04 Now let's say we add a property to one 39:08 of the friends. So right here, let's say 39:13 set 39:16 and let's do friends 39:20 one, which is Mike. 39:24 And we're going to 39:27 um actually know what we'll do is say 39:29 friends.1 39:32 is best. Okay, so we'll add a property 39:34 called is best and set that to true. And 39:38 then let's change this observer to watch 39:40 for is best. 39:44 All right. So we'll save that and 39:46 reload. 39:48 And you can see that we get friends is 39:50 best changed to undefined. So Mike is 39:53 the only one that changed to true. So 39:55 this console log, this isn't really um 39:58 it doesn't really make sense for what 40:00 we're checking for. So let's comment 40:01 that out. And what we'll do is check 40:05 we'll say if new value dot is best. 40:11 Okay. So if that's true then we want to 40:14 console.log 40:17 and in here we'll say 40:21 uh no we'll do keypath 40:27 or actually no let's do new value. 40:31 So new value dot 40:33 uh name we'll say new value name and 40:37 then we'll concatenate 40:39 is 40:42 my best friend. Okay. Okay. So if we go 40:45 and reload 40:48 um 40:51 h new value dot 40:56 name. 41:01 Oh, we need to get rid of this is best. 41:03 We want to watch just for the friends. 41:07 Reload. And now we get Mike is my best 41:10 friend. All right. If I was to change 41:15 this to let's say two and reload. We get 41:19 Jenna is my best friend. All right, so 41:22 we're going to go ahead and stop here. I 41:24 think I covered all of the basics and 41:26 fundamentals of reactive and hopefully 41:28 you found it interesting. Um, and you 41:31 can see how easy it is. If I mean, if 41:33 you have experience with Angular or 41:35 React, uh, this is very similar and I 41:38 think it's even a little bit easier. So, 41:40 I would suggest looking more into it. 41:42 read the documentation. Um, check out 41:44 the course that we created at 41:46 edgewanx.com. 41:48 I don't have a link yet, but I'll put it 41:49 in this in the description when it's 41:51 published. We just finished it 41:53 yesterday. So, um, thanks for watching 41:55 and I'll see you next time.
1:38:36
1:40
7:18
43:53