Before we continue exploring react now would be a great time for me to show you which extensions and
which settings Jason set up is going to be really helpful throughout the course.
So first, let me show you the extension that will help us to format the code as I keep on scrolling.
Notice here I have the extension by the name of prettier code format.
And of course, in my case I already have installed it.
But if you don't have it, you need to install and then once you install, you can navigate to settings.
So this is going to be a go for something.
So graphical interface.
And also later, we'll take a look at the JSON file.
But for the time being, just check for the prettier or you know what?
No, you can just go for format.
And then once you look for the format and a graphical interface, you'll find format on page as well
as format on save.
So I would suggest checking both of these boxes.
And then as a result, as you're typing, Prieur will format the code for you.
Now, what am I talking about?
For example, if I just keep on adding some spaces in between, basically I just make it a big, fat
mess the moment I certainly don't have Preeta right away nicely format the code for me.
So that would be the first thing.
Now, the second thing that I would want to show you is the AMT.
So you're probably aware that when we work with Malinauskas, yes, we have option of using Emet, which
essentially just speeds up our workflow and of course, individuals through the code that is built and
how when you work with react as far as just sex, it won't work right out of the box.
Now, one of my first of all, talking about, for example, if I want a hearing for or I don't know,
the idea of with some kind of ideas and classes which will later I don't have to start with opening
tag and then type adding for or article or whatever in my home.
And I can just go with heading for and write or notice how and what gives me the suggestion.
Again, we can go the same route we article or we can go with section or whatever.
Notice how it right away creates for me.
Now of course it's going to be way more beneficial once we start adding classes, but there are some
gotchas about classes and that's why I'm not going to cover them right now, but essentially in order
to have these suggestions.
So essentially in order for you to have this option so you don't have to type out everything from the
scratch, you need to go to your settings.
And once you navigate there, the property you're looking for is this amet and it is include languages.
And then you would want to set up JavaScript and JavaScript react.
So that's the code you'll need.
Again, if you just want to copy and paste the code, I would suggest going to a grab again.
My handle is going to be John Hyphen smugger and then you're looking for the ASP code setup.
So in here you'll find settings.
Jessan And then of course, this is the property that you're looking for.
So if you set this up, as there are, you can write a way, just copy and paste of this particular
value.
So that will enable Achmat in your JS sex as well.
As I did not notice, this is going to be formatting paste information so you can also add them manually.
Lexical meaning in the settings.
Jessan, you don't have to do that in agoI.
And then I have some particular things for the printer.
For example, here I set up only the single quotes and my address, but that is zero and that is really
up to you, whether that is your preference as far as the single quotes or double code.
How are you using Anne-Mette will definitely speed up your workflow when you're working in Java as well.
And lastly, I have this awesome, awesome, awesome extension by the name of iOS seven, React Redux
graphical react negative snippets.
Now, why this particular extension is so cool?
Because it saves us on the boilerplate.
So for the time being, let me just go back to whatever I had so I don't have some kind of error.
So let me save it here and let's just create another testing file in source Samasource.
Let's create a new file and I'll call this testing.
Now, don't worry, we won't use it.
But just to showcase how the extension.
It's going to work, for example, if I want to create this new react component.
I don't have to type import react and then set up the component.
I can simply type my snippet where if I go with R, A, F, C and E right away, we'll create it as
a function and then it's ready to go.
So notice Howard right away, imported to react right away, set up the component and you right away
have the return as well.
Now, don't be confused by the fact that in this case it is set up with a lowercase.
The only reason for that is because we're exporting something that will cover later.
And then once we import, then we will still need to use it with a uppercase.
OK, so it's not like I was just making this up where this needs to be uppercase.
You can clearly test that out.
If you'll go with greeting and greeting, you'll see that there is an error.
So essentially you don't see anything on the screen because of course you must, must, must, must,
must have this component with a capital case again, in this case a little bit different because we're
exporting and we are not at that point yet.
So we'll cover that later.
But this extension just gives you a awesome setup where you don't have to keep on typing this boilerplate.
Now, of course, the Arrow function is not the only component that you can create.
You can create components with regular functions.
You can create them with classes, which is the older syntax.
And if you want to see more kind of options you have for the snippets, just go for the extension.
Keep on scrolling and notice you can use Empy for imports, for example.
You want scrolling, keep on scrolling.
These are all the options that you have here.
And I think the regular function was our FC.
So this is going to be for the class components.
We're going to keep on scrolling and eventually we should see the regular function component on there.
So our FC is going to be just a react component, but with a traditional syntax.
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
out right away.
Export.
So we're exporting notice how we create the same component or in this case it is using regular function
syntax.
So these are the things that I would suggest adding to your project as far as the extensions as well
as the settings, just because they will improve your workflow tremendously.
Now, you know what?
By the end of this video, you can just delete detesting.
Yes.
We won't need it as well.
Just close my extension.
And now, of course, we can go back to react.
Now, the one thing, of course, is the fact that I will need to change this back to a greeting, because
remember, when we're setting up a react component, when we want to render it, it must be capitalized.