React Native - The Beginning

Hello,

If you are here, I am assuming that you are a fairly new mobile developer or web-developer. In any case, you would have probably come across terms such as ‘React Native’, ‘React Native in Production’, ‘React Native for IOS and android’. So if you are interested to learn more about them and explore how they work, you have come to right place!

We at Wobe use React Native in production, hence, I have been experimenting a lot with it lately and want to share my knowledge with you. In this series, I will explain everything you need to get started with React Native and we will develop an Android app together to understand React Native concepts and why it is gaining so much popularity these days.

Like any other language let’s begin by writing basic Hello World program and understanding different debugging options in React Native. As we all know, debugging is not only important for finding bugs but also learning a language!

First, you should follow all instruction from this link and setup environment required for React Native:

Getting Started

Once everything is setup go to the directory where you want to create project open command prompt, run:

react-native init HelloWorld

and allow react native to intialize and create basic project for you it will take some time as it will download and link all required dependencies

Creating New Project Using React Native init

Once it is done it will provide instruction about how you can run your android app but before doing let’s talk a bit about the folder structure

React Native project directory

• android : Contains everything related to native code
• node_modules: all packages used for project
• index.android.js : entry point for your app
• package.json: information related to all project dependencies

Now go ahead and connect your device, navigate inside your project directly and run:

react-native run-android

Running Hello World App

WHOA! you just ran your first app. Now to understand how text is getting rendered and which file we have to look into React Native provides you instruction.
Open ‘Hello World’ project in your favorite editor (I prefer using Sublime) and go to ‘index.android.js’. You will see something like XML, it is called JSX (Don’t panic if you don’t understand it at this moment) you can read more about it here:

JSX In Depth - React

• Change the text ‘Welcome to React Native!’ to ‘Having fun with React Native’
• Save the file
• Shake you device and you will see developer options
• Click on Reload

and you will see that it reloads and update the text (Pretty much like a web page right?)

React Native Reload

This is one of the useful feature React-Native has which many developers love (including me) that if you making changes into the javascript file you don’t have to build your project again! React Native JS server (Which it starts when we run the project) is responsible for updating your app with all latest changes.

Let’s explore some useful developer tools to have more fun with it and learn the art of Debugging!

Tip: whenever I ask to select any developer option, shake your device to view it

Debug JS Remotely

• Let’s you debug Javascript similar to debugging a website
• You can see console.log, console.warn and console.error output here
• Select Debug JS Remotely, it will open chrome
• App might run a bit slow so don’t worry!

Live Reloading VS Hot Reloading

• Reloads changes made in javascript file automatically as soon as you save it
• Live Reloading reloads the entire app while Hot Reloading only reloads the file that was changed
• Use Live Reloading when you want to restart your app and Hot Reloading when you want to see only UI changes made to one particular screen

Debugger

• Lets you put breakpoints in the code to see what is happening with variables and functions
• Just write ‘debugger’ where you want to put it
• Select ‘Debug JS Remotely’ and reload the app
• It will halt at your breakpoint

Toggle Inspector

• Lets you inspect styling and UI
• Remember clicks events won’t work until you toggle back

Android logging

• Use this if you want to view logs related to native files

[adb] logcat [<option>] … [<filter-spec>] …

• Eg: open command prompt and type

adb logcat com.helloworld:I HelloWorld:D *:S

Logcat Command-line Tool | Android Studio

That’s all from my side! I hope it made your getting started journey a bit easy and if you liked it then ❤️ it and share with others.

Stay tuned to learn more and to get your hands dirty with React Native 💻 📲

Let me know what you think in the comments below 💁🏻