1
00:00:00,210 --> 00:00:07,680
Before we continue exploring react now would be a great time for me to show you which extensions and

2
00:00:07,680 --> 00:00:14,460
which settings Jason set up is going to be really helpful throughout the course.

3
00:00:14,970 --> 00:00:23,220
So first, let me show you the extension that will help us to format the code as I keep on scrolling.

4
00:00:23,220 --> 00:00:27,840
Notice here I have the extension by the name of prettier code format.

5
00:00:28,170 --> 00:00:30,450
And of course, in my case I already have installed it.

6
00:00:30,840 --> 00:00:38,240
But if you don't have it, you need to install and then once you install, you can navigate to settings.

7
00:00:38,580 --> 00:00:41,060
So this is going to be a go for something.

8
00:00:41,070 --> 00:00:42,510
So graphical interface.

9
00:00:42,780 --> 00:00:45,840
And also later, we'll take a look at the JSON file.

10
00:00:46,200 --> 00:00:51,540
But for the time being, just check for the prettier or you know what?

11
00:00:51,570 --> 00:00:53,550
No, you can just go for format.

12
00:00:53,850 --> 00:01:00,540
And then once you look for the format and a graphical interface, you'll find format on page as well

13
00:01:00,540 --> 00:01:02,170
as format on save.

14
00:01:02,460 --> 00:01:06,510
So I would suggest checking both of these boxes.

15
00:01:06,780 --> 00:01:13,000
And then as a result, as you're typing, Prieur will format the code for you.

16
00:01:13,230 --> 00:01:14,220
Now, what am I talking about?

17
00:01:14,230 --> 00:01:22,380
For example, if I just keep on adding some spaces in between, basically I just make it a big, fat

18
00:01:22,380 --> 00:01:29,110
mess the moment I certainly don't have Preeta right away nicely format the code for me.

19
00:01:29,370 --> 00:01:30,630
So that would be the first thing.

20
00:01:30,960 --> 00:01:34,350
Now, the second thing that I would want to show you is the AMT.

21
00:01:34,830 --> 00:01:40,980
So you're probably aware that when we work with Malinauskas, yes, we have option of using Emet, which

22
00:01:40,980 --> 00:01:48,750
essentially just speeds up our workflow and of course, individuals through the code that is built and

23
00:01:49,260 --> 00:01:55,500
how when you work with react as far as just sex, it won't work right out of the box.

24
00:01:55,770 --> 00:02:01,470
Now, one of my first of all, talking about, for example, if I want a hearing for or I don't know,

25
00:02:01,830 --> 00:02:07,770
the idea of with some kind of ideas and classes which will later I don't have to start with opening

26
00:02:07,770 --> 00:02:12,540
tag and then type adding for or article or whatever in my home.

27
00:02:12,540 --> 00:02:19,140
And I can just go with heading for and write or notice how and what gives me the suggestion.

28
00:02:19,360 --> 00:02:25,620
Again, we can go the same route we article or we can go with section or whatever.

29
00:02:25,860 --> 00:02:28,620
Notice how it right away creates for me.

30
00:02:28,710 --> 00:02:33,480
Now of course it's going to be way more beneficial once we start adding classes, but there are some

31
00:02:33,480 --> 00:02:40,830
gotchas about classes and that's why I'm not going to cover them right now, but essentially in order

32
00:02:40,830 --> 00:02:42,390
to have these suggestions.

33
00:02:42,600 --> 00:02:48,570
So essentially in order for you to have this option so you don't have to type out everything from the

34
00:02:48,570 --> 00:02:52,050
scratch, you need to go to your settings.

35
00:02:52,440 --> 00:03:00,660
And once you navigate there, the property you're looking for is this amet and it is include languages.

36
00:03:01,140 --> 00:03:05,580
And then you would want to set up JavaScript and JavaScript react.

37
00:03:05,820 --> 00:03:07,740
So that's the code you'll need.

38
00:03:07,950 --> 00:03:14,360
Again, if you just want to copy and paste the code, I would suggest going to a grab again.

39
00:03:14,390 --> 00:03:21,910
My handle is going to be John Hyphen smugger and then you're looking for the ASP code setup.

40
00:03:22,270 --> 00:03:24,090
So in here you'll find settings.

41
00:03:24,090 --> 00:03:28,180
Jessan And then of course, this is the property that you're looking for.

42
00:03:28,470 --> 00:03:34,950
So if you set this up, as there are, you can write a way, just copy and paste of this particular

43
00:03:34,950 --> 00:03:35,300
value.

44
00:03:35,550 --> 00:03:41,850
So that will enable Achmat in your JS sex as well.

45
00:03:42,100 --> 00:03:49,400
As I did not notice, this is going to be formatting paste information so you can also add them manually.

46
00:03:49,410 --> 00:03:51,090
Lexical meaning in the settings.

47
00:03:51,090 --> 00:03:53,460
Jessan, you don't have to do that in agoI.

48
00:03:53,790 --> 00:03:57,180
And then I have some particular things for the printer.

49
00:03:57,480 --> 00:04:05,400
For example, here I set up only the single quotes and my address, but that is zero and that is really

50
00:04:05,400 --> 00:04:10,180
up to you, whether that is your preference as far as the single quotes or double code.

