Getting Started with React Native (Part 1)
This is the summary of what I have learned on getting started with React Native.
Here I am using Mac as a development OS.
Requirements to Setup React Native Environment (Mac)
brew install node
brew install watchman
npm install -g react-native-cli
Note: how to install Homebrew
Creating the First “HelloWorld” React Native App
react-native init HelloWorld
To open the app in Xcode:
click on the run button
If everything goes well, you should see the emulator screen as below:
React Native App Directory Structure
- index.ios.js: app entry file for iOS
- index.android.js: app entry file for Android
- ios: boilerplate code folder for iOS native app
- android: boilerplate code folder for Android native app
- node_modules: contains installed dependencies/libraries
- package.json: app meta-data file also contains list of dependencies
Import: imports all necessary components/libraries/UI elements from different packages.
Class: contains render() function to render the output.
Style: defines CSS styles for UI components.
AppRegistry: defines the root component/entry point for the app.
Building a Simple App
This section will guide you step by step on how to build a simple React Native app which consists of some basic UI components and functions. In short, components are the building blocks for a React Native application.
Before We Start
Before starting to build a mobile app, it is important to understand the design guidelines for different mobile platforms such as iOS and Android. You can read those guidelines via the following links:
There are a couple of popular free and open source IDEs for React Native at the moment: Atom with Nuclide and Deco. Each has its own great features so you may try to use both of them and choose the one that is suitable for you.
Since I’m more familiar with Atom+Nuclide, I will be using this IDE in this tutorial. Please refer to the setup instruction of Nuclide for Mac here.
Once you have done with the installation, you should be able to open your React Native project with Atom either via GUI or simply using the command line (e.g. atom HelloWorld).