"Hello World" using React Native (MacOS)

Photo by Joan Gamell on Unsplash

"Hello World" using React Native (MacOS)

·

2 min read

In this article, we will learn how to write our first "hello world" app using React Native and get it up and running on the smartphone/AVD.

Before writing our first app let's first learn about some basics which will help us in understanding how our app works.

  1. JSX

JSX stands for (Javascript XML). Putting it simply, JSX is the modern way of writing our javascript-based applications. It is a combination of Javascript and HTML.

"Javascript + HTML = JSX". It is the way of writing code through which we can structure our app and also add functionality on the go.

Modern applications that are built using React or React Native render the UI which is written using JSX.

  1. Components

React Native provides us with some inbuild UI elements which we call components that help us to properly structure our app and also come with some functionalities. Let's take a look at some of the components that it provides us along with their use:

A. SafeAreaView

We usually use this component to wrap around our application. This is done to insure the different designs of smartphones don't hide away some of the UI in our application so that UI/UX is not compromised.

B. View

This component is used to separate the content within our application. For example when we want to keep some components together as one unit. This component is the same as "<div>" tag in HTML.

C. Text

This component is used to show text-based content (like strings) on the UI. It is similar to the "<p>" tag in HTML.

D. TextInput

This component is used to get input from the user of the application. It is similar to the "<input>" tag in HTML.

Now let's write our "Hello World" app

  1. Firstly import everything that we need in "App.tsx" file for making this simple app like the below :

  2. Then write the function called App like below:

  3. Finally, export the App as shown below:

  4. Now run the app and see the output on your device, you should see something like the below :

    The above article is based on the video "Rewrite React Native App" by Hitesh Choudhary from his React Native series on YouTube

    %[youtu.be/CZrJpEn6b4I]