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 ??
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:
Why using Homebrew and not the classic method by downloading a file, executing it and moving it in the application folder? Because it is:
Then, to develop and run your React Native App, you need to install the following:
++pre>brew install node++/pre>
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 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 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.
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.
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.
++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.
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!
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:
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:
Et voilà! You have your React Native App, ready to be launch!
Go into you project folder
++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.
++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:
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>
++pre>++code>sudo gem install cocoapods++/code>++/pre>
++pre>++code>brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8++/code>++/pre>
++pre>++code>npx react-native init AwesomeTSProject --template react-native-template-typescript
npx react-native run-android
- OR -
npx react-native run-android++/code>++/pre>