React Native Tutorial for Beginners

React Native is a JavaScript framework for building native mobile apps. It uses the React framework and offers large amount of inbuilt components and APIs.

Method 1: Building Projects using Expo

Expo is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code – no Xcode or Android Studio installation required (see Caveats).

Assuming that you have Node installed, you can use npm to install the Expo CLI command line utility:

npm install -g expo-cli

Then run the following commands to create a new React Native project called “AwesomeProject”:

expo init AwesomeProject

cd AwesomeProject
npm start

This will start a development server for you.

Running your React Native application

Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.

Modifying your app

Now that you have successfully run the app, let’s modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

That’s it!

Congratulations! You’ve successfully run and modified your first React Native app.

Method 2: Building Projects with Native Code

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you “ejected” from Expo or Create React Native App, you’ll need this section.

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that’s fine – you just have to pick one to start with, since the setup is a bit different.

Installing dependencies

You will need Node, Watchman, the React Native command line interface, and Xcode.

While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.

Node, Watchman

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install node
brew install watchman

If you have already installed Node on your system, make sure it is Node 8.3 or newer.

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Terminal:

npm install -g react-native-cli

If you get an error like Cannot find module ‘npmlog’, try installing npm directly:

curl -0 -L https://npmjs.org/install.sh | sudo sh

Xcode

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

If you have already installed Xcode on your system, make sure it is version 9.4 or newer

Command Line Tools

You will also need to install the Xcode Command Line Tools. Open Xcode, then choose “Preferences…” from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Creating a new application

Use the React Native command line interface to generate a new React Native project called “AwesomeProject”:

react-native init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you “ejected” from Expo (or Create React Native App), or if you’re adding iOS support to an existing React Native project

Running your React Native application

Run react-native run-ios inside your React Native project folder:

cd AwesomeProject
react-native run-ios

You should see your new app running in the iOS Simulator shortly.

Modifying your app

Now that you have successfully run the app, let’s modify it.

  • Open App.js in your text editor of choice and edit some lines.
  • Hit ⌘R in your iOS Simulator to reload the app and see your changes!

Leave a Reply

Your email address will not be published. Required fields are marked *