React Native First App

In this section I am going to create a Hello World App using React Native using Expo tools.In the same way we can also create a App using React Native Cli.

Before creating our first app we need to know what we are using in this Application.
React Native uses JSX.
JSX stands for JavaScript XML.
It allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
But React Native does not uses the HTML tags. It has its own tag.

<div> becomes <View>
<input type=“text”> becomes <TextInput />  and so on.

Steps for Creating the App

  1. First we have to install “npm install expo-cli –global ” in our command prompt.
  2. After that we have to create our First App with this command “expo init my-new-project”.
  3. Then we have to go that folder where the App exists by writing this command “cd my-new-project”.
  4. And last we write “expo start”.

Below are the step by step images where you can find the details that how we can create the app using above commands.

Install Expo globally
After installing Expo
Choose blank template
App is created
Default App
Hello World App

Steps for React Native CLI

To create a new project in react-native, follow the steps given below

  • Open command prompt and change the directory to where you want to store your project.
  • Type the command  react-native init yourprojectname.

It’s gonna take a while to finish creating this project.

Running your First React Native for Android Project
  • Now that you have your project ready for the first run, open command prompt and navigate into the folder of your project in command prompt.
  • To run the project in android, type the command react-native run-android
  • To run the project in ios, type the command react-native run-ios  assumming that you have a mac and an iphone simulator set up (But if you don’t have a MAC don’t worry we will be doing the android stuffs mainly).

0 0 vote
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x