1
00:00:01,010 --> 00:00:02,270
In this video.

2
00:00:02,300 --> 00:00:11,150
Let's have a look at how we can change some of the React code to display a simple hello world.

3
00:00:11,360 --> 00:00:20,630
And then after that, you have a look at how some of the files connect together to make React application

4
00:00:20,630 --> 00:00:22,130
up and running.

5
00:00:22,550 --> 00:00:24,600
So back to the project here.

6
00:00:24,620 --> 00:00:31,160
See that we have an image just moving like that and we have some text.

7
00:00:31,310 --> 00:00:39,770
So where does this text and images are located and how they able to display to the browser?

8
00:00:40,250 --> 00:00:41,000
So cool.

9
00:00:41,000 --> 00:00:46,310
So let me collapse this one and let me collapse everything from here like that.

10
00:00:46,400 --> 00:00:46,910
Great.

11
00:00:47,150 --> 00:00:53,840
So all the logic lies inside the C folder.

12
00:00:54,170 --> 00:00:57,050
So one more time, let's go over again.

13
00:00:57,500 --> 00:01:04,730
So inside the app JS, we see that it contains a file.

14
00:01:05,820 --> 00:01:09,450
Some code, like a function requisite is a function.

15
00:01:09,450 --> 00:01:16,590
We have a function name here and the app normal function here and now we have been closed.

16
00:01:16,590 --> 00:01:26,400
I'll start and inside the function is returning some HTML here and call it as a react element.

17
00:01:26,490 --> 00:01:34,740
So the normal function insert return is logic, react application, returning some HTML and CSS and

18
00:01:34,740 --> 00:01:39,060
some text here and this is what we call component.

19
00:01:39,270 --> 00:01:41,370
So this is the entry point.

20
00:01:41,370 --> 00:01:50,490
So now we have one file called component and now you see that we have a head tag and then inside we

21
00:01:50,490 --> 00:01:57,480
have a cell C meaning image and we have a logo with an image here above here.

22
00:01:57,480 --> 00:02:06,510
We imported that one from logo here, SVG, and now we use that one inside this image tag here.

23
00:02:06,840 --> 00:02:12,540
And we also have one HTML called P tag here as that.

24
00:02:12,930 --> 00:02:16,140
And we have a link tag called LAN React.

25
00:02:16,530 --> 00:02:22,890
So if I remove everything from the head tag inside the app here, so now let me collapse this one.

26
00:02:22,890 --> 00:02:25,950
See that I have collapse of the head and tag here.

27
00:02:26,550 --> 00:02:30,570
If I remove that and let me save it.

28
00:02:30,810 --> 00:02:33,750
At the moment it has been rearranged.

29
00:02:33,750 --> 00:02:35,550
You can pretty like that.

30
00:02:36,150 --> 00:02:41,160
Okay, so now I have removed all the file, something like this one, and there's no files inside my

31
00:02:41,160 --> 00:02:42,120
div here.

32
00:02:42,120 --> 00:02:50,820
If I get back to the application when I saved this file, let me save this file automatically react

33
00:02:50,820 --> 00:02:52,890
is going to restart, I think.

34
00:02:52,890 --> 00:02:53,490
Yeah.

35
00:02:54,230 --> 00:02:57,610
Any time you make changes, react is going to start automatically.

36
00:02:57,670 --> 00:03:01,000
We see that the canvas is blank.

37
00:03:01,040 --> 00:03:02,740
There's no files here.

38
00:03:03,070 --> 00:03:11,200
So inside my div here like that, I can type any H one element or any HTML code.

39
00:03:11,200 --> 00:03:12,220
I can write it here.

40
00:03:12,250 --> 00:03:13,420
I'll call this one.

41
00:03:13,690 --> 00:03:15,070
Hello, world.

42
00:03:16,260 --> 00:03:20,640
When I say wait, React has restarted automatically.

43
00:03:20,700 --> 00:03:26,260
The next video are going to have a look at how React works behind the scene.

44
00:03:26,280 --> 00:03:30,450
For the meantime, the React app is an entry point.

45
00:03:30,840 --> 00:03:34,170
When I change a text, I have some HTML.

46
00:03:34,200 --> 00:03:37,470
My parent here and inside have each one.

