Okay.
In this video, I will show you what actually in the project we have created because we didn't have
a chance yet to look at the files.
So what I did is I removed my simulator, iOS one, and I also disconnect it from my phone.
So at the moment, the only build that I have active is the Android SDK build and you can actually switch
in between them and see what's happening there on this tab here so you can select which one you would
like to use.
So once we have that selected, you will be able to see some logs here.
If you need to see them, they will be available there also.
They will be available in the terminal here.
So you can see here you have whatever you've you've done here.
You also have it there.
So we we can have the terminal up and running here.
But I will prefer to have it everything in one place.
What I will do is I will do Ctrl C, so I'm stopping packager now so you can see here, this is actually
a stopped.
What I need to do is I can do expo start there, but I have my project open here in Visual Studio code.
So what I can do is I can open the terminal directly here and I can do Expo Start or I can do yarn start.
So this is enable again.
So every everything is ready and we can actually run it on Android device here.
So in the meantime, what I can do is I can show you the code.
And so I will have this application here.
So whatever I will develop here, it will be on the emulator on the right hand side, and then we can
talk about what we have in the project.
So I can close the terminal here and then we have the list of the folders and the files on here.
And it's very similar of what we had in the our react.
In fact, if you will take a look at that, it's not straightforward.
That's this is react native.
It looks very close to what we had in react.
So it's almost the same.
So what we have is we have the package.json that's the same package.json as we had in React.
Basically that's a list of dependencies, the different packages that we will need to have in order
to run our application.
You can see here we are having the expo react and then we have React Native and so on.
Uh, like uh, like here.
So basically the package.json is pretty much the same as it was in the react.
We have yarn log because I used a yarn for having that.
We have the bubble and then we have uh, these two files that we'll come back to that later on.
And then we have a few, a few files here, like a git ignore.
That's, uh, for git tracking.
So this folder, we know this folder already.
That's a node module.
So whatever we install dependencies, it will be here in the node modules.
This folder can be easily removed and recreated with yarn install or npm install and it will install
all the dependencies using the package.json in the node modules.
Then you have a asset and then in assets you can actually put your own asset.
If you have any images or something like a logo you would like to display here, that will be the place
to do.
And then we have two folder expo.
We have Expo Shared and Expo.
We don't need to touch any of this because that's related to Expo.
If you don't use the expo, you won't have that folders here.
So what's our application?
Actually, our application is that App.js.
I have it already open here, so I will make a little bit more space here to take a look what's happening.
So in our application, what we have is we need to import a react from React.
That's exactly the same what we had in React.
So basically this is the way we've done it.
And then we do also have a function here.
So this is our component that we have here.
That's the main component.
It's called an app, and then it will be displayed here.
So you can see here a text that's moving up and it is displayed there.
So what we also have here and that's created for us automatically is the stylesheet text and Vue from
React Native.
And you can see here, attacking is a little bit different because this is not a web version anymore.
This is version for mobile.
So we can't really use the same kind of HTML tags here.
But React Native comes with its own tags.
So for example, if we would like to display a text, then we wrap it around text.
Normally in the HTML you will use h tag like for a heading from 1 to 6 and our paragraph tag.
So in a react native you import that text and then you display it.
Then we also have a view.
So view is kind of like a container here and then we have a stylesheet.
So what is that?
Basically, that's our CSS and the way we write styles in the React Native is like this and I will come
back to this later on because I don't want to go too deep at this point, but basically that's an option
for having something like a style component in React.
So basically you have your styles, you apply it to the component like here and then it is available.
So if you will take a look at that file, this is pretty much the same thing as we've done.
We use the JSX here, we use the components.
We will use similar styles as we have it here.
We use similar react import.
So there is nothing really scary here.
The only new things that you will need to learn how to do is a little bit of different layout because
you can't really use the HTML tags you will use.
You will need to use the React native tags.
But this is not a big thing because once you will master few of them, you will be able to, uh, do
whatever you need to do.
And actually everything, whatever is available on the web, it is also available here.
And you have some improvements like our ready components that are available.
For Mobile and we'll be talking about them in the future videos.