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.
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.
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
Firstly import everything that we need in "App.tsx" file for making this simple app like the below :
Then write the function called App like below:
Finally, export the App as shown below:
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