1 00:00:00,270 --> 00:00:02,370 All right, We come back. 2 00:00:03,340 --> 00:00:04,300 In this video. 3 00:00:04,300 --> 00:00:12,040 Let's have a look at how React JS works behind the scene, the internals, how it works. 4 00:00:12,090 --> 00:00:12,910 All right, cool. 5 00:00:13,350 --> 00:00:14,050 So. 6 00:00:14,620 --> 00:00:18,250 So how does React work behind the scene? 7 00:00:18,610 --> 00:00:28,780 First of all, when you create a React application, you are creating a tree of React component and 8 00:00:28,780 --> 00:00:37,270 one of them is what you call the app dot JS file with a component because this one is being rendered 9 00:00:37,270 --> 00:00:44,980 onto the browser as that and called as a component, and you have dedicated video of components. 10 00:00:45,670 --> 00:00:46,320 All right, cool. 11 00:00:46,330 --> 00:00:55,600 So each component has a render method and that is what we have here as render here. 12 00:00:57,530 --> 00:01:05,000 And when a component is mounted, meaning that when the mount it means when it's being displayed, because 13 00:01:05,000 --> 00:01:09,020 now we have mounted our first component called app. 14 00:01:09,670 --> 00:01:13,960 When that component is being mounted, what happens? 15 00:01:14,110 --> 00:01:26,680 The random method is called this one is being called, and then the resulting react element is added 16 00:01:26,680 --> 00:01:27,580 to the DOM. 17 00:01:27,610 --> 00:01:30,970 When you say react element, it simply means a HTML element. 18 00:01:31,000 --> 00:01:34,640 This what we are referring to as react element. 19 00:01:34,660 --> 00:01:41,590 When I say react element simply means that in a HTML they are called element, meaning your tag and 20 00:01:41,590 --> 00:01:47,180 the HTML tag and attribute combined together to form what is called element. 21 00:01:47,200 --> 00:01:52,000 So React element simply means a HTML tag or a HTML element. 22 00:01:52,540 --> 00:01:58,540 So it is being called that one is being added to the the DOM. 23 00:01:58,560 --> 00:01:58,760 Right. 24 00:01:58,810 --> 00:01:59,230 The dom. 25 00:01:59,230 --> 00:02:00,860 That's a dom tree, right. 26 00:02:00,880 --> 00:02:02,680 Have a look at the index. 27 00:02:02,680 --> 00:02:04,450 The HTML here. 28 00:02:04,690 --> 00:02:06,310 This is my Dom. 29 00:02:06,310 --> 00:02:07,210 Have a look here. 30 00:02:07,210 --> 00:02:07,990 You see that? 31 00:02:07,990 --> 00:02:16,930 Here we have selected the ID root and now inside here, whatever I place in here is going to be visible 32 00:02:16,960 --> 00:02:18,130 as well by here. 33 00:02:18,130 --> 00:02:25,360 Instead of doing that one manually, we are going to allow React to inject that component inside here 34 00:02:25,390 --> 00:02:27,670 so that it will be displayed to the user. 35 00:02:28,390 --> 00:02:36,820 So then when you do that, we are then uses a virtual DOM to keep track of what has changed. 36 00:02:37,210 --> 00:02:38,530 Remember that? 37 00:02:39,820 --> 00:02:44,500 HMO and JavaScript has a dome ie a dome element, right? 38 00:02:44,500 --> 00:02:47,590 That is, the HTML has a dome element. 39 00:02:47,770 --> 00:02:50,650 So every ad create. 40 00:02:51,660 --> 00:03:03,660 A copy of it on DOM, core, virtual Dom, and always the original dom of JavaScript or HTML is being 41 00:03:03,660 --> 00:03:07,650 compared to the virtual dom of React. 42 00:03:08,160 --> 00:03:18,960 So when something changes in the React Element tree, for example, which is this one, now we act updates 43 00:03:19,290 --> 00:03:26,010 the DOM to match and this make React application more fast and responsive. 44 00:03:26,460 --> 00:03:38,610 So any time you make changes, the original DOM is going to compare to the virtual dom of React and 45 00:03:38,610 --> 00:03:41,310 see if there are changes. 46 00:03:41,640 --> 00:03:47,160 If there's changes as soon as I save is going to render the updated one. 47 00:03:47,400 --> 00:03:48,480 Have a look here. 48 00:03:48,540 --> 00:03:51,250 So inside the app, the Jess file. 49 00:03:51,270 --> 00:03:57,140 Now when I say hello world to now I will save it. 50 00:03:57,150 --> 00:03:57,630 Right? 51 00:03:57,630 --> 00:04:05,310 So as soon as I save it right now I have caused a change to the virtual dom of React. 52 00:04:05,910 --> 00:04:12,030 So to be able to display is going to compare to the original DOM. 53 00:04:12,300 --> 00:04:15,630 If there are changes, then it's going to display that. 54 00:04:15,630 --> 00:04:17,850 So when I save it, have a look. 55 00:04:18,060 --> 00:04:19,290 Let me save it here. 56 00:04:20,660 --> 00:04:26,240 Let me save it using file and then save when I do that. 57 00:04:26,240 --> 00:04:26,960 Have a look. 58 00:04:26,990 --> 00:04:29,270 Automatically we have Halo work too. 59 00:04:29,300 --> 00:04:31,820 That's how React is responsive. 60 00:04:32,390 --> 00:04:33,560 All right, good. 61 00:04:34,460 --> 00:04:38,540 So when you create a add component, you specify the input. 62 00:04:38,570 --> 00:04:39,590 Don't worry about that one. 63 00:04:39,590 --> 00:04:44,990 So that's a whole the simple definition of how React works. 64 00:04:44,990 --> 00:04:53,660 And this process of creating a virtual DOM and then comparing it with a red dom is what you call reconciliation. 65 00:04:54,410 --> 00:04:57,560 It is a core of how React works. 66 00:04:57,560 --> 00:05:05,990 By using reconciliation, we can efficiently update the UI in response to changes in data. 67 00:05:06,020 --> 00:05:08,720 That's a nutshell of how React works. 68 00:05:09,080 --> 00:05:09,840 All right, cool. 69 00:05:09,860 --> 00:05:16,320 So don't worry about understanding the loops and internals of React as you move on. 70 00:05:16,340 --> 00:05:17,870 Things will be clearer to you.