Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

Say “Hello world” using React Native in Linux

Start the journey of developing native apps now.

Hi everyone.

So far I’m beginning to learn React Native and I’m very happy to share my way of starting out.

Some background about me : I am 20 years old, a third year Computer Science student, and currently working as a developer here in the Philippines.

This tutorial will focus on setting up your react native development environment on Linux as well as running your “Hello World” app in your mobile android device.

Alright let’s keep going!

Requirements :

Before proceeding, be sure to install the latest version of the following on Linux (Ubuntu 16.10):

  • npm (version 5.5.1 as of this writing)
  • node (version 9.2.1 as of this writing)
  • android sdk (command line tools only — for android)
  • Yarn
  • Watchman
  • Git

Others :

  • a USB cable
  • a mobile android phone

1. Verify the installation of npm and node.

You may check if npm and node is installed in your system using the following command:

> npm -v
> 5.5.1
> node -v
> v9.2.1

2. Install the React Native CLI.

You may install this using the following command :

> npm install -g react-native-cli

3. Create a new React Native project.

To start a new project, type the following command :

> react-native init <project name>

4. Connect your mobile android device.

We will build our application in a physical mobile device. To verify if your device is connected,type the following command :

> adb devices

note : you need to authorize your mobile device and enable USB debugging by going to “Settings>Developer Options>USB debugging”

5. Run the react native app

Run and build the app using the following command:

for android :

> react-native run-android

After successful build, the following will appear on your mobile phone :

Welcome message of a new React Native App

Congrats! now you have successfully created and build your first react native app.

To modify the welcome message, let’s edit the App.js file :

Then run the build command again :

> react-native run-android

We will now be able to see the changes.

Hello world!

There you go, we made a basic setup of react native on our local machine.

Let’s start coding. ^_^

Conclusion

React native makes mobile development fun and easy by enabling developers to use the same JS codebase for building both android and ios native apps.

I’m really looking forward to building my own mobile apps using React native soon. ^_^

More references here :