We're going to start taking our first step
towards completing social media application.
You see the design given here, and what we need to do to get started
with any project, really, in React Native is download the initial template.
To do that, we're going to have to open the terminal.
I'm just going to navigate to desktop
because that's where I like to place my files.
I'm going to type
npx react-native init
and I'm going to call this social media.
Let's press Enter, and the downloading process is going to start.
The items that are being downloaded is going to look a little different
on different operating systems such as Windows and macOS.
This is totally fine.
Just wait for this to complete and come back once that's ready.
Great.
The installation process is done and we have instructions on how to run
the application on Android device and we have such instructions for iOS as well.
The Windows users will not have these instructions, which is totally fine.
You can just check the application on Android and follow along the course.
Now here you're going to see that we are
going to change our directory and go into the desktop and social media folder,
and then we're going to start running the application on Android.
Here we see
npx react-native run-android
The same is going on for iOS.
I'm currently running on macOS,
so I'm going to have to go with this instruction.
I'm going to use this.
Actually, I'm just going to quickly add one more thing.
I want my simulator to be iPhone 14.
Usually, what it does is it opens up iPhone 8 because that's the default set
for my computer right now and I don't really want to see iPhone 8 pop-up here.
So that's why I used the simulator addition here.
You can also do so if you'd like and
just choose any device that you want to run your application on.
Great. So let me move this here.
My simulator started up already.
And what we're going to see here is that once the building process is
completed, the social media application is going to open up here.
Just wait for the installation to be
completed and come back to the video once you're ready.
Great. So installation process has been completed
and we see our default React native template shown here.
The Metro Bundler is running, which is great.
Let's not close this because we're about to edit this project and get it ready
for the next video where we're going to start setting up some of the items
that we're going to be using for this application.
For that, just open up your default IDE where you like to work on the project.
I'm going to open desktop and then click on social media and click on Open.
If you're running on Visual Studio Code, please don't forget to edit
your ESLint file so that you add the prettier setup here.
It will help you format your code.
But if you're not using Visual Studio code
and you have your formators already set up, then don't worry about this.
I do like keeping my code neat, so that's why I always try to use the formators.
Great.
Now we're going to see the main file here, which is called app TypeScript file.
As we know, React Native now supports TypeScript.
We've seen this before,
and the course is going to come up with a section later on TypeScript.
However, we barely know how to write
the JavaScript React Native code, so we're not going to be using TypeScript yet.
Let's just edit this file, refactor it, and make it a JavaScript file instead.
Then I'm going to get rid of some of this
stuff that we're not going to be needing here.
I'm going to get rid of everything here.
Other than safe area view,
we don't need this and we're definitely not going to need this.
We don't need the section component, so let's just get rid of this.
Here, I'm just going to write this function a little bit differently.
We don't need these variables.
We can have the return here, but I'm going to delete everything inside it.
Great.
We don't need this style either.
Then I'm going to delete these styles as well.
Now I'm going to get rid of these items as well.
I'm going to click on Save.
My code was automatically formatted and it looks great right now and we see the blank
screen on the simulator, which is intentional.
We're just going to continue on this in the next video.
Stay tuned and come back to the next video
where we're going to learn how to set up custom fonts.
Thank you and see you in the next video.