How to create your first React Native app

Before we start coding, we will have to setup the environment.

Step 1: Install Xcode

What is Xcode?

Xcode is an integrated development environment built by Apple which contains a suite of software development tools that can be used to develop software for their operating systems such as iOS, WatchOS, macOS or tvOS.

Xcode can be found in the Apple App Store. The current version is 4.55GB and it might take a while to download depending on your internet connection.

xcode apple app store


Step 2: Install Homebrew

What is Homebrew?

Homebrew is a free and open-source software package management system which will simplify the installation of software on Apple’s macOS operating system.

Visit and copy the command from the Install Homebrew section.

homebrew home page

then paste it in your Terminal and press Enter. Once the installation is finished it should look like this:

homebrew terminal command

Step 3: Install Node.js

What is Node.js ?

Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of tools and applications.

In your terminal type: brew install node then press Enter. Once Node.js is installed it should look like this:

node.js terminal
To check the version you have installed, in your Terminal type: node -v then press Enter.


Step 4: Install Watchman

What is Watchman?

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

To install it, all you have to do is to type: brew install watchman in your Terminal then press Enter.
homebrew install watchman


Step 5: Install React Native project generator

In your Terminal type: npm install -g react-native-cli and press Enter.

If installed successfully, It should look like this:

npm install react native project
That’s it!

Now let’s create our first React Native Project. In your terminal type:

react-native init myFirstProject 

first react native project

  In the project which was just created, go to the iOS folder and double-click on myFirstProject.xcodeproj file.

ios react native project
This will open the iOS project in Xcode. Once Xcode started, click on the Build button to open the project in the Simulator.

ios react native simulator


Front-end Engineer & Designer based in Dublin currently working @IBM.
I write about: Javascript, HTML, CSS, React JS, React Native and UI/UX Design.

1 comment