Steps to create a Basic React Native App

To create a React Native Application, we need to install Node JS., With the help of Node JS, we can import all the Library require for creating a React Native App just like React JS.

Install Node JS

Since React Native is a Javascript Library, to setup React Native we have to install Node JS & install Node Package Manager.
Download Node JS and install it in your System based on your Operating system.

https://nodejs.org/en/download/

Once installed, automatically the node package manager will be installed., (npm)

Assuming the latest version of npm installed., npm versions > 5.2.0 has default npx binary.
where npx is just a simple binary/tool required for using the packages in npm.

Now Open terminal or any command prompt, and try the following to check the version of Node JS.

Install React Native Library

Now Once the Node JS installed with the above steps, we need to include the react native library with the help of Node JS.

Use the below npm command including option -g, which says global, where the create-react-native-app library will be installed globally in Node JS archive in our system.

Step 2 is to create a project from scratch or we can choose any template..

Here we selected Default new app., Hence a Empty React Native Project is created for us.

Once the above command executed successfully, we could see React Native folder created with files(Basic Template) named “BasicReactNativeApp“. Open Code base in any available JS Editor.

The most commonly/widely used editor is VSCode Editor which is easy to make Javascript code changes..

Nowe we could see the node_modules created with all the REact Native libraries required for React Native project.

Also we could see android folder and ios folder created for Android Device and IOS device.,

Now open the Project(File->Open Folder) in VS code Editor and open BasicReactNativeApp folder in VS Code , the code base looks like below.

From the code we could see, the index.js is the main file called by the React Native App, which again include the App.js file component.

Hence App.js code will be displayed in Home screen when running react native application..

Run on the connected device(e.g., Android)

To run on IOS device, use the following command.

To run on android device, Just use the following command.

  • Prerequisite:
    • Install Android Library/SDK in your system for creating an android build.,
    • Connect to Android Device via USB Cable or WIFI with the help of Android Studio.,

Once the above command executed, a new command window will be opened for Metro.., showing background processing of react native executing, connecting to android device connected to System.

Now in your connected Device, or Emulator we could see the React Native App running in Android Device like below.

ReactNative – App Js Page- Android Device Screen

Leave a Reply

Your email address will not be published. Required fields are marked *