React Native is most popular frameworks that allow you to develop cross-platform apps. You will be able to write code for iOS , android and web.
In this tutorial, we will see, how to create our first app in react native.We just create a simple hello world app . in next post we will see show to create a navigation base application.
Prerequisites for react native
Before start the tutorial make sure you have install Node.js as we show in last tutorial React native environment setup in Mac M1.
this will also install npm.
We also need to install cli , There is two cli Expo cli and react-native-cli. We will go through react-native-cli
To install react-native-cli run :
Now react-native-cli setup global in your system. it will work for both iOS and Android. Now you can start setup your first app.
Setup Project
Open you terminal and reach the folder location where you want to create new project. here we created a ReactNativeSamples folder within Documents. in terminal run following command to reach the folder location.
To create new React Native app, run the following command:
We give the project name FirstReactNativeApp , you can create using any name. this command will create new project with given name and install all require dependencies of react native that are require for basic app.
if you added new dependencies that are related to iOS feather then you have to install pods for iOS , you have to open cd ../projectName/ios folder and run following command to install pods
If all dependencies are not installed and ios and android folders are not created in project folder then you have to uninstall the react-native cli globally and install again using following command:
Uninstall :
Install :
After that create project again and see in project folder all require dependencies installed and platform folder ios and android will created.
Project Structure
Let’s see the project’s structure before we start coding.
We have the usual package.json file that is create on project creation. That contain information about dependencies , When react native version is install and other dependencies used in project.
There is app.json project folder. This contains a set of configurations for our app. It have key-value pairs related to the app name, version, platforms, icons, ios, android and more.
App.js is the file from where our application files load.
Understand First React Native Components
Open App.js file and see the Hello World app code . This is similar to following
When we import react-native dependency in app, it provide it’s components, Which component we needed that we need to import , you can see in code we used on 2 components View and Text .
Running the Application
Run the app using follwoing command in ios simulator
Run in ios :
