1 00:00:02,220 --> 00:00:08,130 For that attached, you find a React project and this is actually the project we worked on before. 2 00:00:08,250 --> 00:00:14,630 It's this project where you can find a place by entering it here or by getting your current user location 3 00:00:15,160 --> 00:00:17,880 and where you can then share this place and view this place. 4 00:00:17,880 --> 00:00:21,450 So this is something we built before with vanilla Javascript, 5 00:00:21,450 --> 00:00:27,930 I now converted it to React and I will now have a look at it with you so that we can get a first understanding 6 00:00:27,930 --> 00:00:28,420 of React. 7 00:00:28,440 --> 00:00:35,400 Now I did convert it off screen because this is not a React course and you could easily create an entire 8 00:00:35,400 --> 00:00:36,640 course about React, 9 00:00:36,720 --> 00:00:39,840 well indeed I do have an entire React course. 10 00:00:39,930 --> 00:00:45,090 Now I don't want to bloat this cause with tons of React instructions which might not be interesting 11 00:00:45,090 --> 00:00:47,170 to you if you're not interested in React, 12 00:00:47,220 --> 00:00:54,390 instead I just want to show you what React or similar packages like Angular or Vue typically do and 13 00:00:54,390 --> 00:00:58,560 how it may change the way you think about creating such applications. 14 00:00:58,590 --> 00:01:01,330 If you then want to learn React or Angular or Vue, 15 00:01:01,440 --> 00:01:07,290 have a look at my dedicated courses. So attached you find this project and with it downloaded, 16 00:01:07,320 --> 00:01:13,740 you should extract it and then navigate into this or open it in your IDE, open the terminal there and 17 00:01:13,740 --> 00:01:18,510 then run npm start. Npm start in the end starts 18 00:01:18,520 --> 00:01:19,760 also one of these scripts, 19 00:01:19,770 --> 00:01:24,720 the starts script is a special script which you don't need to start with npm run but where you can 20 00:01:24,720 --> 00:01:26,570 just type npm start 21 00:01:26,820 --> 00:01:31,680 and this uses the entire setup which is provided by this project under the hood. 22 00:01:31,680 --> 00:01:35,550 It uses webpack under the hood to convert the code, to bundle the code, 23 00:01:35,550 --> 00:01:42,060 so we got basically a setup as you saw it before but with all the configuration and the heavy lifting 24 00:01:42,240 --> 00:01:44,490 managed for us behind the scenes. 25 00:01:44,490 --> 00:01:49,860 This is also something these frameworks or big libraries typically do for you, 26 00:01:49,920 --> 00:01:55,260 they give you project setups where you don't have to configure everything manually and that of course 27 00:01:55,260 --> 00:02:01,640 ensures that you don't have to become a webpack master just to create and ship optimal code. 28 00:02:01,680 --> 00:02:03,200 Now keep that process running here, 29 00:02:03,210 --> 00:02:08,670 you can always quit it with control c but then you will not have that development server anymore, 30 00:02:08,670 --> 00:02:12,990 just like before it's a server which will automatically reload whenever you change something in code 31 00:02:13,410 --> 00:02:18,080 and you can view it on this page here, localhost:3000, 32 00:02:18,390 --> 00:02:19,950 so this is what I got here. 33 00:02:20,010 --> 00:02:23,720 Now if we have a look at this, it is of course the same as before, 34 00:02:23,760 --> 00:02:27,670 it looks the same but we got totally different code in there. 35 00:02:27,750 --> 00:02:30,570 We can find our code in the source folder, 36 00:02:30,570 --> 00:02:36,900 the public folder holds the one and only HTML file we got and if we have a look at that HTML file, you 37 00:02:36,900 --> 00:02:39,300 see it's pretty empty and it's also only one, 38 00:02:39,330 --> 00:02:45,780 before we had two. The reason for that is that with React here and you typically do the same with Angular 39 00:02:45,780 --> 00:02:46,760 and Vue, 40 00:02:46,770 --> 00:02:52,800 we created a so-called single page application, which means we only have one single HTML page and 41 00:02:52,800 --> 00:02:58,800 now Javascript will render everything we see on the screen here and will change everything on the screen 42 00:02:58,800 --> 00:02:59,760 if it needs to. 43 00:02:59,790 --> 00:03:05,880 Now before we used HTML for that and doing it all with Javascript would be a lot of work if we had to 44 00:03:05,880 --> 00:03:10,100 write all these instructions on our own, with React or similar frameworks 45 00:03:10,110 --> 00:03:12,830 it's a breeze because React does the heavy lifting. 46 00:03:12,930 --> 00:03:15,510 Now how does React know what to render though? 47 00:03:15,570 --> 00:03:20,820 Well we get this root div here in our one and only index.html file and if you have a look at the index.js 48 00:03:20,820 --> 00:03:26,080 file which I can tell you is the first code that is being executed by our React application in 49 00:03:26,080 --> 00:03:27,340 the end, 50 00:03:27,390 --> 00:03:32,850 we see a bunch of imports and we see that in the end, we get some very strange code here which we haven't 51 00:03:32,850 --> 00:03:39,560 seen before and that we then target this root element in the index.html file here. So what is going on 52 00:03:39,560 --> 00:03:46,160 here? React and React DOM, the things we import here are features from the React library and the React 53 00:03:46,220 --> 00:03:50,750 DOM library which of course is connected to the React library. React 54 00:03:50,750 --> 00:03:57,260 DOM gives us access to the DOM and allows us to render a so-called React component to that DOM in this 55 00:03:57,260 --> 00:03:58,850 place. 56 00:03:58,850 --> 00:04:01,030 Now this here is a React component 57 00:04:01,040 --> 00:04:06,080 and this here also is using this jsx syntax I mentioned earlier. 58 00:04:06,080 --> 00:04:12,290 It was invented by the React team and this is definitely not Javascript that would run in the browser, 59 00:04:12,290 --> 00:04:14,310 this is really important to keep in mind, 60 00:04:14,390 --> 00:04:22,640 instead this is converted to a real Javascript instruction that the browser can execute before the code 61 00:04:22,670 --> 00:04:24,230 is shipped, 62 00:04:24,230 --> 00:04:29,230 so during the build process so to say, so when you previously ran the webpack command, 63 00:04:29,240 --> 00:04:35,360 now when we get this built-in development workflow, when that executes, this is converted and actually 64 00:04:35,360 --> 00:04:44,080 this is converted to React create element app. This is what happens here, 65 00:04:44,080 --> 00:04:46,150 this is the exact same. In the end, 66 00:04:46,150 --> 00:04:53,230 this jsx code is converted to React create element instruction to which we pass a React component 67 00:04:53,260 --> 00:04:57,850 which in this case here is a component coming from the app.js file and we'll have a look into this 68 00:04:57,850 --> 00:04:59,460 file in a second. 69 00:04:59,460 --> 00:05:05,480 Now because that's a lot to write, especially if we have more and more such components we compose together, 70 00:05:05,500 --> 00:05:10,950 we got this special jsx syntax which does this conversion to this other code behind the scenes, 71 00:05:10,960 --> 00:05:16,510 this is also the reason why we are importing React here even though I'm currently not using React itself 72 00:05:16,600 --> 00:05:17,940 anywhere in this file, 73 00:05:18,100 --> 00:05:24,820 well it implicitly gets used because this here gets converted to React create element and then React 74 00:05:24,850 --> 00:05:26,440 is getting used. 75 00:05:26,440 --> 00:05:31,360 So this is this jsx code and again I do of course explain all of that in more detail in my React 76 00:05:31,360 --> 00:05:31,800 course, 77 00:05:31,810 --> 00:05:37,330 for now we can just take for granted that with this instruction, we're rendering something in this place 78 00:05:37,330 --> 00:05:40,690 here and that's something is this app component as I called it. 79 00:05:40,690 --> 00:05:45,050 Now let's have a look into this app file to understand what such a component is. 80 00:05:45,220 --> 00:05:53,380 If we have a look into the app.js file, we see okay here I got a function which is exported with a default 81 00:05:53,410 --> 00:06:00,130 export, I'm importing more things from other files so I'm importing React again because we see this jsx 82 00:06:00,130 --> 00:06:06,310 code again and I'm importing something from the React router DOM package, another package not 83 00:06:06,310 --> 00:06:12,130 directly managed by the React team but part of the React ecosystem which in the end allows us to render 84 00:06:12,130 --> 00:06:15,280 different content for different URLs we're visiting 85 00:06:15,400 --> 00:06:21,760 so if I go to /my-place, the content of this page is swapped entirely and something totally different 86 00:06:21,760 --> 00:06:29,860 is rendered. With this here, we in the end tell React which component to render for which path in our URL 87 00:06:29,860 --> 00:06:35,590 and this is then all happening in the browser and it's using Javascript there to then fill the 88 00:06:35,590 --> 00:06:43,420 page with content, so to tweak the DOM on the fly when we enter a different URL for example. 89 00:06:43,550 --> 00:06:49,060 This is what React does and the React router helps us with rendering different content for different 90 00:06:49,180 --> 00:06:51,540 paths in the URL. 91 00:06:51,610 --> 00:06:55,470 So let's have a look at share place then maybe, that's rendered for slash 92 00:06:55,480 --> 00:06:56,220 nothing, 93 00:06:56,350 --> 00:07:01,360 so that's rendered when we just visit localhost:3000/. 94 00:07:01,360 --> 00:07:08,840 So if we go to pages, SharePlace.js, we see a long file, 95 00:07:08,840 --> 00:07:10,130 now let's have a look at it. 96 00:07:10,180 --> 00:07:14,320 In the end what we got in there is an arrow function stored in a constant, 97 00:07:14,320 --> 00:07:20,060 so we got a function in the end and that function in the end down there at the very bottom is exported, 98 00:07:20,080 --> 00:07:25,570 so I'm exporting a function in that file and that's important. In React 99 00:07:25,570 --> 00:07:31,480 you can write special functions which in the end are normal Javascript functions but which behave in 100 00:07:31,480 --> 00:07:32,600 a certain way, 101 00:07:32,680 --> 00:07:35,230 for example they always return jsx code, 102 00:07:35,230 --> 00:07:41,680 that's a must have, which are then treated by React as so-called React components, which is really just 103 00:07:41,680 --> 00:07:46,590 an internal term, it's nothing Javascript specific, it's just a description. 104 00:07:46,810 --> 00:07:53,470 Now such a function is a normal Javascript function but we're not calling it, I'm in the end just passing 105 00:07:53,470 --> 00:08:00,670 this in create element here to React as you saw before and React then execute these functions for us 106 00:08:00,970 --> 00:08:07,750 to pass in data this function needs and to use this returned jsx code which the end is just a bunch 107 00:08:07,750 --> 00:08:15,760 of nested React create element calls as you saw to then in turn use all these instructions to render 108 00:08:15,760 --> 00:08:17,020 something onto the screen 109 00:08:17,020 --> 00:08:22,900 and if you inspect this, you'll see we got a populated DOM here. So the DOM really was touched and 110 00:08:22,900 --> 00:08:29,080 content was added to the DOM but all that was done by Javascript, of course not Javascript 111 00:08:29,080 --> 00:08:36,430 we wrote on our own, we're not having a single create element or append element line anywhere in this 112 00:08:36,430 --> 00:08:38,250 file or anywhere in this project, 113 00:08:38,350 --> 00:08:41,980 instead React does this based on our instructions here, 114 00:08:41,980 --> 00:08:44,440 that's why we have this jsx code which the React 115 00:08:44,440 --> 00:08:45,320 team invented, 116 00:08:45,400 --> 00:08:46,770 it's simply more readable, 117 00:08:46,780 --> 00:08:48,090 it looks like HTML 118 00:08:48,250 --> 00:08:50,490 even though it technically isn't HTML. 119 00:08:50,890 --> 00:08:52,640 So in the SharePlace.js file, 120 00:08:52,660 --> 00:08:57,880 we got such a function which we export, we're importing some stuff from React and we're importing some 121 00:08:57,880 --> 00:08:59,460 things from other files. 122 00:08:59,470 --> 00:09:03,250 We're also importing a CSS file here which is super weird, 123 00:09:03,250 --> 00:09:04,930 this is not React specific though, 124 00:09:05,050 --> 00:09:08,370 this is something webpack can do if you add the right loader, 125 00:09:08,440 --> 00:09:14,950 in the end that will just tell webpack to also take a look at that CSS file and bundle it up and 126 00:09:14,950 --> 00:09:20,110 load it as part of your project into your HTML file as well so to say, so this is something 127 00:09:20,110 --> 00:09:21,730 webpack does here. 128 00:09:21,730 --> 00:09:24,410 Now let's have a look into our component function here 129 00:09:24,430 --> 00:09:29,920 though. It's a function which in this case gets no arguments, React would actually pass in some arguments 130 00:09:29,920 --> 00:09:30,060 here 131 00:09:30,070 --> 00:09:35,150 if we were interested but here I'm not, I'll come back to which arguments we could get later 132 00:09:35,320 --> 00:09:42,050 and then here I get a bunch of strange instructions, using a use state function and the use ref function. 133 00:09:42,170 --> 00:09:49,450 These are functions provided by React and this is the most modern React syntax we can use at this time 134 00:09:50,050 --> 00:09:57,790 to inform React about certain dependencies we have in this share place component if you want to call 135 00:09:57,790 --> 00:09:59,160 it like that. React 136 00:09:59,260 --> 00:10:05,410 actually also has another syntax for creating components where you use the class keyword to create 137 00:10:05,410 --> 00:10:07,130 a normal Javascript class 138 00:10:07,270 --> 00:10:10,930 and that is also totally fine to use, you'll see that in many projects too 139 00:10:11,050 --> 00:10:13,960 and in my course, I teach both syntaxes, here 140 00:10:13,990 --> 00:10:20,590 I focus on this function-driven syntax though which is perfectly fine to use and which is also the more 141 00:10:20,590 --> 00:10:26,500 modern of the two syntaxes. So here in this function, we then have a couple of function calls to use 142 00:10:26,530 --> 00:10:32,920 state and use ref which are functions that are coming from the React library. In the end, this set up certain 143 00:10:32,920 --> 00:10:42,280 things for React to watch, for example use state sets up certain state data pieces you could say which 144 00:10:42,370 --> 00:10:47,090 when they change trigger this component to be re-rendered on the screen. 145 00:10:47,200 --> 00:10:54,700 So whenever some data here changes, React goes ahead and updates the UI and this reactivity is built 146 00:10:54,700 --> 00:11:02,020 into React. Use ref gives us access to DOM elements so that we can read a value from an input for example. 147 00:11:02,920 --> 00:11:09,700 Now and without going into too many details, in the end the way we build a UI with React is such that 148 00:11:09,700 --> 00:11:18,280 we have these states or these state data pieces, we use array destructuring here to get two pieces of 149 00:11:18,280 --> 00:11:20,410 data out of the result of use state, 150 00:11:20,410 --> 00:11:25,840 one is the current state stored by React and one is a function that allows us to change that state which 151 00:11:25,840 --> 00:11:33,370 then in turn will trigger such a UI update and React will then have a look at our jsx code down 152 00:11:33,370 --> 00:11:38,690 there and wherever we use some state that changed now, it will go ahead, 153 00:11:38,710 --> 00:11:46,940 reach out to the real DOM and update that part of the DOM to match this updated state. As an example, 154 00:11:47,020 --> 00:11:49,750 we got that get current location button here, 155 00:11:49,780 --> 00:11:56,260 right? Now you'll see I added a click listener here with another new instruction which we haven't used 156 00:11:56,260 --> 00:11:57,090 before, 157 00:11:57,100 --> 00:11:59,000 this again is understood by React 158 00:11:59,020 --> 00:12:04,990 and here I'm saying if this is clicked, execute the get user location handler function. Now we find this 159 00:12:04,990 --> 00:12:08,550 function here as a nested function in this component function, 160 00:12:08,560 --> 00:12:15,400 here it is and that's the same function we build before when we built this whole project with just Javascript 161 00:12:15,400 --> 00:12:16,340 in the end, 162 00:12:16,360 --> 00:12:19,270 well at least the rough idea is the same. 163 00:12:19,270 --> 00:12:25,510 However here for example, instead of creating a modal class and calling modal.show which I did before, 164 00:12:25,830 --> 00:12:32,390 I'm setting isLoading to true with help of set isLoading which I get out of this use state 165 00:12:32,400 --> 00:12:37,860 call up there. Now this changes the loading state to true, 166 00:12:38,020 --> 00:12:43,630 initially it's undefined because I didn't pass a value to use state here which would be used to initialize 167 00:12:43,630 --> 00:12:44,400 this state. 168 00:12:44,410 --> 00:12:46,550 So initially it's undefined, here 169 00:12:46,560 --> 00:12:54,320 I'm then setting it to true. Now then we get the user location and once I got the location, I set is loading 170 00:12:54,320 --> 00:12:59,440 to false and the coordinates and the address I got is also stored in state 171 00:12:59,540 --> 00:13:05,010 and by calling all these set functions, the state is changed in React and I tell React 172 00:13:05,030 --> 00:13:11,260 hey your state changes, you want to check your UI, your jsx code 173 00:13:11,480 --> 00:13:17,420 if I'm using that state anywhere down there and if I am and if that now leads to a different output than 174 00:13:17,420 --> 00:13:21,230 before, please go ahead and update it in the DOM, 175 00:13:21,230 --> 00:13:23,360 that's what I'm telling React here. 176 00:13:23,390 --> 00:13:27,610 So when I get the user location, I save the coordinates, I save the address, 177 00:13:27,620 --> 00:13:28,850 I change the loading state. 178 00:13:29,420 --> 00:13:31,690 So what do all these changes do? 179 00:13:31,700 --> 00:13:36,320 Let's have a look at our jsx code. For example I'm using the is loading state here, 180 00:13:36,350 --> 00:13:42,650 these curly braces, that's some special React syntax which mixed with the jsx code just tells React 181 00:13:42,710 --> 00:13:46,190 hey this is not jsx here, at least not entirely, 182 00:13:46,190 --> 00:13:50,180 instead this is also regular Javascript code mixed with some jsx maybe. 183 00:13:51,110 --> 00:13:56,510 So here, I'm basically having is loading and then I'm using this shortcut you learned about earlier 184 00:13:56,510 --> 00:14:01,600 in the course where say if is loading is true, then this should be rendered. 185 00:14:01,640 --> 00:14:07,160 So this is now my way of expressing that I want to render the modal if we're loading and is loading 186 00:14:07,180 --> 00:14:14,780 switches back to false, then this will overall yield false and this will no longer be rendered or returned 187 00:14:14,780 --> 00:14:20,120 as a result of this expression and therefore React will then go ahead and update the DOM and remove 188 00:14:20,120 --> 00:14:25,940 the modal content which in the end is rendered because you see here we also got some normal HTML elements 189 00:14:25,940 --> 00:14:29,870 in there which in the end are output on the screen by React. 190 00:14:29,870 --> 00:14:36,530 So this is what I meant, you don't have these manual calls to create an element, to append it, to remove 191 00:14:36,530 --> 00:14:43,640 it, instead you defined the result you want to have, possibly under a certain condition and React will 192 00:14:43,640 --> 00:14:49,490 just make sure that this ends up on the page correctly and that if I click get current location, we get 193 00:14:49,490 --> 00:14:56,060 this modal, this is something React we'll take care about and it's the same not just for is loading but 194 00:14:56,060 --> 00:15:02,330 also for the coordinates which I got. When I got chosen coords, I in the end pass them here to my selected 195 00:15:02,330 --> 00:15:03,780 place component. 196 00:15:03,770 --> 00:15:09,440 This is also one of my React components and unlike the other components we saw thus far, this component 197 00:15:09,590 --> 00:15:11,030 takes two inputs, 198 00:15:11,030 --> 00:15:16,070 you can think of these almost like function parameters which are passed in and you will see how these 199 00:15:16,070 --> 00:15:19,430 are received and handled in just a second. 200 00:15:19,430 --> 00:15:26,120 Same here for the sharable link, I bind the value property in the end of the input to sharable link and 201 00:15:26,120 --> 00:15:33,560 I can change the shareable link and I do change it with set shareable link in this page here or in this 202 00:15:33,620 --> 00:15:34,270 component 203 00:15:34,310 --> 00:15:40,060 and when this changes and gets a new value, React will go to the place where I use sharable link, 204 00:15:40,100 --> 00:15:45,560 so for example here and will update the value there, on the screen as well. 205 00:15:45,560 --> 00:15:49,030 This is how React thinks and that's of course just the quick summary, 206 00:15:49,040 --> 00:15:54,590 definitely a lot to digest if you've never worked with it but it hopefully gives you an idea of how 207 00:15:54,590 --> 00:16:01,010 React works and what the huge difference to vanilla Javascript is, you define the result, not the way how 208 00:16:01,010 --> 00:16:02,030 you reach it 209 00:16:02,110 --> 00:16:07,150 and again in my React course, you'll learn all about that step-by-step from the ground up 210 00:16:07,160 --> 00:16:13,190 also with that alternative syntax which I mentioned before. Now let's have a look at the selected place 211 00:16:13,190 --> 00:16:19,790 component which we find in the UI folder. There we see we got some inputs and therefore here I got this 212 00:16:19,850 --> 00:16:21,500 props parameter. 213 00:16:21,710 --> 00:16:28,720 If you set up certain inputs on a component you use, just like you would add attributes to a normal HTML 214 00:16:28,730 --> 00:16:35,630 element, React will bundle them all up as properties in one object which this component function 215 00:16:35,630 --> 00:16:36,800 receives. 216 00:16:36,800 --> 00:16:41,870 So in this case, the selected place component receives this props object which holds the center coords 217 00:16:42,050 --> 00:16:48,290 and fallback text properties which I'm pulling out of that object with object destructuring here. Well 218 00:16:48,290 --> 00:16:53,660 and then again, I use use effect here which is coming from React which the end just tells React that 219 00:16:53,660 --> 00:16:59,120 I can set up a listener to some data and when that changes, I want to execute some code, 220 00:16:59,120 --> 00:17:04,370 so if I don't just want to update the UI reactively as before but I want to do something else, 221 00:17:04,360 --> 00:17:09,420 upon data changes, I can use use effect, I specify a center coords as a dependency, 222 00:17:09,440 --> 00:17:15,380 that's what's being done with that second parameter I pass to use effect which is an array of dependencies 223 00:17:15,760 --> 00:17:20,840 and then inside of that function which I pass as a first parameter to use effect, I can execute some 224 00:17:20,840 --> 00:17:23,010 code when that data changes 225 00:17:23,030 --> 00:17:27,500 and here I'm then using the good old Google Maps package to render a map on the screen, 226 00:17:27,500 --> 00:17:29,360 that's what's happening in this component 227 00:17:29,450 --> 00:17:35,450 as an example. Down there I also have a condition that if I don't have any coords yet, I show my fallback 228 00:17:35,480 --> 00:17:35,900 text.