Creating Our First React Native App

Academind by Maximilian Schwarzmüller
A free video tutorial from Academind by Maximilian Schwarzmüller
Online Education
4.7 instructor rating • 26 courses • 1,381,196 students

Learn more from the full course

React Native - The Practical Guide [2021 Edition]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux

32:29:01 of on-demand video • Updated March 2021

  • Build native mobile apps with JavaScript and React
  • Dive deeper into React Native
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android
English 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.