47
00:03:37,500 --> 00:03:41,550
I'm just writing some HTML element, a HTML tags here.

48
00:03:41,610 --> 00:03:46,480
That is the actor JS and then we have up to CSS file.

49
00:03:46,500 --> 00:03:49,070
So this one is YouTube style application.

50
00:03:49,080 --> 00:03:52,800
And we talked about how we can use CSS in React.

51
00:03:53,070 --> 00:04:01,260
So now we have the app JS file and we have indexed HTML indexed the JavaScript or JS file here.

52
00:04:01,830 --> 00:04:07,890
And you can see that we are importing the app for app file here, this app, this one.

53
00:04:08,850 --> 00:04:12,910
And now inside we have we have selected.

54
00:04:12,930 --> 00:04:13,950
Let me have a look here.

55
00:04:14,130 --> 00:04:19,079
We have selected document by element that is the root.

56
00:04:19,529 --> 00:04:30,690
If you check the public and the index here we have a div with ID core root, meaning that we have selected

57
00:04:30,690 --> 00:04:32,040
this element.

58
00:04:32,070 --> 00:04:38,310
Now we are placing the whole of the app, this one, this app inside here.

59
00:04:38,310 --> 00:04:41,280
Because inside the index, that's what we are.

60
00:04:41,460 --> 00:04:44,400
We are displaying that using a render method.

61
00:04:44,430 --> 00:04:47,790
This one is being given to us by React.

62
00:04:48,300 --> 00:04:55,650
And now we have the root because first of all, we have selected the element, which is this one, and

63
00:04:55,650 --> 00:04:59,370
we assign to a variable called root here.

64
00:04:59,760 --> 00:05:03,350
And now on the root, we have a method called render.

65
00:05:03,360 --> 00:05:05,560
And here you are using React Street mode.

66
00:05:05,580 --> 00:05:09,420
Don't worry, we can remove this one like that.

67
00:05:09,660 --> 00:05:13,170
And we can even use a day or whatever.

68
00:05:13,200 --> 00:05:14,280
The same thing.

69
00:05:14,310 --> 00:05:16,680
I can use a fragment like so.

70
00:05:16,890 --> 00:05:17,470
All right, cool.

71
00:05:17,490 --> 00:05:17,970
So let's.

72
00:05:17,970 --> 00:05:19,680
Let's maintain it like that.

73
00:05:20,550 --> 00:05:28,240
All right, Now we see that we are injecting or calling the function inside the app, right?

74
00:05:28,260 --> 00:05:30,660
The app for that here with the component.

75
00:05:30,720 --> 00:05:32,250
Talk about component very soon here.

76
00:05:32,250 --> 00:05:37,250
Meaning we have required this function inside the index file.

77
00:05:37,710 --> 00:05:47,370
And now after we selected the element that is our index HML, we are now using a method called render

78
00:05:47,370 --> 00:05:48,420
on the.

79
00:05:50,310 --> 00:05:52,430
Elements we assigned to the route.

80
00:05:52,440 --> 00:05:56,220
And now we are rendering the component as app.

81
00:05:56,940 --> 00:06:01,740
So take away here is that the index JS file?

82
00:06:02,250 --> 00:06:06,190
First of all, select the the parent root.

83
00:06:06,210 --> 00:06:14,100
And now we injected the whole of the app file inside it using the render method.

84
00:06:14,460 --> 00:06:18,100
So that is a cool thing about that, how we can write.

85
00:06:18,120 --> 00:06:18,870
I mean.

86
00:06:21,510 --> 00:06:23,460
Our custom texts, etc..

87
00:06:23,490 --> 00:06:31,110
I guess as you move on, you talk about components as well and props and some technical terms here.

88
00:06:31,560 --> 00:06:38,970
Now that you know how these files are connected in the next video, let's have a look at how it works

89
00:06:38,970 --> 00:06:39,630
behind the scene.

90
00:06:39,650 --> 00:06:41,040
As soon as I make changes.

91
00:06:41,040 --> 00:06:47,630
My app here, let's say that the dot I save it announce that it has been refreshed automatically.

92
00:06:47,640 --> 00:06:48,870
That's instant.

93
00:06:49,260 --> 00:06:49,770
Great.

94
00:06:50,220 --> 00:06:55,320
So the next video, let's have a look at how React works behind the scene.