Introduction

You just have chosen to launch your React Native App, after exploring the pros and the cons of this technology. You've made the right choice! React Native is a great technology to launch multi-platform applications easily and free as described in this article (for French readers) ?

This article is the beginning of a series of articles to start your project with all the dependencies and settings you need to scale up your app like a pro ?

? Don't want to read all the explanations? Get a summary at the end of the article ??

What are you supposed to know before starting?

• Installing an application on your computer (MacOs, Windows, or Linux). See all documentations in the links I will give you for further explanations, and straightforwards tutorials.
• Writing React, React Native, and the language the previous technologies are based on, JavaScript. All are prerequisites before reading this article. If you do not know about it - at least to be able to understand some lines of code, you should follow the tutorials you find in the link above.
• Using the terminal of your computer

• Terminal.app for MacOS (cmd + space, then search for terminal.app)
• Terminal for Linux (ctrl + alt + t)
• Cmd.exe or PowerShell.exe on Windows (Windows + X or Maj + right clic in a folder

What are we going to deal with in the series?

• ? Install your development environment (this part)
• ? Add the must have packages to ensure a good code quality (?)
• ? Use the best packages you need to make your React Native App (later)
• ? Make your code safe by integrating continuous integration tests (later)
• ? Deploy your app on the Apple Store and the Play Store (later)

What we won't deal with?

• Learn Typescript, which is not mandatory to follow these articles, but should obviously improve your code quality. So it could be good to have notions about it for the Typescript section in the second article.
• Compare technologies, modules, or softwares
• Develop awesome features for your app
• Explore the community packages

Let's start!

Install your code environment

This is the most tedious part of this tutorial. It is not fun, but mandatory to launch your React Native App. Cheer up, you need to do that just once, and I will guide you all along this process!

First of all, to install softwares easily I use Homebrew. You can install it here on macOS or Linux, or here on Windows. Then run the following command in your terminal to make sure Homebrew is up to date:

++pre>brew upgrade++/pre>

Why using Homebrew and not the classic method by downloading a file, executing it and moving it in the application folder? Because it is:

• faster to copy and paste in your terminal a line I give you
• safer to have the latest version of the software
• safer to have the right application - no more corrupted file, or mirror website to download your .app (or .exe) file.

Then, to develop and run your React Native App, you need to install the following:

• Node.js

Node.js is a JavaScript engine. In other words it is the environment which will execute, build, and debug your React Native App, written with Javascript. Choose the version 12.16.1 (the latest stable version on February 2020).

++pre>brew install node++/pre>

• A node package manager: yarn (or npm)

It helps you to manage the Node packages. These are all the modules you can add to a basic Node.js project, and this is the string point of Node.js. By default npm is installed with Node.js, but I prefer yarn for the reasons described in this article.

++pre>brew install yarn++/pre>

• Watchman

Watchman watches files and records when they change. It can also trigger actions (such as rebuilding assets) when matching files change. Thanks to it, you will experiment the powerful React Native development, by viewing all your changes on the simulator as soon as you save your code.

++pre>brew install watchman++/pre>

XCode

XCode is needed (for macOS users) to develop on iOS devices

On the App Store, search and install XCode (version 11.3.1 on the 09/02/2020)

XCode is the Apple IDE, to develop iOS applications. It provides all the tools that React Native needs to build and run your iOS app. Moreover, it provides lots of tools to help you to debug your app. Last but not least, XCode comes with an iOS simulator which allows you to see your app in realtime while you will develop your features.

• Cocoapod (for macOS users who want to develop for iOS devices)

CocoaPods is a dependency manager for Swift and Objective-C (native iOS languages) Cocoa projects. It will link the native module to your React Native code.

++presudo gem install cocoapods++/pre>

This command uses RubyGem (follow the link if you don't have it). A gem is to Ruby what a node package is to Node.js. Here Cocoapod is a ruby package which helps us to link native libraries to our iOS code. Thus we install the 'gem' cocoapod to use it later.

Android Studio

You need Android Studio & the JDK (Java Development Kit) to develop on Android devices (for macOS, Windows, and Linux users).

Android Studio provides the tools you need to build apps on every type of Android devices. You can design, test, build, debug, etc... your Android app with it.

• Install the Java Development Kit (JDK)

++pre>brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8++/pre>

Further informations: AdoptOpenJDK is a prebuilt binary of the OpenJDK library, which is the open source version of the Java Development Kit (JDK). This development kit gives to developers the tools to develop Java applications like Android applications. Thanks to it you will be able to build and test your applications on the Android OS.

• Set up Android Studio

Then follow the "Android development environment" section (React Native CLI Quickstart > your OS > Android > Android development environment) of the React Native documentation to finish the installation by setting up Android Studio and environment paths.

? Well done! It was a bit long to install all these softwares, and we still do not have an App... But thanks to it, in the next section, you will create your first React Native App in 5 minutes!

Create your React Native App

In the terminal, go into the folder where you want to create your app:

++pre>++code>mkdir myProjects && cd myProjects++/code>++/pre>

Then run the following command:

++pre>++code>npx react-native init AwesomeProject++/code>++/pre>

What does it do? It:

• downloads the latest react-native cli (command line interface) thanks to npx which downloads and executes a node package;
• uses the react-native cli to download the latest React Native initial template and create a project named "AwesomeProject" - you can change this name as you want (as long as you only use letters and numbers in the name)

As an option you can specify a template for your app (the typescript template as an example):

++pre>++code>npx react-native init AwesomeTSProject --template react-native-template-typescript++/code>++/pre>

The option --template uses a specific template we specified with the option "--template react-native-template-typescript". This template initializes our React Native Project with Typescript.

Why choosing Typescript for our project?

You can read this article to understand the benefits of Typescript. As a summary I would say that Typescript:

• improves code quality
• improves code writing speed (autocompletion is awesome!)
• avoids bad mistakes of types

Et voilà! You have your React Native App, ready to be launch!

Run your all new React Native App (v0.61)

Go into you project folder

++pre>cd myProjects/AwesomeTSProject++/pre>

Then run

• for Android

++prenpx react-native run-android++/pre>

Troubleshooting: maybe you need to create an Android emulator. To do this, you can follow this documentation and select the Pie API Level 28 image.

• for iOS

++prenpx react-native run-ios++/pre>

Troubleshooting: maybe you need to launch XCode to download an iOS simulator. You can follow the XCode's documentation.

? You should have this screen on the iOS/Android simulator which has just been automatically launched:

? Too Long; Didn't Read ?

Running all the following commands should configure you environment to be ready to code:

++pre>++code>brew install node
brew install watchman
brew install yarn
brew cask install visual-studio-code++/code>++/pre>

• Install XCode and run the following command:

++pre>++code>sudo gem install cocoapods++/code>++/pre>

And/Or

• Android Studio and run the followings commands:

++pre>++code>brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8++/code>++/pre>

• ++code>Then:++/code>

++pre>++code>npx react-native init AwesomeTSProject --template react-native-template-typescript
cd AwesomeTSProject
yarn
npx react-native run-android  
- OR -
npx react-native run-android++/code>++/pre>