1 00:00:01,030 --> 00:00:02,020 All right. 2 00:00:02,050 --> 00:00:09,340 In this video, let's have a look how we can create react applications. 3 00:00:09,880 --> 00:00:13,570 There are few ways to create React apps. 4 00:00:13,690 --> 00:00:22,060 You can use the Create React app, too, which is a command line interface provided by Facebook. 5 00:00:22,060 --> 00:00:26,500 Or you can use a third party to like puzzle. 6 00:00:26,980 --> 00:00:33,700 If you want to use Create React app first, you need to install it globally on your system. 7 00:00:33,880 --> 00:00:39,150 Well, but react the way we create React app has changed a little bit. 8 00:00:39,310 --> 00:00:39,460 Cool. 9 00:00:39,490 --> 00:00:44,920 So let's have a look at some of the ways that we can use to create React app. 10 00:00:45,430 --> 00:00:51,940 Like I said, you can use a third party tool called Puzzle and we are going to dive into it. 11 00:00:51,940 --> 00:00:53,350 So let's cancel that. 12 00:00:54,590 --> 00:00:56,360 And so let's cancel this one here. 13 00:00:57,140 --> 00:01:01,950 The next one is before the current version of React. 14 00:01:01,970 --> 00:01:09,170 Unless you install it globally on your machine using Create React app. 15 00:01:09,470 --> 00:01:18,380 Create React Apps is just a tool that is used to generate or create React app and we need to install 16 00:01:18,380 --> 00:01:19,790 them globally. 17 00:01:19,790 --> 00:01:20,810 Globally. 18 00:01:21,590 --> 00:01:22,040 All right. 19 00:01:22,370 --> 00:01:24,590 So we are not going to use that. 20 00:01:24,920 --> 00:01:25,560 All right, cool. 21 00:01:25,790 --> 00:01:34,940 The next one of the recommended one is we are going to use MP X Create React app and the name of your 22 00:01:34,940 --> 00:01:37,460 project and then you are good to go. 23 00:01:37,790 --> 00:01:40,040 So what is Create React app? 24 00:01:40,040 --> 00:01:45,950 So let's head over to Google and then let's have a look at Create React app. 25 00:01:46,640 --> 00:01:57,800 So if you go to Create React app dot dev, this is the home page of the tool that we can use to generate 26 00:01:57,800 --> 00:01:58,880 React app. 27 00:01:59,420 --> 00:02:05,390 It says that Create React App set up a modern web app by running one command. 28 00:02:05,450 --> 00:02:11,940 So if you click on getting started, we see that we have the syntax and p x. 29 00:02:11,960 --> 00:02:18,230 This MP s is given to us automatically as soon as we install on JS and that is it. 30 00:02:18,230 --> 00:02:22,160 We have access to NPCs like MP and Yuan. 31 00:02:22,160 --> 00:02:22,760 All right. 32 00:02:23,300 --> 00:02:30,440 So we can use the MP X by making use of Create React app and the name of your project. 33 00:02:30,470 --> 00:02:39,500 This one can be anything like the first step and then you can also use NPM to create React app. 34 00:02:39,560 --> 00:02:46,400 And because we have installed Node.js, we have access to NPM as well. 35 00:02:46,400 --> 00:02:51,500 And this is available when you are using NPM version six and above. 36 00:02:51,530 --> 00:02:58,430 So make use of NPM, inject React app and then the name of your project. 37 00:02:58,790 --> 00:03:06,710 Or you can use John if you have just been installed by making use of John Create React app and the name 38 00:03:06,710 --> 00:03:12,830 of your application and make sure that you have John 0.25 and above. 39 00:03:12,950 --> 00:03:15,170 So this is the same title I'm going to use. 40 00:03:15,170 --> 00:03:18,620 You can use any of them, any of these ones. 41 00:03:18,770 --> 00:03:19,490 All right, cool. 42 00:03:19,490 --> 00:03:25,730 So to be more specific, we are going to use MP X, right? 43 00:03:25,730 --> 00:03:31,100 And MP comes with NPM version 5.2 plus and higher. 44 00:03:31,460 --> 00:03:32,150 So that is it. 45 00:03:32,150 --> 00:03:39,110 Like I say, we have you have NPM, we have NPCs automatically, so they don't need to install NPM also. 46 00:03:39,590 --> 00:03:42,650 So that is a cool thing about that. 47 00:03:42,980 --> 00:03:43,550 Right? 48 00:03:43,550 --> 00:03:49,820 So let's go ahead and create our first React app using the syntax. 49 00:03:50,120 --> 00:03:52,190 So on your terminal. 50 00:03:53,360 --> 00:04:02,480 Navigate to a folder where you want to save your React application and then seed in into that. 51 00:04:02,690 --> 00:04:13,250 So let me clear the console here up, clear here and then make use of MP X space. 52 00:04:13,460 --> 00:04:21,560 Create dash, react dash app space and the name of your project. 53 00:04:21,709 --> 00:04:24,980 So let me call this one my. 54 00:04:26,450 --> 00:04:29,630 First, my first app. 55 00:04:32,980 --> 00:04:33,730 All right. 56 00:04:34,030 --> 00:04:39,910 So one good thing about this one is I don't need to use common casing, for example. 57 00:04:40,540 --> 00:04:44,380 It's, say, my first app like that. 58 00:04:44,650 --> 00:04:47,230 So let's get into and let's see the area I'm going to get. 59 00:04:47,530 --> 00:04:48,220 All right. 60 00:04:48,310 --> 00:04:49,090 You see that? 61 00:04:50,190 --> 00:04:57,360 Because PM naming restrictions name can no longer contain capital letters here. 62 00:04:57,570 --> 00:05:03,150 Please choose a different product name so you can use this option. 63 00:05:03,150 --> 00:05:06,240 So using the dash my first. 64 00:05:07,390 --> 00:05:10,920 Up first dash app and then hit enter. 65 00:05:10,930 --> 00:05:11,830 Now let's see. 66 00:05:13,690 --> 00:05:19,930 Is going to generate the project for us we see that in stolen packages. 67 00:05:19,930 --> 00:05:29,020 This might take a couple of minutes and first is installing react and then react Dom and react script 68 00:05:29,020 --> 00:05:32,050 and then the C.R.A. template. 69 00:05:32,050 --> 00:05:38,620 So it's going to install all the things we need to get started with React. 70 00:05:38,620 --> 00:05:43,150 So let's have some coffee, sit back when it's done. 71 00:05:43,150 --> 00:05:52,900 Then we continue where after 100 years it has finished installing and we have couple of commands. 72 00:05:53,230 --> 00:05:59,950 So upon installing, if we see some warnings, for example, we have this yellow here. 73 00:06:00,130 --> 00:06:05,590 One means that deprecated, don't worry, it has no impact on your application. 74 00:06:05,950 --> 00:06:10,120 If you see something like success somewhere here. 75 00:06:10,120 --> 00:06:17,050 Yes, success then it means that the installation was successful and we have couple of commands and 76 00:06:17,050 --> 00:06:22,360 PM start and PM run, build and PM test and PM run, eject and many commands. 77 00:06:22,480 --> 00:06:23,170 All right, cool. 78 00:06:23,170 --> 00:06:30,820 So now let's clear the console and then let's navigate to the folder where we installed for me. 79 00:06:30,820 --> 00:06:34,990 I installed inside my web development bootcamp teaching folder. 80 00:06:35,170 --> 00:06:42,940 So on my desktop here there is a folder name I use here and now this is my React application. 81 00:06:43,090 --> 00:06:50,050 If I open it, I have a couple of files here, so I need to open this project using my preferred code 82 00:06:50,050 --> 00:07:00,400 editor or we can drag and drop inside your preferred code editor or we can use the command code dot 83 00:07:00,400 --> 00:07:03,180 period and going to open or sorry. 84 00:07:03,190 --> 00:07:05,220 First of all you need to see the in. 85 00:07:05,230 --> 00:07:07,210 So let's have a look at the commands here. 86 00:07:08,170 --> 00:07:08,890 You see that? 87 00:07:08,890 --> 00:07:17,440 First of all, we suggest that start begin by typing seed in and the name of the folder that is seed 88 00:07:17,440 --> 00:07:20,380 in the name of the folder called my first app. 89 00:07:20,380 --> 00:07:25,540 So seed meaning change into the change into folder. 90 00:07:25,960 --> 00:07:30,910 And then my dash first dash app hit enter. 91 00:07:31,890 --> 00:07:32,340 Let's see. 92 00:07:32,370 --> 00:07:32,790 You see that? 93 00:07:32,790 --> 00:07:36,020 Now I'm inside my first app. 94 00:07:36,030 --> 00:07:37,530 Don't worry about this one. 95 00:07:37,530 --> 00:07:46,170 This extension I installed using Visual Studio code to keep track of my Amin code using gate. 96 00:07:46,170 --> 00:07:53,250 So I see that now I'm inside this folder and I can make use of code and then period I'm going to open 97 00:07:53,250 --> 00:07:57,060 inside my preferred code editor that Visual Studio code. 98 00:07:57,090 --> 00:07:59,640 This command is for code only. 99 00:07:59,970 --> 00:08:00,420 All right. 100 00:08:00,420 --> 00:08:07,350 If it doesn't work this way out, or better still, we can drag and drop inside your preferred code 101 00:08:07,350 --> 00:08:08,010 editor. 102 00:08:08,280 --> 00:08:10,560 Or better start using this command period. 103 00:08:10,560 --> 00:08:13,530 And I'm going to open stats. 104 00:08:14,040 --> 00:08:15,830 All right, cool. 105 00:08:15,850 --> 00:08:17,210 There we go. 106 00:08:17,220 --> 00:08:24,630 Now we have our React application being what installed successfully. 107 00:08:25,110 --> 00:08:31,620 So guys, in the next video, we will have a look at the folder structure here. 108 00:08:31,650 --> 00:08:35,760 What is the over here and what's the purpose of it? 109 00:08:36,210 --> 00:08:36,900 All right. 110 00:08:36,900 --> 00:08:39,659 So let's get rocking the next video, guys.