Okay.
Let's talk a little bit more about the things we can do in React Native.
And basically in this video we'll be talking about the components views and also we'll be talking about
the props and states.
So everything as we have in React is also available in React Native.
So there is not a new here.
The way we've done it in React is pretty much the same.
But I would like to show you how we can actually reuse the same kind of logic here in React Native.
So what we can do here is at the moment we have only one application and if you go to the folder here,
actually there is no folders structure like we had in React so we can create it on our own.
And if you would like to follow the same kind of strategy as we have in React, you can go ahead.
But this this will be more like a explanation video.
So I don't really care about the the placement of this thing.
So what I could do is I could create a new folder.
I can call it component.
Components.
And then inside I will create a new component and let's say I will call it home.
JS.
So that's going to be my home JS component.
So what we can have actually what I could do is I could copy whatever I have here and I can copy paste
that here.
So this will be our home component here and then we can, we can have whatever we had here before.
So basically I duplicate App.js App.js here and I paste it into home.
JS So this App.js I could removed most of it.
I will give it a little bit more space here and then I will also remove this.
So what I can do here is I could actually use a home component here so it is automatically imported
for me.
So instead of having that app.js as I had it before, now I have the app.js here and inside I just render
a simple component, which is my home.
So I have a component here and that's basically the same as I had it before.
And then we have this is a kind of placeholder, so I don't need to pollute this main app.js here.
So whatever I will have in my application, I can have it in a separate component.
But that will give us already an opportunity to test some kind of a functionality we can use in React
Native.
So in the same way as we use it with React, we can actually pass some props into our component.
So I can say, let's say message, I can say hello from.
Up so I can pass that as a prop here.
And then we can actually use it in our component here.
So what I can do is I can accept props here and then that props, I can display that here.
So I will do curly braces, props and message as I had it before.
So I will save it now.
And hello from App is here.
So basically what I have here, I have some information here and I pass it to my component and inside
the component I can access that here.
So basically that's not a new we've done that before with React.
So this is more like a reminder of what's possible in the same way as we had it there, we could use
some kind of state so we can have.
We can have here are constant.
And let's say I will have name.
Set name, for example, and then we'll do use state here.
So that's a react hooks.
I will need to also import it here.
So use state from react and then we can provide a default value here.
So let's say my name will be Krystian like this.
So we have our state here because this is functional components.
The way to do it with the class will be different, but it doesn't really matter.
We can use hooks in our React native.
So for example name I could duplicate this and then I can use name here.
So if I will save it.
I can see this is printed.
So this is printed basically from the state.
And I could also have some, some kind of logic to change the name and it will be displayed there.
So this is a very simple example of having the different components and sometimes components are called
views in the React Native.
And the reason for that is that view container here.
So the view basically it's like a div in our HTML.
So in React Native we will have a views and we can have views inside our views so we can think about
views as a container or as a component or like just a simple div.
And that will contains some content inside and we can have a different styling for different components.
So at the moment we have only one application here which one component loaded in here.
So as you can see here, this is very much the same as we've done it with React.
So there is not a new here.