So that was a lot of introduction to React Native and expo but I find it important that you understand
what you're working with before you get started.
Now with that, it's time to get started though and for this, visit expo.io. There you can click on
get started and you'll find the starting steps here.
Now you don't really need that first step,
we can jump right into step number two which is that you need NodeJS. Now you need NodeJS which is a
Javascript runtime that allows you for example to build server-side apps with Javascript. You don't need
that because we're about to write any NodeJS code in this course,
it's not a Node course,
no worries, you don't need to know
NodeJS but it's a package which allows us to run Javascript on our machine and for example, the expo
client behind the scenes also runs on Javascript,
it's totally not related to React Native,
that's just for this tool to work correctly.
Also for this command to install the tool, npm, that's the Node Package Manager
and that's also made available by NodeJS.
So the first step is that you visit nodejs.org and there, download the latest version,
in my case 12.6 from there to get started and whatever your latest version is when you're viewing
that, simply download that version, install it,
it gives you a normal installer you can simply walk through by clicking through all these steps there,
nothing too fancy.
It's available for MacOS and Windows and Linux.
So simply download it here, walk through the installer and once it is installed, you can proceed to this third
step here.
So with NodeJS installed, let's copy that command here and then open your normal terminal or on Windows,
your command prompt and paste that command in here.
Now on Mac and Linux, you might need to add a sudo in front of this, on Windows
this will not be required, to get the right permissions.
So here I'll enter it,
then you might be prompted for your password, simply enter it if you are
and now this will install the expo CLI which is this tool that helps us create and manage React
Native projects with the help of expo globally on your machine, so that you can use it from anywhere
on your machine,
so from anywhere in your terminal.
So let's wait for this installation to finish,
you can ignore any warnings you might be getting in between and I'll be back once this installation
finished.
You can also ignore such in-between errors here by the way, as long as the overall doesn't crash with
an error but finishes with a message like this one in the end,
you were successful.
So with this, we got Expo CLI installed, the next step is to create our project, so step number four
here.
We do this by running expo init
and then any project name of your choice and for that, first of all make sure that you use the cd command
to navigate into the folder here on your machine where you want to create that project. So I did that
here, I'm in that folder and now I can run expo init and I'll name this rn-first-app because it's
our first React Native app here after all. Simply hit enter, that name of course is totally up to you
which you have here
and this will now create a new folder in the place where you ran this command and set up a React Native
app there using expo.
Now you probably are asked which template you want to use
and there you can go with the blank template for now.
Make sure you don't choose bare minimum because that would be a setup without the expo environment with
all the convenience features,
so definitely go with blank here.
Now next, you'll probably be asked to enter a name for your app and I'll just enter rn-first-app
here,
that's in the end the name which is displayed in the task switcher of your app on the home screen and
so on.
You can leave the slug as it is and simply hit enter again,
now I'm also you using yarn on my machine which is an alternative to npm, you might not be asked whether
you want to use yarn which is totally fine,
I will also choose no here to use npm
and therefore now, this will go ahead, create this project folder, install all required dependencies in
there like React and React Native and give us a React Native project which we can use to build a native
app.
So let's wait for this to finish now.
Now once it did finish, you see the next instructions here. You can navigate into the newly created folder
with the cd command and then in there, simply run npm start. Npm start will now start up the expo
development tool, the expo dev tools and a new tab should open up in your browser.
Here is that tab which did open, if you are any issues here, you can ignore that for now,
this here is the expo development tool or the expo dev tools as it's called.
It's a window which allows you to run your app on different connected devices or add simulators
and it allows you to generally manage parts of your app, you see some output from your app
here, some warnings you might be getting
and this is a very convenient window for managing your app and for running your app. Now
also make sure that here in the terminal where you ran npm start, you'll leave that process running.
You might see that it didn't finish, you don't see that input line again where you can enter commands,
instead here, you can't type or you can press some of the shortcuts you see here but you can't type new
commands.
You can always quit this process by hitting control and c simultaneously but you should leave this
process up and running for as long as you're working on your project
and if you are then done for the day, you can quit it and restart it on the next day because this process
will also watch your code and whenever you change something in your code and you save that change, it
will automatically save this and publish it to your connected device.
But speaking of that, let's connect the device and for that, the easiest way of getting started is to
use your iPhone or Android phone which you own.
So in my case, it's an iPhone here and here's my real phone and I'm in the App Store, now it's in German
because I have a German phone but this is the normal App Store. Now in there, you can go to the search
area and search for expo. Now once you did that, you should find that expo client here and you can simply
download that to your device, it's free to use. Simply install it onto your device and wait for this installation
to finish of course
and once this is finished,
you can open this and now with the expo app installed, you don't need to sign up here,
instead on Android you should be able to scan that barcode right from inside your expo app. On iOS,
simply open up the camera app and then you can go also to the dev tools here and you'll see that
barcode here, simply hold your camera onto that on iOS or the expo app scanner here on Android and you
should be prompted whether you want to open an app in expo then. Simply hit open there
and now this should open your app here in the expo client which you installed,
again without signing up, just by holding your iPhone camera over that barcode or on Android by doing that
from directly inside the expo app where you will have that option to do so.
So now this will build the Javascript bundle as you see here at the bottom or put in other words,
this will now take your app and compile it basically and prepare it and then load it here over expo's
servers into your app and you can simply hit got it here on the first screen and then this is your starting
React Native app.
And now let's actually view the code for this and see how we can change something in the code to see something
different here on this screen.