1 00:00:02,250 --> 00:00:05,060 For this, attached you find a starting project. 2 00:00:05,100 --> 00:00:11,870 This starting project was created with create-react-app, a tool created by the React team 3 00:00:11,880 --> 00:00:18,620 in the end which makes it easy to spin up new React projects and give us a project structure like this. 4 00:00:18,630 --> 00:00:23,430 I adjusted it a little bit but generally, it's exactly the same you would get from this tool. 5 00:00:23,460 --> 00:00:29,550 Now why do we need such a tool, why don't we just import a script in a HTML file and get started? 6 00:00:30,180 --> 00:00:33,780 Because React is a bit more complex than vanilla Javascript. 7 00:00:33,840 --> 00:00:39,900 In the end we ship vanilla Javascript code but the way we write the code is a bit more convenient to 8 00:00:39,900 --> 00:00:40,940 us as a developer. 9 00:00:41,040 --> 00:00:46,650 We can use certain features which wouldn't run in the browser and therefore this project setup here 10 00:00:46,650 --> 00:00:52,710 has a couple of tools included which take the code we write as a developer and actually convert it to 11 00:00:52,710 --> 00:00:54,540 code that runs in the browser 12 00:00:54,570 --> 00:00:58,350 so that we have normal code that is executed in the browser 13 00:00:58,350 --> 00:01:02,220 but we have an easier time writing that code as a developer. 14 00:01:02,220 --> 00:01:07,800 In addition we get a development server, which is a simple server that serves our frontend application, 15 00:01:07,840 --> 00:01:13,650 so which has no backend, only serves that frontend application and which automatically reloads or injects 16 00:01:13,650 --> 00:01:18,740 changes whenever we change and save something in one of our source code files. 17 00:01:18,780 --> 00:01:26,190 In addition here with React, we're building a single page application, that's not a must do but it's a 18 00:01:26,190 --> 00:01:29,350 common choice. In a single page application, 19 00:01:29,370 --> 00:01:34,850 you only have one HTML file which in the end is returned by the server serving that application, 20 00:01:34,890 --> 00:01:43,740 in this case this HTML file, which itself is relatively empty but this file will then later include script 21 00:01:43,770 --> 00:01:44,640 imports, 22 00:01:44,640 --> 00:01:50,910 they will be added automatically by these tools I mentioned earlier, which in the end host and run our 23 00:01:51,120 --> 00:01:57,390 React application which we in turn write here in the source folder with our files we got there, so that 24 00:01:57,450 --> 00:02:04,410 in the end we have a web application, a frontend which consists of one HTML file, where then Javascript 25 00:02:04,410 --> 00:02:10,740 is used to render something on the screen and re-render that something on the screen when it's needed 26 00:02:11,250 --> 00:02:17,880 and that allows us to build highly reactive modern user interfaces, where everything happens instantly 27 00:02:18,000 --> 00:02:20,250 because Javascript runs the browser, 28 00:02:20,250 --> 00:02:21,480 things happen instantly. 29 00:02:21,540 --> 00:02:25,790 We don't need to wait for a new HTML file to be downloaded from a server, 30 00:02:25,950 --> 00:02:27,570 instead everything is already there. 31 00:02:27,570 --> 00:02:33,240 So when a user clicks a button and we want to show a box on the screen in response to that click, boom 32 00:02:33,540 --> 00:02:34,500 it happens instantly 33 00:02:34,530 --> 00:02:37,850 because of Javascript. That's the feeling we want to provide and 34 00:02:37,900 --> 00:02:40,130 we can do that with React. Now 35 00:02:40,200 --> 00:02:41,880 enough talking about the theory, 36 00:02:42,030 --> 00:02:43,210 let's write some code. 37 00:02:43,350 --> 00:02:48,190 As I mentioned, we do that here in the source folder where we find an index.js file and an app.js 38 00:02:48,200 --> 00:02:48,670 file, 39 00:02:48,900 --> 00:02:50,970 both very simple files. 40 00:02:50,970 --> 00:02:53,340 Now let's have a look at the index.js file, 41 00:02:53,340 --> 00:02:56,300 there you see we have a couple of imports at the top. 42 00:02:56,310 --> 00:03:04,020 This is by the way how you import code on the frontend, import something from and then either a relative 43 00:03:04,020 --> 00:03:09,500 path to your own file or if it's a third-party package, just a package name 44 00:03:09,750 --> 00:03:13,140 and then here, we have imports from our own files with a relative path 45 00:03:13,170 --> 00:03:19,700 as I mentioned and then here we are executing one command in the end, React DOM render. 46 00:03:19,740 --> 00:03:25,350 Now this is coming from the React DOM object here at the end which we're importing from the React DOM 47 00:03:25,560 --> 00:03:31,500 library and that renders this strange thing which is not regular Javascript 48 00:03:31,500 --> 00:03:34,290 into this place on our HTML page. 49 00:03:34,290 --> 00:03:39,360 This is regular Javascript and here we are selecting the element with an ID of root 50 00:03:39,510 --> 00:03:43,110 if we have a look at our single HTML file, that is this div here, 51 00:03:43,110 --> 00:03:49,730 so that is in the end where our React single page application will be hosted to and thereafter React 52 00:03:49,730 --> 00:03:53,740 will take over and render everything in that place. 53 00:03:53,940 --> 00:03:55,250 So that's what we're doing here 54 00:03:55,260 --> 00:03:58,320 but what is this strange thing? Now for that 55 00:03:58,320 --> 00:04:01,500 we need to understand what components are and how React works.