1 00:00:02,000 --> 00:00:05,000 So, what's happening in these two JSX files? 2 00:00:05,000 --> 00:00:09,000 Sure, we have this HTML code in there, which is called JSX, 3 00:00:09,000 --> 00:00:12,000 as you learned, but what exactly is this code doing here? 4 00:00:13,000 --> 00:00:15,000 Well, let's start with main.jsx. 5 00:00:15,000 --> 00:00:19,000 I can tell you that this is the main entry file 6 00:00:19,000 --> 00:00:20,000 of the entire application. 7 00:00:20,000 --> 00:00:23,000 The code in this file is executed first 8 00:00:23,000 --> 00:00:27,000 when this website is being loaded in the browser. 9 00:00:27,000 --> 00:00:29,000 But what's this code doing? 10 00:00:30,000 --> 00:00:35,000 Well, we're importing some things from React libraries. 11 00:00:35,000 --> 00:00:39,000 This is, in the end, the modern JavaScript import syntax 12 00:00:39,000 --> 00:00:42,000 which is also supported by this React project 13 00:00:42,000 --> 00:00:43,000 we created here. 14 00:00:43,000 --> 00:00:47,000 And we are importing some features from the React library 15 00:00:47,000 --> 00:00:50,000 and from the React DOM Library. 16 00:00:51,000 --> 00:00:54,000 Now these libraries are installed in this project 17 00:00:54,000 --> 00:00:56,000 with help of this package.json file. 18 00:00:56,000 --> 00:00:59,000 If you take a look at this package.json file 19 00:00:59,000 --> 00:01:03,000 under dependencies you find React and React DOM. 20 00:01:03,000 --> 00:01:07,000 Now package.json is a file that's used by Node.js 21 00:01:07,000 --> 00:01:09,000 for managing the dependencies of your project, 22 00:01:09,000 --> 00:01:14,000 the third-party packages you want to use in your project. 23 00:01:14,000 --> 00:01:17,000 And it's also commonly used by front-end projects 24 00:01:17,000 --> 00:01:20,000 where you don't build Node.js applications, 25 00:01:20,000 --> 00:01:24,000 for managing the packages of those projects as well. 26 00:01:24,000 --> 00:01:26,000 So therefore, this project, which we have here, 27 00:01:26,000 --> 00:01:30,000 which I created with help of Vite but it would be the same 28 00:01:30,000 --> 00:01:34,000 with Create React App, uses the package.json file 29 00:01:34,000 --> 00:01:39,000 to define external dependencies, to define which 30 00:01:39,000 --> 00:01:42,000 third-party packages will be used in your code. 31 00:01:42,000 --> 00:01:45,000 And here we're using React and React DOM, 32 00:01:45,000 --> 00:01:47,000 which are simply two separate libraries 33 00:01:47,000 --> 00:01:49,000 created by the same team. 34 00:01:49,000 --> 00:01:52,000 And these two libraries together form React, 35 00:01:52,000 --> 00:01:55,000 the React Library you could say. 36 00:01:55,000 --> 00:01:58,000 It's simply a combination of two packages. 37 00:01:58,000 --> 00:02:03,000 Now in main.jsx, it all starts with this React DOM thing 38 00:02:03,000 --> 00:02:06,000 because there we call the createRoot method. 39 00:02:07,000 --> 00:02:12,000 This method takes a pointer at an element in our HTML code. 40 00:02:14,000 --> 00:02:18,000 And this is indeed regular, vanilla JavaScript code here. 41 00:02:18,000 --> 00:02:23,000 Document get element by ID is not React specific. 42 00:02:23,000 --> 00:02:25,000 And what this code does is it reaches out 43 00:02:25,000 --> 00:02:29,000 to this element here, which has the ID root 44 00:02:29,000 --> 00:02:33,000 in this single HTML file that we have in this project. 45 00:02:33,000 --> 00:02:36,000 It's the only HTML file in the entire project. 46 00:02:37,000 --> 00:02:42,000 So this code here, in main.jsx, reaches out to that root, 47 00:02:42,000 --> 00:02:47,000 to this DIV with ID root and then it calls the render 48 00:02:47,000 --> 00:02:52,000 method, in the end, on this object returned by createRoot. 49 00:02:52,000 --> 00:02:54,000 It calls the render method, which is a method 50 00:02:54,000 --> 00:02:59,000 provided by React, by that React DOM part of React, 51 00:02:59,000 --> 00:03:01,000 to be precise. 52 00:03:01,000 --> 00:03:03,000 And we then do this. 53 00:03:03,000 --> 00:03:08,000 We then pass some JSX code to render. 54 00:03:08,000 --> 00:03:13,000 And in the end this simply tells React that inside this DIV 55 00:03:14,000 --> 00:03:18,000 with ID root, or in general the element with ID root, 56 00:03:18,000 --> 00:03:22,000 this React code should be rendered. 57 00:03:22,000 --> 00:03:24,000 So, should be displayed on the screen. 58 00:03:24,000 --> 00:03:28,000 Now this strict mode thing here is a special feature 59 00:03:28,000 --> 00:03:32,000 offered by React, which is simply enabled some extra 60 00:03:32,000 --> 00:03:37,000 checks warning us of potentially suboptimal code 61 00:03:37,000 --> 00:03:38,000 we could be writing. 62 00:03:38,000 --> 00:03:41,000 Also in regards to future changes that might be added 63 00:03:41,000 --> 00:03:45,000 by React where it wants to warn us if we write 64 00:03:45,000 --> 00:03:48,000 slightly outdated code or anything like that. 65 00:03:49,000 --> 00:03:52,000 The more important part is this app thing here, 66 00:03:53,000 --> 00:03:57,000 because this is actually also being imported. 67 00:03:57,000 --> 00:04:02,000 This import, where we import app from ./app, 68 00:04:02,000 --> 00:04:07,000 that in the end gives us an app thing, an app element 69 00:04:07,000 --> 00:04:10,000 as it seems, which is then rendered here 70 00:04:10,000 --> 00:04:12,000 with help of this JSX feature. 71 00:04:12,000 --> 00:04:17,000 So, by using it like a HTML element in our JavaScript file. 72 00:04:18,000 --> 00:04:23,000 Now, ./app simply refers to the app.jsx file. 73 00:04:23,000 --> 00:04:27,000 For JavaScript and JSX files you can and should 74 00:04:27,000 --> 00:04:30,000 omit the file extension here in your import statements 75 00:04:30,000 --> 00:04:33,000 and therefore this refers to app.jsx. 76 00:04:33,000 --> 00:04:38,000 And in there we are exporting a function called app. 77 00:04:39,000 --> 00:04:41,000 That function is a very simple function. 78 00:04:41,000 --> 00:04:46,000 All it does is it returns more JSX code, it returns the 79 00:04:47,000 --> 00:04:52,000 H1 HTML element with a text of "Hello World" inside of it. 80 00:04:53,000 --> 00:04:57,000 Now this is a so-called React component. 81 00:04:57,000 --> 00:05:00,000 And React is all about components. 82 00:05:00,000 --> 00:05:04,000 When you build React apps you, in the end, build components 83 00:05:04,000 --> 00:05:09,000 and components are simply functions that return JSX code. 84 00:05:10,000 --> 00:05:11,000 That's not entirely true. 85 00:05:11,000 --> 00:05:14,000 Theoretically there are a few other things they could return 86 00:05:14,000 --> 00:05:18,000 as well, but typically they return JSX code. 87 00:05:18,000 --> 00:05:22,000 So functions that return JSX code are React components. 88 00:05:23,000 --> 00:05:28,000 And React components can be used in other JSX code. 89 00:05:28,000 --> 00:05:32,000 That's why this app Function, as we just learned, 90 00:05:32,000 --> 00:05:35,000 which is imported in main.jsx, can be used 91 00:05:35,000 --> 00:05:39,000 like a HTML element in this JSX code, 92 00:05:39,000 --> 00:05:41,000 which is passed to render. 93 00:05:42,000 --> 00:05:46,000 Because render wants, in the end, some HTML code, 94 00:05:46,000 --> 00:05:49,000 some JSX code to be precise, that it should output 95 00:05:49,000 --> 00:05:52,000 on the screen, and we can use our own component, 96 00:05:52,000 --> 00:05:56,000 the app component, as part of that JSX code. 97 00:05:57,000 --> 00:06:00,000 Now, our own component, the app component, 98 00:06:00,000 --> 00:06:03,000 returns this H1 element, and therefore ultimately 99 00:06:03,000 --> 00:06:08,000 it's basically this H1 element which is passed to render, 100 00:06:08,000 --> 00:06:11,000 between those strict mode tags, which we can ignore. 101 00:06:11,000 --> 00:06:15,000 And that's why we see "Hello World" on the screen here. 102 00:06:15,000 --> 00:06:19,000 The content of this app component, which we have here. 103 00:06:20,000 --> 00:06:24,000 And I am aware that these are a couple of new concepts, 104 00:06:24,000 --> 00:06:29,000 JSX components, definitely some new stuff here, 105 00:06:29,000 --> 00:06:33,000 but they are also amongst the most important concepts 106 00:06:33,000 --> 00:06:35,000 React has to offer. 107 00:06:35,000 --> 00:06:39,000 Because React is all about you writing your own components, 108 00:06:39,000 --> 00:06:44,000 so your own functions that return HTML code in the end, 109 00:06:44,000 --> 00:06:48,000 and using these different components for then composing 110 00:06:48,000 --> 00:06:51,000 a more complex user interface. 111 00:06:51,000 --> 00:06:54,000 Because components are a key building block 112 00:06:54,000 --> 00:06:57,000 when working with React. 113 00:06:57,000 --> 00:07:02,000 Ultimately, any website you think of can be split up into 114 00:07:02,000 --> 00:07:05,000 different building blocks that make up the website, 115 00:07:05,000 --> 00:07:10,000 like a header at the top, a sidebar on the left, and so on. 116 00:07:10,000 --> 00:07:13,000 And with React you simply build these 117 00:07:13,000 --> 00:07:16,000 individual building blocks as functions 118 00:07:16,000 --> 00:07:18,000 that return JSX code. 119 00:07:18,000 --> 00:07:20,000 And by combining these building blocks 120 00:07:20,000 --> 00:07:23,000 and potentially nesting them into each other 121 00:07:23,000 --> 00:07:28,000 you can build complex user interfaces in a granular, 122 00:07:28,000 --> 00:07:29,000 easy to manage way. 123 00:07:30,000 --> 00:07:34,000 Now, it's not the only important feature added by React, 124 00:07:34,000 --> 00:07:36,000 but it's a key feature nonetheless, 125 00:07:36,000 --> 00:07:38,000 and they offer as a next step 126 00:07:38,000 --> 00:07:41,000 we'll start building our first custom component together, 127 00:07:41,000 --> 00:07:44,000 instead of just working with these predefined ones.