Getting Started with React Native for Beginners

Learn everything you want to know about React Native.

Building a mobile app is not at all easy, yes nothing is easy. If you want to become an App developer, a big salute to you. Learning a Language, typing code, finding an error, testing it, is not at all easy. Other than that variety of devices in the world makes it more difficult to run apps on every device.

Android and iOS are the two most popular platforms right now. For iOS, we have to write in Swift and Android in Java. Thanks to React Native and Flutter, we can write a single code and run it on Android and iOS.

Today we will talk about React Native developed by the Facebook team with a well-liked library called React.

So, What is React Native?

React Native is an application development framework that uses web technologies to build applications. It will be an advantage for you if you are a Web Developer and starting a path in App Development. Once again, you don’t have to write code in Swift for iOS and Java for Android apps. React Native is here to help us.

Most trending apps use React Native like Facebook, Airbnb, Discord, Instagram, Bloomberg, Wix, and even Skype.

Getting Started with React Native

It was easy for me to get started with React Native, and I will try to help you to understand it. I told you if you are a Web developer, it will be much easier for you. For React Native, you require Node.js and Node Package Manager (NPM) installed with Code Editor and Expo.

That’s it? Yes.

If you don’t understand anything, don’t worry, I am here to help you.

Installing Node.js

Here I am using Windows operating system.

If you previously installed Node.js, you can skip this part and proceed further.

Ryan Dahl created Node.js and presented it at the European JS Conference in 2009. Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project. Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser.

It allows Node.js to be very performant.

You don’t have to learn more about Node and NPM right now, and it not a post about Node and NPM.

So now, let us download it.

Visit Node.js and follow the below procedure.

You can see mainly two versions Latest version and the Long-Term Support(LTS) version. The latest version means it is new, and many developers haven’t used it. Most developers use Long-Term Support since it is stable with approximately no errors.

It depends on your choice. I prefer to use the LTS version.

It is an easy process to download and install.

Once you installed Node.js, it means that you also installed NPM(Node Package Manager).

Once you installed it, you can check it from a command prompt. Open your command prompt and type

node --version

Want to play with it? Open your command prompt again, and type node and then enter, and type

console.log(“Hello Everyone”); 

Installing React Native

Once you installed Node.js, you also have installed NPM (Node Package manager). NPM is simply a package with Node. So you don’t have to download it.

Now get started with React Native. Open your command prompt and install React Native globally through the given command

npm install -g create-react-native-app

This command will install the React Native package globally(-g) using NPM. You can install it to any directory based on your choice.

To know more about it, you can also visit React Native setting up the development environment.

It is a simple, facebook tutorial to create a react-native app.

After you installed this, you can write code in VS Code or any code editor according to your wish.

Starting with Expo

React Native can be run through React Native CLI or using Expo.

Nitin, What we choose? Expo, my friend. It’s

1. Simple to install.

2. Developer friendly.

3. Fast.

4. Run it on your mobile

Also, Android Studio/XCode is not needed.

So if your PC laptop is not capable enough, then also you can run it through Expo.

To know more about it, you can visit Expo.

How to install it?

Open your command prompt and type

npm install — global expo-cli

This command will install expo-cli globally.

Now install the Expo app on your mobile.

Open App Store or Play Store and download Expo.

That’s it.

Simple Hello World App

Open your code editor. I will be going to use Visual Studio Code.

I am going to create a folder on the Desktop with the name React Native.

And open it inside Visual Studio. Open your command prompt and go to React Native folder, and type

code .

And press enter then Visual Studio Code will be going to open.

Now, we will be using the inbuilt command prompt present in VS Code.

Type control + backtick, and the terminal will pop up inside VS Code.

ctrl + `

Now create your first React Native App using the following commands.

expo init HelloWorld

It will create a HelloWorld app inside React native folder. Press enter and then type

cd HelloWorld

cd means change directory or changes your folder.

Press enter and type

expo start

It will be going to start your app.

That’s it.

Now you will be going to see the HelloWorld folder as shown below.

Here you will mainly work in App.js

Open App.js in VS Code and you will see like this

Cool enough! Here we can understand it since we are Web Developers (Not all of us but many of you).

You can see

<Text>Open up App.js to start working on your app!</Text>

Change it as shown below.

<Text>Hello World!</Text>

Open your in-built terminal in VS Code through:

ctrl+`

And run your program by typing:

npm start

You can also type expo start instead of npm start.

Lastly, you will be going to see a similar screen.

Scan the QR Code present at the bottom-left corner in your Expo app.

I hope you enjoy this post and learn something from it. That’s my intention!

You can learn more about React Native through React Native official website.

If you like my work and want to support it, you can buy me a cup of coffee!

This story was originally published at Shitus.