What is React Native ?
Why do we use React Native ?
There are a lot of debating about the reasons why we need the React Native.
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 ?
If you are a Web developer ?
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
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:
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