1 00:00:00,750 --> 00:00:02,930 So another we have our local server running. 2 00:00:03,060 --> 00:00:09,450 Let's try making some changes to the existing files and see how it affects this page right here. 3 00:00:09,540 --> 00:00:15,000 Back in my terminal I'm inside the redux simple starter folder and I'm going to go ahead and open up 4 00:00:15,000 --> 00:00:16,820 my code editor. 5 00:00:17,340 --> 00:00:19,660 Make sure that your server is still running. 6 00:00:19,710 --> 00:00:25,430 You can start the server by running NPM star from the command line inside of the project directory. 7 00:00:26,410 --> 00:00:26,830 OK. 8 00:00:26,910 --> 00:00:32,710 So here I have my code editor open and it opens right on into the file index. 9 00:00:32,770 --> 00:00:34,160 Each DML. 10 00:00:34,830 --> 00:00:37,940 You'll notice that we've got just very simple dong here. 11 00:00:37,950 --> 00:00:43,990 You know we've got a head tag body tag which has a single div and a script tag for bundled that. 12 00:00:44,000 --> 00:00:45,210 J Yes. 13 00:00:45,270 --> 00:00:51,000 This bundled up G-S file is the compiled javascript for our entire application. 14 00:00:51,000 --> 00:00:56,610 So this existing repository right here has a bunch of existing js files inside of it that you can see 15 00:00:57,840 --> 00:01:05,010 web pack and babbel take all these files put them all together into a single file and makes them available 16 00:01:05,040 --> 00:01:05,900 as bundled thought. 17 00:01:05,910 --> 00:01:14,290 Jay Yes whenever we visit the web server at localhost ADHD This is the Index or the female file that 18 00:01:14,300 --> 00:01:15,450 we're actually running. 19 00:01:15,720 --> 00:01:19,300 So if I were to add say another division here or not even just did. 20 00:01:19,320 --> 00:01:23,220 But just some random content. 21 00:01:24,030 --> 00:01:31,230 Flip back over to Chrome refresh the page and you'll see I get random content appearing on the page 22 00:01:31,250 --> 00:01:31,700 . 23 00:01:32,160 --> 00:01:37,890 I'm going to go ahead delete the index or delete that extra content and save the file again. 24 00:01:38,760 --> 00:01:41,740 So there's a bunch of existing files in here. 25 00:01:42,300 --> 00:01:43,440 Let's just change. 26 00:01:43,530 --> 00:01:49,050 Let's open up the folder components inside the source directory and the file. 27 00:01:49,050 --> 00:01:50,720 Abduct J Yes. 28 00:01:50,820 --> 00:01:57,690 Inside of here you'll see some existing code with something that says re-act simple starter just to 29 00:01:57,690 --> 00:02:00,120 show what happens and we change some code in here. 30 00:02:00,180 --> 00:02:04,210 We're going to go ahead and just delete this and we'll change it to. 31 00:02:04,890 --> 00:02:06,120 Hello there. 32 00:02:07,080 --> 00:02:13,020 And then I'm going to tab back over refreshed the page and you'll see we have hello there. 33 00:02:13,020 --> 00:02:18,900 So again this development server that we have running this boilerplate package takes all these javascript 34 00:02:18,900 --> 00:02:25,830 files we have bundles them up together and ship it off to the browser whenever we make a change to some 35 00:02:25,830 --> 00:02:27,200 content in a file. 36 00:02:27,270 --> 00:02:32,580 We can just save it refresh the page in the browser and we'll see the new content pop up on the screen 37 00:02:32,600 --> 00:02:33,910 . 38 00:02:34,020 --> 00:02:34,780 Cool. 39 00:02:34,890 --> 00:02:35,630 OK. 40 00:02:35,640 --> 00:02:38,820 So we've got this existing source file in here. 41 00:02:38,850 --> 00:02:41,770 The source folder with a bunch of existing javascript. 42 00:02:41,910 --> 00:02:48,300 Now it's kind of a policy of mine to avoid starting off with as much simple code of boilerplate code 43 00:02:48,330 --> 00:02:52,260 as possible so I don't really want to start with all this boilerplate that we have in here. 44 00:02:52,260 --> 00:02:57,700 You know we've got some directories where you know who knows what actions are inducers or even indexed 45 00:02:57,700 --> 00:02:58,850 but GSR. 46 00:02:59,010 --> 00:03:03,290 So rather than start with some of this prie or this code that was given to us from this boilerplate 47 00:03:03,300 --> 00:03:06,610 package I want to go ahead and we're going to start from scratch. 48 00:03:06,660 --> 00:03:12,630 So I'm going to select the source folder and delete it entirely. 49 00:03:13,080 --> 00:03:20,340 Then we're going to go ahead and make a new folder and we'll call it source and then make a new file 50 00:03:20,520 --> 00:03:21,990 and call it index. 51 00:03:22,110 --> 00:03:23,000 Yes. 52 00:03:23,040 --> 00:03:30,510 So we're basically just starting from scratch here with a blank index dot Js file back over in Chrome 53 00:03:30,510 --> 00:03:30,710 . 54 00:03:30,750 --> 00:03:35,850 I'm going to refresh the page and you'll see we have no content up on the screen anymore. 55 00:03:36,480 --> 00:03:41,400 Most are going to pop up in my console here on the side and you can see that we don't have any errors 56 00:03:41,400 --> 00:03:44,400 or anything like that so totally clean slate here. 57 00:03:44,790 --> 00:03:50,020 All we have is this boilerplate package that's going to take any of the code that we write in here mushed 58 00:03:50,030 --> 00:03:54,180 it all together in a single file and serve it off to the browser. 59 00:03:54,780 --> 00:03:55,270 OK. 60 00:03:55,350 --> 00:03:58,840 So without any further ado let's talk about it or the real answer here. 61 00:03:58,860 --> 00:04:00,990 What is re-act what's re-act doing for us. 62 00:04:00,990 --> 00:04:06,750 How are we going to use it to make any type of application react as a javascript library that is used 63 00:04:06,750 --> 00:04:10,590 to produce each T.M. that is shown to user in a web browser. 64 00:04:10,590 --> 00:04:16,710 So when we write re-act code we're writing individual components or views components. 65 00:04:16,710 --> 00:04:23,550 And I can use the term components and use interchangeably here are snippets of code that produce each 66 00:04:23,560 --> 00:04:24,330 team. 67 00:04:24,660 --> 00:04:32,820 So whenever you think component or you think something that produces each you know we write re-act code 68 00:04:32,940 --> 00:04:39,120 we write multiple different components and we nest these components together by placing one inside the 69 00:04:39,120 --> 00:04:46,260 other in different fashions to make really complex applications relatively simple. 70 00:04:46,260 --> 00:04:50,620 A component is a collection of Javascript functions that produce each T.M.. 71 00:04:50,820 --> 00:04:56,160 So when we're making a component we're writing javascript but it's going to ultimately produce each 72 00:04:56,160 --> 00:04:58,960 TNL. 73 00:04:59,110 --> 00:05:01,850 OK so enough about what components are. 74 00:05:01,880 --> 00:05:04,010 Let's try actually writing one. 75 00:05:04,190 --> 00:05:09,900 So in my code editor here I've got indexed not J us open and we're going to start through this process 76 00:05:09,900 --> 00:05:14,900 here of writing the first component for learning something from scratch. 77 00:05:14,900 --> 00:05:19,790 I'm a big fan of kind of writing out comments or saying like you know what we want to have happen before 78 00:05:19,790 --> 00:05:20,920 we start writing any code. 79 00:05:20,990 --> 00:05:25,190 So I'm going to put two comments in here that just kind of vaguely describe what we're going to try 80 00:05:25,190 --> 00:05:27,370 to accomplish inside this file here. 81 00:05:27,380 --> 00:05:37,800 I'm going to say you know we want to create a new component and this component should produce some hits 82 00:05:37,840 --> 00:05:38,360 you know. 83 00:05:38,420 --> 00:05:42,500 So you know OK you know that makes sense we're making a reactive component we want it to produce some 84 00:05:42,520 --> 00:05:49,430 age to you know to recreate that component we need to actually make sure that it gets put into the dorm 85 00:05:49,430 --> 00:05:50,100 somehow. 86 00:05:50,190 --> 00:05:55,430 You know we're going to write many different components but none of them actually automatically get 87 00:05:55,430 --> 00:05:57,340 inserted into our HMO document. 88 00:05:57,350 --> 00:06:00,020 We have to specifically say react. 89 00:06:00,020 --> 00:06:05,340 Please take this component I just make just made excuse me and shove it into the dorm. 90 00:06:05,390 --> 00:06:08,450 You know I want a user feel a See the thing. 91 00:06:08,450 --> 00:06:19,860 So I will say Take this component's CML will say generated its S.M. and put it on the page. 92 00:06:20,120 --> 00:06:24,010 Which means really in the done right. 93 00:06:24,920 --> 00:06:29,180 So it's going to kind of a two step process that you have here for this first component. 94 00:06:29,420 --> 00:06:34,690 We're first going to make a component and then we're going to show it on the page somehow. 95 00:06:35,620 --> 00:06:36,090 OK. 96 00:06:36,320 --> 00:06:41,620 So as we go through this process I'm going to kind of do in a new fashion. 97 00:06:41,700 --> 00:06:45,630 I can tell you right now we're going to write some code and it's not going to work at first. 98 00:06:45,680 --> 00:06:46,170 OK. 99 00:06:46,430 --> 00:06:50,660 And I know that is kind of frustrating sometimes when you watch a lecture and you know the person says 100 00:06:50,660 --> 00:06:52,690 OK you know oh we're do it the wrong way. 101 00:06:52,760 --> 00:06:53,660 But the purpose here. 102 00:06:53,690 --> 00:06:56,720 The goal is drugs its entire course. 103 00:06:56,720 --> 00:06:59,160 I want you to get really familiar with troubleshooting. 104 00:06:59,210 --> 00:07:03,140 So I want you to not always see the like perfect working. 105 00:07:03,300 --> 00:07:06,480 You know all the code comes together perfectly no errors whatsoever. 106 00:07:06,620 --> 00:07:08,530 I want you to see some of the errors that we get. 107 00:07:08,540 --> 00:07:13,160 And once you get used to them and be able to interpret them and be able to troubleshoot those errors 108 00:07:13,160 --> 00:07:13,510 . 109 00:07:13,550 --> 00:07:19,460 So as we go through this first component we're going to make some mistakes or we make them on purpose 110 00:07:19,460 --> 00:07:19,660 . 111 00:07:19,760 --> 00:07:23,220 But we're going to talk about the errors that we get and we're going to talk about what they mean. 112 00:07:23,420 --> 00:07:28,190 So when you see red text popping up in our console you know something it says like Oops you just messed 113 00:07:28,190 --> 00:07:29,980 something up. 114 00:07:31,100 --> 00:07:34,310 Excuse me I don't want you to think oh you don't read text. 115 00:07:34,310 --> 00:07:35,150 Something is wrong whatever. 116 00:07:35,170 --> 00:07:36,820 Don't you think oh read text. 117 00:07:37,040 --> 00:07:41,450 This is a problem something we need to you know an error that we need to look at understand and try 118 00:07:41,450 --> 00:07:42,670 to troubleshoot. 119 00:07:43,220 --> 00:07:43,850 OK. 120 00:07:44,270 --> 00:07:49,580 So let's get started with our first component here and we're going to just put some color on the screen 121 00:07:49,610 --> 00:07:51,670 and we'll talk about exactly what's happening. 122 00:07:52,040 --> 00:08:05,380 So I going to write Konst app is a function and then return does hi like so. 123 00:08:06,140 --> 00:08:06,930 OK. 124 00:08:07,490 --> 00:08:11,360 So if you're familiar with javascript and I sure hope you are some this is going to look familiar and 125 00:08:11,360 --> 00:08:13,290 some of it's probably going to look pretty weird. 126 00:08:13,550 --> 00:08:19,890 I assure you that it's all javascript even though you do see what looks like some H.T. melon here. 127 00:08:19,970 --> 00:08:22,060 So let's start from the very beginning. 128 00:08:22,150 --> 00:08:32,490 The first weird thing Konst Konst isn't yes 6 or yes 2016 Cynde piece of syntax. 129 00:08:32,510 --> 00:08:37,370 So as we go through this first section here as we start to put our first application together you're 130 00:08:37,370 --> 00:08:45,000 going to see a lot of simultaneously re-act concepts but also yes six concepts at the same time. 131 00:08:45,050 --> 00:08:49,270 I'm going to try to do my best to point out which one is you know this is specifically something that 132 00:08:49,340 --> 00:08:51,310 has 6 and this is specifically something that's. 133 00:08:51,320 --> 00:08:51,800 Yes. 134 00:08:51,800 --> 00:08:59,570 Or soon you react so cuts you might be used to declaring variables by using the keyword var. 135 00:08:59,600 --> 00:09:06,200 So something that looks more like you know var app Konst really is doing some of the same thing it's 136 00:09:06,200 --> 00:09:08,180 declaring a variable. 137 00:09:08,360 --> 00:09:14,090 The only difference here is that when ever we declare a variable with Kunst we're saying this is the 138 00:09:14,090 --> 00:09:15,530 final value of this variable. 139 00:09:15,530 --> 00:09:16,550 It's not going to change. 140 00:09:16,550 --> 00:09:19,810 You know we shouldn't even really call it a variable we should really call it a constant. 141 00:09:20,150 --> 00:09:20,840 It's a constant. 142 00:09:20,840 --> 00:09:22,020 It's never going to change. 143 00:09:22,040 --> 00:09:27,420 And the words were never going to re-assign up down the line. 144 00:09:28,040 --> 00:09:32,880 So you're not going to see something that says like AB equals 5. 145 00:09:32,930 --> 00:09:35,110 This would throw an error right here. 146 00:09:36,080 --> 00:09:36,850 OK. 147 00:09:37,220 --> 00:09:39,790 Next a function. 148 00:09:40,520 --> 00:09:42,700 Hopefully you're familiar with functions. 149 00:09:42,700 --> 00:09:44,290 No nothing too crazy here. 150 00:09:44,300 --> 00:09:49,400 We're just declaring a constant called app and assigning it a function. 151 00:09:49,400 --> 00:09:54,890 What's going on inside the function however is probably well something a little bit new. 152 00:09:54,920 --> 00:09:56,920 Right. 153 00:09:57,980 --> 00:10:01,920 We have some what looks like each CML inside of our function here. 154 00:10:02,390 --> 00:10:06,500 But as we know we can't you know right HTL inside of our javascript so what's going on. 155 00:10:06,890 --> 00:10:11,900 Well this HTML looking stuff right here is what we refer to as J. 156 00:10:11,900 --> 00:10:22,010 S x GSX is a subset or dialect of javascript that allows us to write what looks like HTL inside of our 157 00:10:22,010 --> 00:10:26,260 javascript but is really behind the scenes just javascript. 158 00:10:26,630 --> 00:10:31,850 So this is coming back to the concept that we spoke about earlier where Web pack and babbel is going 159 00:10:31,850 --> 00:10:36,580 to do some level of transpiring of our code before it gets in the browser. 160 00:10:37,220 --> 00:10:42,890 So when this code shows up in our browser it doesn't actually look like you know div high div it looks 161 00:10:42,920 --> 00:10:46,930 totally different and we'll talk a little bit about what it really looks like in the little site in 162 00:10:46,940 --> 00:10:50,070 a little bit here. 163 00:10:51,520 --> 00:10:52,630 OK. 164 00:10:53,870 --> 00:10:57,230 So with this on the screen right now this looks pretty good. 165 00:10:57,230 --> 00:11:02,870 You know we've got a component here and returns some GSX and we'll talk about you know exactly what 166 00:11:02,870 --> 00:11:04,460 Jeff Sachs is doing here. 167 00:11:04,550 --> 00:11:09,230 But you know it looks like Hey this might be you know legitimate this might be something we can do. 168 00:11:09,490 --> 00:11:12,010 So let's go ahead and save this. 169 00:11:12,170 --> 00:11:13,500 Flip over to the browser. 170 00:11:13,670 --> 00:11:16,950 We're going to refresh and nothing. 171 00:11:17,380 --> 00:11:18,280 So. 172 00:11:18,980 --> 00:11:21,700 Of course there is nothing we haven't done step to here yet. 173 00:11:21,950 --> 00:11:25,460 We haven't taken the component yet and put into the page. 174 00:11:25,490 --> 00:11:28,980 So let's continue in the next section and do the second step.