UI/UX Design

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.


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 http://brew.sh and copy the command from the Install Homebrew section.

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

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:

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.


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:

That’s it!

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

react-native init myFirstProject 

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

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

1 comment