Left arrow Back to blog

React Native For Beginner

What is React Native ?

So what is React Native, what can we do? React Native is a mobile application development platform based on Javascript and ReactJS.Simply, it is designed resemble to ReactJS which allow you to create UI by declaring components. (You can study more about declarative programming at the link below: https://en.wikipedia.org/wiki/Declarative_programming).
React Native was developed by Facebook in 2015 and received a lot of attention and contributions from the Javascript community.Currently, React Native library has been trusted by large companies that are developing their products such as Skype, Pinteres, Instagram, Tesla, Walmart, Baidu, SoundClound, Uber, etc.

Why do we use React Native ?

There are a lot of debating about the reasons why we need the React Native.

  • Firstly, React Native relies entirely on Javascript Stack. You want to work with it, you must have Javascript-related knowledge. If you haven't had experiences in Javascript yet, you can find it out right here:

  • Secondly, If you have ever worked with Android, probably you would have known when you change just a bit as a string or a character to display, you have to wait for it to rebuild the project and then run the application on the device, which is very time consuming. Instead that, when we use React Native, the build app phase is quite fast and if you have made any changes, React Native will quickly reload the app for you ( in case the first time will take a little time ).

How to start with React Native ?

If you are a Mobile developer ?

You are familiar with native mobile, navigation, stack, thread UI , you just have to find the missing part which is Javascript and ES6, ReactJS and how to work with API and state management of Web developement.

If you are a Web developer ?

Surely you have to know about Javascript, if you don't have much experience, add knowledge about it especially ES6 or stop. If you're not familiar with ReactJS, find out about ReactJS right away.

Install the necessary tools

If you are a Developer, you definitely need git. You need to have Node JS installed (version 8+), and install more virtual machines (Simulator for IOS and Emulator for Android) to serve for debugging applications or you can use your mobile phone also.

how to start with React Native ?

There are two ways to start, if you are familiar with mobile development, you have already worked on Xcode and Android Studio. You should start with create React Native App. Another simpler way, You can start with the Expo without any other settings like Xcode or Android Studio. To get started, simply install the Expo CLI:

npm install -g expo-cli

After expo-cli is installed, you can check whether the expo is in the bash command by: expo -version, if the result is available, it will be considered as a successful installation. To initialize, you only need to run the command:

expo init your-project-name

When running this command, you have 2 choices:

  • blank: the simplest option with the least packages and a single component.
  • tabs: more complex options with some screens and templates

You had better choose blank. After a successful installation, you can quickly create an application with the CLI Expo command:

After this command, you will get the following folder:

After that, you just need to run the command:

expo start

You have already had the simplest application in the developable mode and a web interface (Metro Bundle) to manage, interact with the Expo.

With this interface, you can scan QR code and run the application on your phone. Remember to install Expo client on Apple store or Google play on your phone. You have Simulator on Mac so you can click on Run on iOS simulator menu

You can easily share with other members of your team to run the application, it help you quickly check to discover problems sooner. (Note for iOS devices, you must create a joint account and other friends in the same group use 1 account.)

How does React Native run ?

First, when you run the expo start command in the terminal, then expo will start with the file entry as App.js:

If you need to import or export, you can find out more here

Because React Native relies on React, the import of React which is from the react module is mandatory for components. Next is to import Basic React components like View, Text and StyleSheet.

After importing is complete:

A Component of React which was extended from React.Component must have a required method of rendering. In the above example, this method returns 1 View and Text component.

Next is Stylesheet:

StyleSheet is an abstraction similar to CSS Stylesheet when working with Web and Browser.

Next, you will learn how to work with components, View as div or Text as p in HTML. Then there will be other necessary components such as Image, Icon, Image background, etc...

Next you will learn how to arrange and beautify your application similar to CSS in the Browser and based on basic attributes like color, backgroundColor, fontSize, padding and margin. Especially is flex See more and practice here

Thanks for reading. Hope it can bring back to you useful things