Setting up your First React Native Application

React Native is a Javascript framework which uses the full power of react and Javascript to make amazing Native applications. React Native compiles Javascript code to Native code, so components like Text, Button, View e.t.c which are used in React Nat…


This content originally appeared on DEV Community and was authored by DEV Community

React Native is a Javascript framework which uses the full power of react and Javascript to make amazing Native applications. React Native compiles Javascript code to Native code, so components like Text, Button, View e.t.c which are used in React Native will be compiled to the Native code of each platform (Android or IOS) .

There are two ways of building React Native applications, The easy way using Expo or the React Native CLI way. This article will concentrate on building React Native applications using Expo.

Expo is a framework or platform which assists us to build, deploy and view our application on android, IOS or Web from the same Javascript/Typescript codebase. it works for universal React applications.

Alright, enough chit-chat, let's get started with setting our React Native Application. You'll need the following Prerequisites to start.

  • [ ] Node.Js Installed (install it via here)
  • [ ] Code Editor (Preferably VS code)
  • [ ] Internet connection
  • [ ] A can-do attitude

After checking each of these off, let's get started.

Step 1

Open your project directory on VS Code and install the Expo CLI by typing in your terminal:

npm install --global expo-cli

Step 2

Create a new expo project, let's call it first-rn

expo init first-rn

Step 3

install Expo on your phone via the play store/ app store.

Step 4

Once the expo project has been created type in the following to launch the application

// Change directory
cd first-rn

// Start the application 
npm start

Step 5

After installing the expo app on your phone and after the expo app has launched, you'll see a barcode, scan the barcode with your phone camera.

Note: On IOS you'll have to use the barcode scanner that comes with the expo app.

You should see something like this on your phone if you’ve followed each step successfully.

Expo Hello world Screenshot

Congratulations!! You are done, you’ve successfully set up your React Native application. Now, go on ahead and make the next big thing, I can’t wait to see what you build. 😊


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-02-26T17:23:22+00:00) Setting up your First React Native Application. Retrieved from https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/

MLA
" » Setting up your First React Native Application." DEV Community | Sciencx - Saturday February 26, 2022, https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/
HARVARD
DEV Community | Sciencx Saturday February 26, 2022 » Setting up your First React Native Application., viewed ,<https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/>
VANCOUVER
DEV Community | Sciencx - » Setting up your First React Native Application. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/
CHICAGO
" » Setting up your First React Native Application." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/
IEEE
" » Setting up your First React Native Application." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/. [Accessed: ]
rf:citation
» Setting up your First React Native Application | DEV Community | Sciencx | https://www.scien.cx/2022/02/26/setting-up-your-first-react-native-application/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts