1 00:00:03,120 --> 00:00:07,830 This is where we left by creating fresh React application. 2 00:00:08,100 --> 00:00:13,920 So let's make our hands dirty by creating our first React component. 3 00:00:14,310 --> 00:00:18,900 Well, we've talked about the folder structure before. 4 00:00:18,930 --> 00:00:19,850 So this. 5 00:00:19,890 --> 00:00:20,760 How are you going to do? 6 00:00:20,760 --> 00:00:27,150 Don't worry if you didn't see this color here, because I'm keeping track using this extension called 7 00:00:27,310 --> 00:00:28,050 Main Gate. 8 00:00:28,050 --> 00:00:31,830 So don't worry if you see this, I mean, color symbol here. 9 00:00:32,310 --> 00:00:39,550 So the way we are going to start to create our component is that I want to start from scratch. 10 00:00:39,570 --> 00:00:43,700 So because of that, we are going to delete the folder. 11 00:00:43,740 --> 00:00:49,070 This is a folder where all our logic and files are being kept. 12 00:00:49,080 --> 00:00:52,050 So let me delete that. 13 00:00:52,080 --> 00:00:53,730 Making some housekeeping. 14 00:00:53,730 --> 00:00:54,840 Now, let's see. 15 00:00:54,840 --> 00:01:00,750 React is crying because we have deleted the actual folder. 16 00:01:01,380 --> 00:01:10,590 The reason why I'm going by this way, is that I just want to know how to start react application and 17 00:01:10,590 --> 00:01:17,430 how the files come together to make your React application up and running. 18 00:01:17,580 --> 00:01:23,310 So after you go the the flow of hurry act application works. 19 00:01:23,310 --> 00:01:28,170 Any time you start to create fresh right application, you don't need to delete the Z folder anymore 20 00:01:28,170 --> 00:01:32,880 because you know how the files are being used and why they are there. 21 00:01:33,180 --> 00:01:41,910 So the two most important files we need is before that let's create a folder called C, make sure you 22 00:01:41,910 --> 00:01:44,010 name it as if you name it. 23 00:01:44,010 --> 00:01:44,730 Whatever. 24 00:01:44,730 --> 00:01:51,090 React will never know this folder where to locate the files that we are about to create. 25 00:01:51,420 --> 00:01:54,870 So inside we need to files. 26 00:01:55,050 --> 00:01:59,220 One is app dot js. 27 00:02:00,000 --> 00:02:02,250 This is a convention. 28 00:02:02,340 --> 00:02:05,940 Well, how how can we create a component? 29 00:02:05,940 --> 00:02:10,470 Remember, we have two ways of creating react component. 30 00:02:10,470 --> 00:02:15,600 One is using the functional component and then a class based component. 31 00:02:15,720 --> 00:02:20,250 But we are going to create using functional component in this video. 32 00:02:20,280 --> 00:02:25,890 The next video we are going to create react application using class based component. 33 00:02:26,070 --> 00:02:32,220 Well, so what are the things we need to consider when creating a component? 34 00:02:32,220 --> 00:02:37,830 Well, first of all, a component name might start with uppercase. 35 00:02:38,130 --> 00:02:45,810 If you name it, something like this one React will never know that this is a component right now. 36 00:02:45,820 --> 00:02:46,650 The first step. 37 00:02:47,100 --> 00:02:51,450 The next step is if a component is a function. 38 00:02:52,080 --> 00:02:55,980 So I'm going to create a normal function if you know how to create a normal function. 39 00:02:55,980 --> 00:02:56,370 Right. 40 00:02:56,370 --> 00:02:59,760 So let me comment here and call it as functional. 41 00:03:01,020 --> 00:03:02,370 Component. 42 00:03:02,700 --> 00:03:03,480 All right. 43 00:03:03,480 --> 00:03:07,230 So let me clock this one so we know how to create a function, right? 44 00:03:07,230 --> 00:03:15,360 But every functional component of this type of mistake here react component, always retain JC X and 45 00:03:15,360 --> 00:03:16,590 we get back into JESSI'S. 46 00:03:16,590 --> 00:03:17,940 Don't worry about what I'm going to do. 47 00:03:17,940 --> 00:03:25,950 So in a normal functions in JavaScript, a function always returns some data, a value or a result, 48 00:03:25,950 --> 00:03:26,550 right? 49 00:03:26,550 --> 00:03:34,920 But in react, the component with a function I going to create is just going to retain some HTML called 50 00:03:34,950 --> 00:03:35,880 G6. 51 00:03:35,880 --> 00:03:42,240 So the first step is we can create a functional component using the normal I mean functional syntax 52 00:03:42,240 --> 00:03:43,440 or arrow function. 53 00:03:43,440 --> 00:03:46,770 So let's stick to the arrow function console and the app. 54 00:03:46,890 --> 00:03:56,760 The name here must be uppercase equal to and then cons app is equal to and then my arrow function here 55 00:03:56,790 --> 00:03:59,640 and my arrow like that. 56 00:03:59,910 --> 00:04:08,610 So here we need to return something from here and what you are going to return is just a normal HTML. 57 00:04:08,640 --> 00:04:13,650 So we add components, returns, what is HTML and what is called G6. 58 00:04:13,740 --> 00:04:25,920 So we can return, let's say each one here and say that we're calm to react and that is it. 59 00:04:25,920 --> 00:04:29,760 How finished creating my first component. 60 00:04:29,760 --> 00:04:37,050 So all this component is doing this just I mean displaying where come to react the next step is that 61 00:04:37,050 --> 00:04:43,800 I need to require this I mean this component into the entry point of my application. 62 00:04:44,040 --> 00:04:48,060 So I need to export this means of exports. 63 00:04:49,430 --> 00:04:50,480 Default. 64 00:04:51,310 --> 00:04:59,230 And then the name of my component API, meaning that this file can be accessible or accessed by any 65 00:04:59,230 --> 00:05:00,970 file in my application. 66 00:05:01,390 --> 00:05:04,360 So now I have finished creating my first React component. 67 00:05:04,390 --> 00:05:09,700 Next is I need to mount my component so that I be able to see on the screen. 68 00:05:10,030 --> 00:05:11,710 So where can we mount it? 69 00:05:12,160 --> 00:05:17,170 Where we need to create another file called index dot js. 70 00:05:17,680 --> 00:05:18,900 Dot JS. 71 00:05:18,910 --> 00:05:24,460 See that the name of this one is different from this one because it is not a component, just like a 72 00:05:24,460 --> 00:05:25,630 normal function here. 73 00:05:26,050 --> 00:05:26,720 Okay, cool. 74 00:05:26,740 --> 00:05:33,700 So the first step here is that because we are going to mount our component inside the index, we need 75 00:05:33,700 --> 00:05:36,840 to require the React APIs. 76 00:05:36,850 --> 00:05:47,800 So first we import React, uppercase, react from React the first step and then we need the DOM the 77 00:05:47,800 --> 00:05:48,520 DOM element. 78 00:05:48,520 --> 00:05:49,990 So import. 79 00:05:50,260 --> 00:05:52,500 These are the steps that are going to fill in time. 80 00:05:52,510 --> 00:05:55,090 So you need to be familiar with that react. 81 00:05:55,330 --> 00:06:06,190 Dom Make sure it type exactly as it is from React Dom slash client. 82 00:06:07,280 --> 00:06:10,640 And there we go. 83 00:06:10,880 --> 00:06:17,780 So the next step is what I need to require this app, because I want to mount the app inside here because 84 00:06:17,780 --> 00:06:26,000 the index file here, JS file is going to inject the whole function into our public folder that is our 85 00:06:26,000 --> 00:06:32,240 index or HTML and place it inside our div here as we discussed before. 86 00:06:32,840 --> 00:06:33,500 Great. 87 00:06:33,650 --> 00:06:34,900 So now let's continue on. 88 00:06:35,120 --> 00:06:38,300 So the next step is we need to get the root element. 89 00:06:38,300 --> 00:06:41,990 And the root element here is what we want to target here. 90 00:06:42,350 --> 00:06:49,520 So here we need to create a variable count and called as root and equal to react. 91 00:06:49,520 --> 00:06:52,400 Dom dot create root. 92 00:06:52,790 --> 00:07:03,500 Then I need to select my element using document dot get element by ID because here is an ID. 93 00:07:03,770 --> 00:07:10,110 We can change this one to class and can make use of what mixes of get elements. 94 00:07:10,130 --> 00:07:12,560 I mean query selector and you can use the class. 95 00:07:12,560 --> 00:07:14,870 So let's stick to the ID here. 96 00:07:15,260 --> 00:07:22,700 So now you're going to select that by ID and the name of the name of my ID is called root, which is 97 00:07:22,700 --> 00:07:23,360 this. 98 00:07:24,100 --> 00:07:25,540 So we just this one. 99 00:07:26,950 --> 00:07:27,610 Okay. 100 00:07:28,060 --> 00:07:28,450 All right. 101 00:07:28,450 --> 00:07:30,340 So not I've selected my element. 102 00:07:30,340 --> 00:07:37,840 The next step is that on the root, I need to render that so dot render and then as a function. 103 00:07:37,840 --> 00:07:41,770 And this function takes in our component, right? 104 00:07:41,770 --> 00:07:50,940 So here we open as that and then we can provide a Dave and then first of all, let's require our app 105 00:07:50,950 --> 00:07:51,460 component. 106 00:07:51,460 --> 00:08:06,670 So inside my index, let's require the app of app up like this one from code dot slash and the app. 107 00:08:06,790 --> 00:08:14,140 So now how can we call a component we don't quite as a function like this one like as you thinking in 108 00:08:14,140 --> 00:08:20,650 this way but because it's a component, we have a different syntax of calling a component. 109 00:08:21,010 --> 00:08:22,330 So it's I'm going to call it. 110 00:08:22,330 --> 00:08:24,040 So here you bring. 111 00:08:25,300 --> 00:08:27,280 Your anchor like that. 112 00:08:27,280 --> 00:08:30,820 And then the app and like opening and closing like that. 113 00:08:30,820 --> 00:08:31,720 So save it. 114 00:08:31,720 --> 00:08:34,090 And now let's check our browser. 115 00:08:34,090 --> 00:08:36,880 And now we're come to react. 116 00:08:36,880 --> 00:08:39,730 And this is my first component. 117 00:08:39,850 --> 00:08:45,850 So like I say that anytime we start right application and to start from scratch by creating the folder 118 00:08:45,850 --> 00:08:52,570 here but just be aware of the most important files that goes on here, how to do it and how and when 119 00:08:52,570 --> 00:08:55,060 to to use it and when to do it. 120 00:08:55,420 --> 00:09:01,360 Okay, guys, now that you're able to create our first React component using class based, I mean, 121 00:09:01,360 --> 00:09:07,720 use functional component in this video, let's go ahead and start with, let's say, using mean class 122 00:09:07,720 --> 00:09:08,980 based component.