OK, so now we'll create some components.
So first of all, we'll create and everybody and we'll call it a hybrid component.
So let's just go ahead and first of all, create a folder inside the SHC Other Souls source folder.
So we'll create a folder here and we'll call it the components folder for components.
And inside the components will create a file that will be to the chests.
You can also call it GSX.
You can see when I type GSX, the logo changes to the React one.
Actually, the ASX is dedicated to only the act, but the GST is a universal file and there's a script
file.
But when you use GST inside the reactor, so it is understood that you are trying to say GSX only because
like in React, it's just the first thing that is there that you need to like.
You can just create a script and it's HTML and the styling at the same time inside the G6 or D.J.s file
to the DS file is also similar to the six file inside the like react.
I'm talking about the not also react.
When you do that and react to that is similar, so you can just try cheers or GSX totally depends on,
you know, problem with that.
Okay, so I'll be using its side.
They had other ideas.
Now, Bill, let me just minimize this for a second because we don't need to like, watch it every time
because I thought it was done that said, Well, that's what we wondered.
Nothing else extra.
It's not unsightly, either.
Yes, well, what we'll do is we need some boilerplate code, not is boilerplate code.
Boilerplate code is like this starting code Lord, the code, which is similar to all of the computer
and sound.
But still, we need to have a Typekit like many, many times so.
So we need to get that.
So in order to avoid typing the same code, so many times I've installed an extension.
So let me tell you what it is and.
For development like this, the best part about we ask that you get extensions which save you a lot
of time.
So basically, I'm using this one, which is the seven Docs Graph React Native Snippets version one
point 3.1.1 does by this.
I can pronounce this actually.
OK.
So this is by the authorities.
This and you need to destroy install this and that will make your life so much easier.
And I'll show you how that will do that.
OK, so I suppose that you are undecided audio file and it's an empty file right now, but you want
the basic import-export code and the basic written statement and on before that, what you do is you
will just install that extension first, you know, doing install that first, OK?
And after installing, what are you going to do reading to just type out a C and the functional component
export?
This is the full form of this direct functional component export with export.
OK.
So for me, it's for some reason it doesn't work as like directly because of offsite, because of may
be open to a WCL.
So for you, it may work.
And if it doesn't do it to just press control, shift B and then you click this snippet search and then
you need to type part of.
Same thing here so you can see what it's written.
The Creator, the creator, the functional component with AA7 module system, which means that will
be an export also.
But what they need to do is just and touch on this and boom, you will see the boilerplate code, the
import export and the basic function with that return will be shown here.
Let me just buy something here so that we can test that it's got a thing like that.
Component salary component.
Come for no.
I'm going to save it.
And now if you go to the browser, see you will see nothing, actually, because as I told you already,
whatever component you create that needs to be leaching to this reporting to this particular file or
the component, which is the app component of the Apple or GSI, like wherever inside your project,
whatever component you are creating some way or the other that that component should be rendered inside
the separatists, maybe indirectly that is OK, like inside on the computer, inside and then the component
inside another or that root component is being rendered in a gorgeous file.
That's OK.
But some way or the other that should report to the outdoors?
Yes.
Well, that is what I'm trying to say.
So that is why it's not being rendered.
So let us go to our gorgeous.
And the very first thing is that it does import that import.
And from.
Inside the components we have, they had a good two years, but we can write our details right and you
can just leave it also.
There's no problem with that.
It will not get confused because there is only like, yes, files are only there with the name and there's
a function inside, so there's no problem with that.
OK, now what we need to do is maybe to this the world and after that we need to just.
Right, that component is our dollar.
Will self close it all when I see it?
So this is what it is done, we imported the herder and we have used it, and so does too.
And now when I go to the browser.
And see, you can see that is the handle component, but this is the world like this is how the structure
works and react.
OK, so this is actually not what we wanted to print on the screen.
We want to print something meaningful.
So for that, let's to the I.D. code editor and here are to her support.
No, just.
Need.
So we'll create a logo on like the logo for dark.
We will keep it up and we'll write some text also.
We will create a constant pen that will be importing the logo.
Forms.
Well, all you can do it correctly, there is no assurance that global.
And we'll will have.
Image bank.
Giving.
Yeah.
David, because both.
And inside here, what we'll do is we'll provide the source of the image.
Now, if it's a local image and it's installed on you like it's present inside your order, your project
folder so you can just directly imported portraiture and you can provide that that name, for example,
our input to output, if that thing is like import image from.
And then your destination so you can write that image, you name it inside this inside the car library.
So then it will show up.
But odd image we are taking from where you are.
So let me grab that, you are told.
From there, it will be rendered or we are not restoring that particular image on our system file,
so we can just feel that you are still here and this is the world we should be using to guard the image
and actually putting the DAB old and will be the.
Local, basically.
Next, inside they return, what will do.
OK, so we have close it and we have to.
So my question here.
So next, we'll do in the.
And, Dave, what we'll do is we'll import this particular image, you know, no logo before importing
that, we have to provide calibrations.
And so this we have the right logo.
And let us see.
Books.
You can see that image has been successfully rendered, and that is the very first thing you have done
so far.
OK, now we would provide some extra inside detail after the logo will provide each one flag.
And we invite.
He.
It can't be.
Yeah, keep this that and this, but this is not how exactly we want, we want it in line.
So that's it for this structure missing basic structure, but now we need to provide some styling as
well to the component.
Before that, we need to create a file and so that we have to write access and then we have been portrayed
by giving.
Some asked me who are components.
Before that I will create a file or these sorts.
You basically just say, OK, it's already there to do that.
So I don't need to create it.
You can just go at the source and click on this and you can create a style or see as a sign that basically
the ceasefire in which all the styling part will be done, then you need to import it accordingly and
components.
So now what we'll do is we'll give some styling to the.
And then we'll provide some success to it, who will do in the next review.