In this React Native lesson we want to learn about How to Install React Native, so in the first we are going to have a simple introduction to react native and after we go through the installation process.
What is React Native ?
react native is an open source mobile application development framework, it is created by Facebook in 2015 , using react native we can build mobile application for Android, IOS, Android TV, macOS, tvOS and Web, also it lets you create truly native apps and doesn’t compromise your users’ experiences. It provides a core set of platform agnostic native components like View
, Text
, and Image
that map directly to the platform’s native UI building blocks, it has fast refresh system, it means that with the power of JavaScript, it lets you iterate at lightning speed. no more waiting for native builds to finish. save, see, repeat.
according to their website, it is being used in thousands of apps, but it’s likely you’ve already used it in one of these apps like Facebook, Instagram, Wix, Uber Eat, Skype and many more.
There are two ways that you can install react native, the first way is using React Native CLI and the second way is using EXPO CLI.
React Native CLI Installation
According to React Native documentation If you are already familiar with mobile development, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
So if you want to work with React Native CLI than you should install android studio or xcode, and there are two ways that you can run your react native application in virtual emulator, the first way is that you can install an emulator in android studio and the second way is using genymotion, we want to use genymotion for this, make sure that you have already downloaded and installed genymotion.
Also for creating of React Native application you need to install nodejs, now you can use this command for creating react native application, you can change the name of your project as you want.
1 |
npx react-native init AwesomeProject |
After installation you will see different folders and files like this.
Now you can use this command for runing of your react application, make sure that you have already started your virtual emulator, this command will start our metro bundler and after that run our android application.
1 |
npx react-native run-android |
This will be the result.
React Native Expo Installation
Now let’s install our react application using Expo CLI, so If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native and, while it has many features, the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you’d like to try out React Native directly in your web browser before installing any tools, you can try out Snack.
OK first of all you need to install expo cli and you can install that globally.
1 |
npm install -g expo-cli |
Now we can create our react project, you can give it any name that you want for the project.
1 |
expo init AwesomeProject |
Change directory to your project and run your application using this command.
1 2 |
cd AwesomeProject npm start # you can also use: expo start |
This will be the result.