WEBVTT 00:01.390 --> 00:01.940 Hi. 00:02.290 --> 00:08.800 Once we've done our backend API, we are ready to move to another section which is our front end web 00:08.830 --> 00:16.030 application and our web application will be based on React framework, React or React. 00:16.030 --> 00:16.780 JS. 00:16.810 --> 00:22.330 That's a front end framework for JavaScript developed by Facebook. 00:22.360 --> 00:28.750 Actually, that's a very good thing that it has been developed by such a giant because we can be sure 00:28.750 --> 00:35.530 that it's not going to go anywhere soon because they have enough funding and also enough community to 00:35.530 --> 00:38.080 build that and support that framework. 00:38.080 --> 00:44.290 So at the moment, if we go back to the Web framework.com, if you go to JavaScript at the moment, 00:44.290 --> 00:49.940 React is on the top of the list, which is the most popular framework in JavaScript world. 00:49.960 --> 00:57.100 So that's kind of reason why I picked React and recording this course, because if you want to have 00:57.100 --> 01:01.670 a good position on the job market, you kind of need to know React. 01:01.670 --> 01:09.620 And with Django on the backend, it makes a perfect pair because you have unlimited options. 01:09.620 --> 01:15.180 What you can do and which both the technologies you can build anything you like. 01:15.200 --> 01:23.120 So what is a react front end framework for building a single page application? 01:23.120 --> 01:31.190 So you can see here I'm on the React js.org page and if you are looking for any resources, you can 01:31.190 --> 01:35.300 go to docs or tutorial and you can learn a lot of things from there. 01:35.690 --> 01:37.190 So that's very useful. 01:37.190 --> 01:42.170 The documentation is very well written, so I advise you to go there. 01:42.720 --> 01:44.730 And check things out. 01:45.450 --> 01:49.830 So you can see here a little bit of snippets here. 01:49.830 --> 01:53.910 And we will be talking about this more. 01:53.940 --> 01:59.730 I will show you how to create your React application and we will be using that. 01:59.730 --> 02:06.560 So what exactly we need to have to to make our react work on our machine. 02:06.570 --> 02:12.810 If first, what we need to do is we need to make sure NodeJS is installed on your machine. 02:12.900 --> 02:21.990 At the moment I am on Mac OS and this page I'm on the js.org and automatically detects my operating 02:21.990 --> 02:25.830 system, which is Mac and then I can download the version from here. 02:25.950 --> 02:32.070 What you need to do is download your LTS version for your machine. 02:32.070 --> 02:34.860 So if you're on windows you will have the version for Windows. 02:34.860 --> 02:38.100 Just click there and you will have a friendly wizard. 02:38.160 --> 02:41.130 Next, next, next and you will install NodeJS. 02:41.130 --> 02:45.640 You need to make sure you have NodeJS installed and two way to check it. 02:45.640 --> 02:50.500 If you have node, it's you can type in terminal open the terminal here. 02:50.950 --> 02:58.390 It doesn't really matter where in the folders we are, we can type in node like NodeJS and then Dash 02:58.390 --> 03:02.170 V or version V, it's a shortcut for version. 03:02.170 --> 03:09.430 So if I click Enter now you can see here version 10.15 is installed on my machine. 03:09.430 --> 03:15.820 What I can also do and you need to check and make sure you also have it installed with NPM and then 03:15.820 --> 03:24.400 you can check the version with the same dash V and you can see NPM 6.9 is installed on my machine. 03:24.400 --> 03:32.170 This NPM, which is node package manager you don't need to install on your machine because it's a part 03:32.170 --> 03:33.220 of this build. 03:33.220 --> 03:39.580 So whatever you will install this, you will have NPM installed which with the node. 03:39.580 --> 03:46.840 So basically the only things you need to do is just that LTS version in the moment I'm recording this, 03:46.840 --> 03:53.290 the latest is the ten, but if you will have a newer just go for the LTS and it will be sorted. 03:53.290 --> 04:00.190 Another option is and this is fully optional is the yarn yarn is kind of a replacement for NPM. 04:00.190 --> 04:08.980 For some time it was faster and more reliable than NPM, but NPM kind of get back in speed for development 04:08.980 --> 04:10.750 and now I think they're very equal. 04:10.750 --> 04:19.150 So it doesn't really matter if you use yarn or NPM, but I wanted to show you here the yarn website 04:19.150 --> 04:24.370 and if you want to install, you can go install yarn and you can see here on your operating system, 04:24.370 --> 04:31.090 you can install that very easily in a few seconds, but you will see a lot of resources online. 04:31.090 --> 04:38.080 We're using yarn, but it doesn't really matter if you have yarn or NPM, if you see a command somewhere, 04:38.080 --> 04:43.090 yarn and then some other commands, you can replace it with NPM and it will work. 04:43.180 --> 04:44.410 Exactly the same. 04:44.410 --> 04:46.030 So that's another option. 04:46.030 --> 04:49.000 If you want to install it, go ahead and install it. 04:49.030 --> 04:56.230 I will show you how to how our things are done with the simple NPM, which is basically the same kind 04:56.230 --> 04:57.100 of package. 04:57.340 --> 04:58.570 Package manager. 04:58.570 --> 05:01.870 You can run the command throughout NPM, you can run the command with yarn. 05:01.870 --> 05:03.160 It doesn't really matter. 05:03.670 --> 05:09.430 Okay, So once you will have all that and you will have that installed and you make sure you have Node 05:09.430 --> 05:11.950 and NPM installed on your machine. 05:11.950 --> 05:19.210 In the next video, I will show you how we can create our first application with React and we will use 05:19.210 --> 05:20.410 NPM for it.