React Native Day 2, Creating first React Native App

Hello everyone. Let’s continue our journey with react native. I will suggest you guys to go through day one talk.

Please support us by comment, like and share our facebook page.

I have attached source code along with log files at the end of this tutorial..

What is Native ?

In context of react native, it relates to the native look and feel of iOS and android controls. React Native uses the same UI building blocks as native iOS and Android apps. We just put those building blocks together using JavaScript and React.

Have a ☕ and start stuff –

Environment set up

React Native uses Node.js, a JavaScript runtime to build our JavaScript code. It is open source.

Node.js – A run time environment/simulation for executing javascript code outside our browser.
Facebook’s React Native uses Node.js to build javascript code.

Lets install Node from here.

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

In the above screen shot if you notice there is npm, so what is npm ?

NPM (Node Package Manager)

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

NPM is a package manager, a online repository from where we can download some packages (reusable code/library) as well as we can share our packages (reusable code/library) also. If you are coming from mobile apps development experience then you can think of it (npm) as Cocoapods, Carthrage or Gradle. With the help of npm we can download some command line tools.

Let’s create our first react native app.

install the create-react-native-app command line utility. On terminal type it:

After pressing enter this is what i get in my terminal:

As per the above suggestion in command prompt for update i then run update command as follows:

Create-react-native tools makes it easy for us to create a react native project.

We do not need to use Xcode or Android Studio to create a react native app.

At my end I created a folder named “LearningReactNative” in desktop.

Lets change directory using cd command in terminal and hitting enter:

After switching directory successfully, lets name our project “AwesomeProject”, type below command in terminal and hit enter:

This is what i got in my terminal, and thanks god, at the bottom i get success message:

Please support us by comment, like and share our facebook page.

I was just excited to see actually what happened in my folder structure and below is the screen shot:

 

Great!

Now lets run below commands:

npm start will start a development server for you, and print a QR code.

I get some thing like this:

 

 

 

 

Running app

Now we need to install Expo client app on iOS or Android device. Connect your device to the same wireless network as your computer. Now use Expo app to scan QR code and it will run your app.

These are the screen shot of app running on device:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I made some changes in app.js file, look at (Shake your phone to open the developer menu test test).:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Congratulations you have created your first app :).

Happy Coding 🙂 ☕

Please support us by comment, like and share our facebook page.

All the resources can be find here.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.