Intro
If you have been working with Javascript for awhile you should have heard about the framework maintained by FaceBook, called React. And you might also know what React is, and that it's a library for building user interfaces, or a mobile app, website, etc. Now React, by itself, is only used for the frontend of your app, or what the user interacts with. Because React only really "handles"(using this term lightly) the frontend, you need to use other backend languages, to create a fully functional, full-stack application. A popular combination of frameworks that is used with React, is the MERN stack. MERN, stands for MongoDB(the database to store your applications data), ExpressJS( a web framework that uses Node.js), ReactJS(the client side framework), and NodeJS(the backend of your framework). However, there is also a thing called React Native that is similar to React, but it is for mobile apps. Being familiar with React, you might think, oh so React Native, must be a way to have your React web app, work in a mobile device, but it's not quite that. React Native is more than a web app that looks like a mobile app, it's a native, like in the name, mobile app that works with either Android or IOS. Normally, in order to create a mobile app, for Android or IOS, would need to know specific languages, such as Objective C/Swift for IOS, and Java/Kotlin for Android, but for React Native, like its' web counterpart you just need JavaScript. This distinction is why React Native grew in popularity.
How To Get Started
Now in order to really fully build and understand how to build a React Native app, you should confer to the React Native documentation, on their website here. But I will try to get you a quick run down and quick setup guide to creating a React Native app and show you some tools you can use in conjunction with it. Now there are two distinct methods for implementing react native, one requires a secondary tool, called Expo, and the other one is more vanilla and uses React Native directly. React Native's CLI is a way to use javascript code to create a fully functional mobile app. This app is sometimes confused to be a web app, running on your phone, but this is not the case and it is actually a fully mobile targeted application creator. Now though you can create an app using react native, using purely JS, you can also use native IOS and Android languages while using React Native as well. Similarly, Expo applications are written primarily using JS, and TypeScript, a language very similar to JS, but with various differences here and there. However the key difference between the two is that Expo does not support native IOS and Android languages. So now the big decision arises, when you ask, which CLI should I use to create my mobile app, Expo or Pure React Native. The major deciding factor in choosing either Expo or Native, should be made based on these two things, are you worried about some compatibility issues, and do you want to use native IOS or Android modules. Expo, since it strictly focuses on JS/TS code, was made for web developers in mind, so that they can create mobile applications easier without having to worry too much about learning native mobile languages. Though Expo, may sound like the way to go, having mostly pros about it, because of how Expo was built, it ends up being a larger in overall size, and uses more memory, compared to Pure React Native. This explanation is fairly basic but if you want a more in depth explanation for choosing either Expo or Native, you can look at the link above and the differences between the two are more detailed. Because I am mostly a Web developer, and because Expo applications can always be converted to pure React Native code, I will be explaining how to start off an Expo mobile application in my tutorial.
Now in order to get started, I am assuming you know how to install node modules via npm on your command line to get node packages. This tutorial is also on Mac, but windows installation should be fairly similar.
//This command installs the expo cli globally to your computer
npm install --global expo-cli
//This command uses that newly installed expo cli to initialize a new expo application, the my-project is what you want to name your new app
expo init my-project
// You can leave it blank and expo will ask you what you want to name it too :)
Now after you init, and give your app a name you will be presented with 5 options for how you want Expo to initialize your base React Native app, there are 2 JS templates and 3 TS, so test out each one and see which one you like best. These are literally templates with some being more vanilla than others.
Now after youe app installs, you will have to navigate to the new project folder that was installed and then run the command expo start. If you have yarn or npm, you can also run yarn start, or npm start too.
// navigate to app folder
cd app name
//run expo, npm, yarn start to build your expo app
expo start
Now as soon are run these command the Expo Metro Bundler will open up on your browser, using a localhost domain and it will prompt you and tell you multiple things, these things are just options on how you want to run your app. There are few options, such as running either a IOS/Android emulator, running it as a website, or as you can see there is a big QR code that you guessed it, you can run the app on your actual mobile device. However there is one catch to this, you need to install the Expo application on your phone from your app store and use that to "look at via the camera" the QR code, which will then prompt your phone app to open your expo app on your phone.
And Voila!!!
You have created your first Expo app, it was as easy as that! Now mess around, with it on your code editor, write "Hello World" where ever you want! Look at the expo docs for various helpful tools, tips, and steps you can take to create a beautiful mobile app.
Top comments (0)