1 00:00:02,390 --> 00:00:07,700 So we learned that we have these index.js file and I can tell you that this file in the end includes 2 00:00:07,700 --> 00:00:13,910 the code which executes first when we start our app and that this renders this strange thing into the 3 00:00:13,910 --> 00:00:16,760 place of this div here. 4 00:00:16,760 --> 00:00:20,150 Now what is that strange app thing here? 5 00:00:20,180 --> 00:00:26,900 We're importing app from this app file, in the end from the app.js file because extensions are added automatically 6 00:00:26,900 --> 00:00:28,380 on the imports and 7 00:00:28,450 --> 00:00:31,480 there what we have is in the end a Javascript function. 8 00:00:31,490 --> 00:00:37,910 This is a regular function, an arrow function stored in this constant and then we export this constant and 9 00:00:37,910 --> 00:00:40,550 therefore this function, pretty straightforward 10 00:00:40,550 --> 00:00:43,370 but the thing inside of the function is not straightforward. 11 00:00:43,520 --> 00:00:50,780 What we return here looks like HTML, just like this looks like HTML but it's in a Javascript 12 00:00:50,780 --> 00:00:52,780 file, it can't be HTML right, 13 00:00:52,790 --> 00:00:55,930 you can't add HTML in a Javascript file. 14 00:00:56,210 --> 00:00:59,360 That's a special syntax invented by the React team, 15 00:00:59,360 --> 00:01:08,570 it's called jsx and it allows us HTML looking code in Javascript files and under the hood, 16 00:01:08,570 --> 00:01:14,390 this will be translated to instructions React understands. In detail, 17 00:01:14,390 --> 00:01:24,140 this here is similar to React create element, a method provided on this React object here and then here 18 00:01:25,480 --> 00:01:32,630 h1 and then here, null or an empty object 19 00:01:32,750 --> 00:01:36,890 and then as a third argument, your text here, for example 20 00:01:36,980 --> 00:01:46,170 Hi this is React, different text than before but it will render something similar on the screen. 21 00:01:46,200 --> 00:01:49,260 This will yield the same result and I can prove that to you 22 00:01:49,410 --> 00:01:55,440 if we simply start our development server and try to see this app in action. To start it, in the package.json 23 00:01:55,440 --> 00:02:00,510 file, we find a script, the start script which already exists there and this will in the 24 00:02:00,510 --> 00:02:06,480 end use that tooling I mentioned earlier to then transform our code and to start up a development server 25 00:02:06,510 --> 00:02:11,200 which automatically reloads or injects changes when we change something. 26 00:02:11,220 --> 00:02:17,700 So here, we can open up a new terminal integrated into this IDE and there, run 27 00:02:17,720 --> 00:02:23,200 npm start to bring up that development server and you should keep that server up and running as long 28 00:02:23,230 --> 00:02:28,600 as you are working on your code because when you close it, you can't preview your page anymore, your app 29 00:02:28,600 --> 00:02:29,950 anymore. 30 00:02:29,950 --> 00:02:34,900 Now when you start this server, when you run npm start, it should automatically open up a new tab in the 31 00:02:34,900 --> 00:02:37,090 browser on localhost:3000, 32 00:02:37,150 --> 00:02:43,120 if it doesn't, simply do so on your own and visit it and there you should see Hi this is React, which clearly 33 00:02:43,120 --> 00:02:45,340 is the text I entered here. 34 00:02:45,430 --> 00:02:53,440 So in the end, this here is React syntax and we could write our entire app with this syntax but this 35 00:02:53,440 --> 00:02:58,230 gets very cumbersome, especially if we start nesting elements into each other, 36 00:02:58,240 --> 00:03:05,140 that is why React gives us this alternative jsx syntax which in the end is just translated to React 37 00:03:05,170 --> 00:03:08,300 create element and then what I just showed you. 38 00:03:08,380 --> 00:03:13,840 That's also why we need to import React here, even though it looks like we're not using this React object 39 00:03:13,960 --> 00:03:15,150 anywhere in this file, 40 00:03:15,160 --> 00:03:15,420 right, 41 00:03:15,430 --> 00:03:18,300 we have this React text here but that's something different. 42 00:03:18,610 --> 00:03:20,710 So we're not using it anywhere in this file, 43 00:03:20,710 --> 00:03:27,340 well it gets used implicitly because this is just syntactic sugar, in the end it is translated to that 44 00:03:27,430 --> 00:03:28,180 other syntax 45 00:03:28,180 --> 00:03:34,780 I showed you and that is what React is all about; we tell React which elements that should render and 46 00:03:34,870 --> 00:03:41,020 under the hood, it then will translate this into commands that the DOM understands, that the browser understands 47 00:03:41,290 --> 00:03:43,890 to render real DOM elements. 48 00:03:43,890 --> 00:03:50,320 Now for example, if I add the title here which gives us this tooltip that's built into the browser basically, 49 00:03:51,550 --> 00:03:55,570 this works and I save this, it automatically reloads, 50 00:03:55,570 --> 00:03:58,470 you don't need to do so on your own and if you now hover over this, 51 00:03:58,570 --> 00:04:04,920 you see this tooltip, this works, very small here but you can see it if you test this on your own system. 52 00:04:04,940 --> 00:04:15,780 Now this works because that in the end is translated to React create element h1, then this object which 53 00:04:15,780 --> 00:04:17,330 we previously left empty, 54 00:04:17,430 --> 00:04:23,820 here we set the attributes or the properties we want to set on that DOM node which is created here, in 55 00:04:23,820 --> 00:04:28,740 this case title too, this works and then thereafter, we have the text. 56 00:04:28,740 --> 00:04:33,480 This is how this works and React will do everything it needs to do, it will create this element, it will 57 00:04:33,480 --> 00:04:40,020 set all these properties or attributes here and it will render the last argument here inside of that 58 00:04:40,020 --> 00:04:46,830 created element and that's also the part where this jsx code helps us because if in here, we have 59 00:04:46,860 --> 00:04:54,570 let's say another HTML element, we would have to nest multiple React create element calls into each 60 00:04:54,570 --> 00:04:57,530 other, which quickly becomes very hard to manage, 61 00:04:57,540 --> 00:05:03,000 that's why this jsx syntax here is a great idea, a great invention. 62 00:05:03,000 --> 00:05:09,270 So we will use the syntax and we also use it here in index.js, the difference is though that here we don't use 63 00:05:09,270 --> 00:05:17,880 it with a normal HTML DOM element but instead here we use a custom function because we are using what 64 00:05:17,880 --> 00:05:25,290 gets exported in the app.js file and what we export there is a normal Javascript function. Well that 65 00:05:25,290 --> 00:05:29,040 is one of the most important concepts of React, components.