This is going to be a quick video
on how to create new React Native
projects from scratch.
These are the steps that you're going
to have to go through every time
you want to create a new application.
Even though we have gone through the steps
before in the environment setup videos,
I wanted to go over this one more time
because practice makes it perfect,
and beginner developers have a hard time
remembering how to set up
new projects from scratch.
Let's do this together
and you can follow the steps anytime
you want to create a new application.
So first things first, we're going
to need to open the Terminal window.
And I always place my projects
on the desktop, so I'm going to change
the directory with cd command
and go to desktop,
and then we're going to use this brand new
command that comes with React Native 0.76
version, and it's called
npx @react-native-community/cli init and the application name.
I'm going to say it's
Hello World app for now.
Let's click on Enter.
What you're going to see here
is that React Native is
downloading the template project.
It's going to set up dependencies.
It's also going to ask
if we want to install the pods.
If you're running on macOS,
you want to say yes.
If you're running on Windows,
you want to say no.
The way you do that is either you press Y
on your keyboard for yes or N
on your keyboard for saying no.
I'm going to press Y because
I'm running on macOS, and you're going
to have to wait a couple of seconds
for this to get done, so you can
come back to the video once you're ready.
Okay, great.
Now this is done, and we have instructions
on how to run this on Android
and how to run this on iOS.
We're going to do both.
The reason is that you you want to know
if anything went wrong with your setup
right in the beginning so that
you don't doubt yourself later on.
You don't want to think that something
that you wrote in your code during the
development time caused those errors when
it might actually have been the setup.
I'm going to start with iOS first,
and then I'm going to go to Android.
The first instruction is to actually
navigate to the project, so we can just
copy this and paste it here.
I'm getting this warning,
but you can ignore it.
If you're also having this,
it doesn't really matter.
Then to run the React Native
application for iOS Simulator,
you're going to use this comment.
Now, if you're running it for Android,
you can just do Android here,
but let's run it for iOS first.
Let's click on Enter, and we're going
to see the Metro Bundler open up.
This is what has to be running
on the background anytime you want to be
working on the and seeing the changes
in the iOS simulator.
We also see that iOS Simulator
automatically opened up for me.
That should probably
happen for you as well if
you're running this command,
but if it doesn't, you can always
run
npm start
in the terminal
and it should open the Metro Bundler.
Now, let's wait for this app
to get built and you can come back
to the video once that's done for you.
Great.
Now, the application has opened up and we
see a little bit a log here that says
Metro Bundler logs will be removed
with 0.77.
If by any chance you're running this
on 0.77,
the only way for you to see your console
log is to press J, and it
will open up your dev tools.
If I just press this, we'll see that
all of the logs would actually
go into this console log.
For now, what we want to do is
to make sure that we see
the same template for Android.
If you're running Windows section
of the video, then you can just do
npx react-native run-android
in your terminal, as we talked about.
It would open up your Metro Bundler
and launch your emulator
if your setup was done correctly.
If not, you can go back to the videos.
Since I have the Metro Bundler already
opened, I can just click on A
on my keyboard and run this for Android.
I'm going to do that.
It's going to launch
Emulator as we see here.
Now, some things are getting installed
and you can wait for this to be completed
and you can come back to the video
once that's done for you.
Great, the application has been
installed, build was successful,
and now we're going to see the same
React Native template right here.
Now, to get started on your projects
from scratch, what you usually want to do
is go to your editor, make sure that
you open up your Hello World application
from wherever you placed it.
And what we want to do is
get rid of all of this setup.
So first of all, actually,
I'm going to get rid of TypeScript file
here and convert it to JavaScript because
chances are if you're watching this video,
you're not very familiar with TypeScript,
and I don't want to confuse
you with TypeScript code.
We can talk about that later.
Let's just convert this
to JavaScript for now.
We can do the refactor, and
we're going to go here and we're going
to see the initial code for application.js file.
This is what was rendering all of this
content that we see in the simulator.
Great.
Now, let's get rid of
the imports that we don't need.
The only things that I'm going
to leave in is the safe area view
and the text component for us
to test Hello World on our simulator.
I'm also going to get rid of these imports
because we don't need them.
Neither do we need these
or the section component.
I'm going to get rid of this.
Actually, I'm going to
convert this to to ES6 syntax,
and then we can get rid of this.
We don't need it.
We can get rid of the styles,
and we can get rid of all of this code
inside the safe area view,
and we can get rid of this as well.
Now, We can just type in text
and Hello World right here.
We can save it and unsave my editor
automatically formats everything.
We see Hello World displayed here.
If I go to the Android emulator right
here, we're going to see the same thing.
Actually, if I get rid of safe area view
here, just to show you, what's going
to happen is that Hello World
will be displayed correctly here,
but for iOS, it's going to go right there
at the beginning of the toolbar.
That's what SafeAreaView does.
We're going to get into that later.
That's all.
Thanks so much for watching,
and I'll see you in the next video.