How does React Native work?
In a web browser, in order to render interactive user interfaces, the browser’s DOM needs to be edited. In React, this is handled by the Virtual DOM.
Virtual DOM is a virtual representation (programming concept/pattern) of the DOM kept in memory and synced (reconciled) with the DOM by a library like ReactDOM.
In a nutshell, Virtual DOM acts as a layer between the developer’s description of how things ought to look and the actual work done to render your application on the screen. React Native uses a bridge to communicate with the native components of the respective platforms like IOS, Android etc. A simplified depiction of this flow is shown below…
With this high level understanding, lets proceed with the steps to develop a simple Hello World application using React Native and view the same in Android.
Steps to create a React Native application
I’ll be developing this application in windows. The steps should be similar whether you are using Mac or Linux.
1. Install the latest version of Node.js
- Install Node.js from here. I would recommed you install the latest LTS version.
- Verify node is installed using
2. Install the Command Line Utility
- Install the
create-react-native-appcommand line utility
3. Create our React Native app
- We can now create our React Native app using the command line utility as
Once the project is created successfully,
cd into the project and start the development server
4. Install the Expo client app to Run the React Native application
- Unlike React js apps, whereby the output can be viewed in a web browser, React Native apps can be rendered either in an emulator or the mobile devices.
- Expo client is one such app which can be installed on android or ios and we can run our application from the respective device.
- Once you have installed Expo client, register yourself on it. Ensure that this app connects to the same wireless network as our computer.
- On Android, use the Expo client to scan the QR code from the terminal. This will run the Hello World app that we created on the mobile device.
- Follow the instruction on the terminal for ios platform if that is your platform of choice.
App.jsfile in the
HelloWorldproject has some boilerplate code that renders the initial screen. You may consider replacing this with the following code snippet.
- The app hosted in your mobile device will now refresh and display the text