51
00:04:10,380 --> 00:04:18,490
How are you using Anne-Mette will definitely speed up your workflow when you're working in Java as well.

52
00:04:18,780 --> 00:04:27,270
And lastly, I have this awesome, awesome, awesome extension by the name of iOS seven, React Redux

53
00:04:27,270 --> 00:04:30,680
graphical react negative snippets.

54
00:04:30,960 --> 00:04:34,950
Now, why this particular extension is so cool?

55
00:04:35,250 --> 00:04:38,160
Because it saves us on the boilerplate.

56
00:04:38,580 --> 00:04:45,600
So for the time being, let me just go back to whatever I had so I don't have some kind of error.

57
00:04:45,840 --> 00:04:53,100
So let me save it here and let's just create another testing file in source Samasource.

58
00:04:53,100 --> 00:04:55,850
Let's create a new file and I'll call this testing.

59
00:04:55,860 --> 00:04:57,360
Now, don't worry, we won't use it.

60
00:04:57,570 --> 00:04:59,790
But just to showcase how the extension.

61
00:04:59,920 --> 00:05:06,130
It's going to work, for example, if I want to create this new react component.

62
00:05:06,400 --> 00:05:09,900
I don't have to type import react and then set up the component.

63
00:05:10,150 --> 00:05:20,200
I can simply type my snippet where if I go with R, A, F, C and E right away, we'll create it as

64
00:05:20,200 --> 00:05:23,560
a function and then it's ready to go.

65
00:05:23,680 --> 00:05:29,650
So notice Howard right away, imported to react right away, set up the component and you right away

66
00:05:29,650 --> 00:05:32,500
have the return as well.

67
00:05:32,920 --> 00:05:39,420
Now, don't be confused by the fact that in this case it is set up with a lowercase.

68
00:05:39,670 --> 00:05:44,500
The only reason for that is because we're exporting something that will cover later.

69
00:05:44,710 --> 00:05:50,260
And then once we import, then we will still need to use it with a uppercase.

70
00:05:50,610 --> 00:05:55,980
OK, so it's not like I was just making this up where this needs to be uppercase.

71
00:05:56,200 --> 00:05:57,700
You can clearly test that out.

72
00:05:57,700 --> 00:06:02,740
If you'll go with greeting and greeting, you'll see that there is an error.

73
00:06:02,770 --> 00:06:07,870
So essentially you don't see anything on the screen because of course you must, must, must, must,

74
00:06:07,870 --> 00:06:14,380
must have this component with a capital case again, in this case a little bit different because we're

75
00:06:14,380 --> 00:06:17,500
exporting and we are not at that point yet.

76
00:06:17,770 --> 00:06:19,120
So we'll cover that later.

77
00:06:19,460 --> 00:06:27,930
But this extension just gives you a awesome setup where you don't have to keep on typing this boilerplate.

78
00:06:28,090 --> 00:06:31,570
Now, of course, the Arrow function is not the only component that you can create.

79
00:06:31,660 --> 00:06:34,120
You can create components with regular functions.

80
00:06:34,120 --> 00:06:37,900
You can create them with classes, which is the older syntax.

81
00:06:38,170 --> 00:06:45,250
And if you want to see more kind of options you have for the snippets, just go for the extension.

82
00:06:45,700 --> 00:06:50,980
Keep on scrolling and notice you can use Empy for imports, for example.

83
00:06:51,340 --> 00:06:53,430
You want scrolling, keep on scrolling.

84
00:06:53,470 --> 00:06:56,380
These are all the options that you have here.

85
00:06:56,770 --> 00:07:01,780
And I think the regular function was our FC.

86
00:07:02,110 --> 00:07:04,990
So this is going to be for the class components.

87
00:07:05,470 --> 00:07:12,440
We're going to keep on scrolling and eventually we should see the regular function component on there.

88
00:07:12,880 --> 00:07:20,470
So our FC is going to be just a react component, but with a traditional syntax.

89
00:07:20,710 --> 00:07:29,380
So if I go back, I can right away delete everything and instead of R A I type R FC, I'm going to get

90
00:07:29,390 --> 00:07:30,490
out right away.

91
00:07:30,490 --> 00:07:31,060
Export.

92
00:07:31,210 --> 00:07:39,370
So we're exporting notice how we create the same component or in this case it is using regular function

93
00:07:39,370 --> 00:07:39,890
syntax.

94
00:07:40,210 --> 00:07:47,650
So these are the things that I would suggest adding to your project as far as the extensions as well

95
00:07:47,650 --> 00:07:53,270
as the settings, just because they will improve your workflow tremendously.

96
00:07:53,590 --> 00:07:54,510
Now, you know what?

97
00:07:54,520 --> 00:07:57,740
By the end of this video, you can just delete detesting.

98
00:07:57,760 --> 00:07:58,120
Yes.

99
00:07:58,420 --> 00:07:59,750
We won't need it as well.

100
00:07:59,750 --> 00:08:00,880
Just close my extension.

101
00:08:01,130 --> 00:08:03,980
And now, of course, we can go back to react.

102
00:08:04,000 --> 00:08:09,790
Now, the one thing, of course, is the fact that I will need to change this back to a greeting, because

103
00:08:09,790 --> 00:08:16,360
remember, when we're setting up a react component, when we want to render it, it must be capitalized.