Create First React-Native App(CLI)

1)Creating your project.

2)File Structure.

1. Running your app and Hello world.

Creating your project

Once you are done setting up all your environment for development, create a folder, where you store all your react-native projects.

Open your command prompt from that folder by typing cmd in your folder path on the top. Using npx(Node Package eXecute) you can create your react native app. cmd: npx react-native init awesome1. awesome1 is your project name.

File Structure

Once your project is prepared, open the command prompt inside your project and type "code ." which will open your project in VS Code.

After you open your project in vs code you would get to see file structure something like this.

• let's start with the android folder trust me there are chances that 95 % of the time you will never go into this folder that 5 % you only visit this folder for build.gradle to check dependencies and for build tool version.

• .gitignore is where you mention those files which you don't want to be pushed into your git repository like bundlers, node modules..

• .watchmanconfig is used to re-update your UI.

• app.json is where your android app name is stored.

• App.tsx is the main file of your project and it is responsible for getting everything on screen.

• AppPro.tsx is where I have written my hello world code, I will walk you through that file and the output in the next section of this blog.

• babel.config.js this file acts as the bundler which combines all your files together to make it executable on a browser or mobile.

• index.js this file is responsible for loading your App.tsx file with app name.

• 

Running your app and Hello world

In order to run your app press ctrl +j which will give a command line. There you can run this command npx react-native run-android

upon running that command you will get a metro cmd line

Enter ' a ' to run on Android. By default it runs on the stimulator, if you wish to run it on your own android phone then you gonna have to connect your mobile phone to your laptop, and select USB config as Transferring files from developer options in settings. And also enable USB debugging.

Incase you don't find developer options in your mobile settings click on build for a number of times.

• Hello World :

  Create a file with name AppPro.tsx

• 

  In order to see this Text on your output screen you just have to place it in index.js file.

• 

  With this you successfully ran your first react native app and executed the conventional Hello World !! program.

  Thanks for bearing with me..

  see you in the next blog where we will explore writing components.. until then good bye : )