Since the publication of React Native Mobile Development Combat 2 at the beginning of the year, I haven’t paid much attention to RN this year. On the one hand, DUE to my busy work, on the other hand, I spent most of my time writing Flutter Cross-platform Application Development Combat. Recently, due to some spare time, I looked back at RN. Currently, RN has been updated to version 0.63, continuing the previous cycle of updating a small version every 1-2 months.
RN has made a number of improvements to its environment setup compared to the 0.60 release earlier this year. Overall, the setup process is shorter and the learning cost is lower for beginners.
Currently, RN supports macOS and Windows, and the steps for setting up an RN environment vary depending on the operating system and target platform.
React Native environment setup
To set up an RN environment on macOS, you need to install incoming dependent software.
- Node
- Watchman
- JDK
- Android Studio
- Xcode
In addition, in order to develop RN applications, we need to develop software according to WebStrom and VScode.
Install the Node
Node.js itself is not a new development language, nor is it a JavaScript framework, but rather a JavaScript runtime environment that uses the Google Chrome V8 engine underneath. Node.js is a wrapper around the Google Chrome V8 engine to create fast, efficient, and extensible Web applications. Meanwhile, Node.js’s package manager, NPM, is one of the largest open source library ecosystem managers in the world.
Before installing Node.js, download the installation package of the current system from the node. js official website. You are advised to use the latest LTS version because the LTS version has a long maintenance period and high stability. The installation of Node.js is relatively easy. You only need to double-click the installation package after downloading it, click the “Continue” or “Agree” button as prompted, and click the “Install” button to complete the installation.
After the installation is complete, run the node-v command to check whether the installation is successful. In addition, there is no need to install the NPM package management tool after installing the latest version of Node.js, because the NPM package management tool has been integrated with the latest version of Node.js by default. Of course, NVM can also be used to install and manage Node.js in real development, and CNPM can be used instead of NPM, because CNPM uses Taobao source, so the download speed is faster for domestic developers. The related commands are as follows:
NRM use Taobao # If you need to switch back to the official source, use NPX NRM use NPMCopy the codeIn addition to installing Node.js through the installation package, you can also install Node and Watchman using Homebrew for macOS. To install Node and Watchman, execute the following commands from the command line.
brew install node
brew install watchman
Copy the codeInstall the Watchman
Watchman is Facebook’s open source tool for monitoring and recording file changes. When a file changes, it triggers actions to record the changes. Watchman is officially recommended for React Native development because it improves development performance and efficiency. The following command is used to install Watchman.
brew install watchman
Copy the codeInstallation of Yarn
Yarn is a JavaScript package manager tool developed by Facebook to replace NPM. Yarn speeds up the download and build of Node modules. The Yarn installation command is as follows.
npm install -g yarn
Copy the codeAfter installing YARN, you can use yarn to replace NPM. For example, use yarn to install a third-party library instead of NPM install.
Setting up the iOS Environment
React Native requires Mac OS support for iOS applications, so it’s best to get a Mac if you can afford it. React Native’s cross-platform development benefits can only be taken advantage of by developing both iOS and Android apps using React Native.
Currently, developing apps for iOS using React Native requires Xcode 10 or later. If you do not have Xcode installed, download and install it from the App Store or Apple developer website, as shown in the figure below.
Xcode command line tool
Develop iOS applications need the support of some command-line Tools, start the Xcode, and in the Xcode | Preferences | check Locations menu is equipped with a version of the Command Line Tools. Xcode’s command line tools include some necessary tools, such as Git, etc.
Install CocoaPods
CocoaPods is an Apple app that manages third-party open source libraries for iOS projects. It’s written in Ruby. As of version 0.60, iOS versions of the React Native project require CocoaPods to manage dependencies. You can install CocoaPods using the following command.
Sudo gem install cocoapods // brew install cocoapodsCopy the codeNote: if the macOS version is earlier than 10.15 (Catalina), an installation error may occur. In this case, you can try to install an earlier version, such as 1.8.4.
Sudo gem install Cocoapods -v 1.8.4Copy the codeInstalling the Android Environment
The Development and running of ReactNative applications rely on Native platforms. Therefore, Native Android and iOS development environments need to be installed when setting up the ReactNative environment.
To build an Android development environment, you need to download the JDK version from the JDK official website and install the corresponding JDK version of the operating system. After the installation is complete, you can use the Java command tool to check whether the installation is successful. If the version information is displayed, the Java installation is successful.
At the same time, to make Java easier to use, you can configure environment variables for Java, as shown below.
Export JAVA_HOME = / Library/Java/JavaVirtualMachines jdk1.8.0 _261. JDK/Contents/Home export PATH = $JAVA_HOME/bin: $PATH:. export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.Copy the codeAfter installing the Java environment, you need to install Android development Tools AndroidStudio and Android SDK Tools. You can download Android Studio and the Command line tool Android SDK Tools from the Android Studio official website to install it.
Once the installation is complete, start Android Studio. When you open Android Studio for the first time, you need to configure the Android SDK Tools path Android SDKLocation in the Settings panel. After successfully configuring the path of Android SDK Tools, download the Android SDK slowly.
export ANDROID_HOME="/Users/mac/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
Copy the codeFor Windows, click “Computer” → “Properties” → “Advanced Settings” → “Environment Variables” to open the environment variables panel and add environment variable parameters. If the OS is Windows, refer to the preceding steps to set up the OS.
New project
Versions 0.60 and later do not need to install the React Native development tool chain. If you have installed the old React-Native CLI tool globally, you can use the following command to uninstall it to avoid conflicts when creating projects.
npm uninstall -g react-native-cli
Copy the codeThen, use the init command of NPX to create a new project, as shown below.
npx react-native init AwesomeProject
Copy the codeIt is also possible to create an RN project of a specified version, just add the version number when you create the project, as shown below.
npx react-native init MyApp --version
Copy the codeThen, wait for the project to be created in the background, as shown below.
Run the project
Run the project using WebStrom or run yarn ios or Yarn React-native run-ios in the project directory, as shown in the following figure.
CD AwesomeProject yarn ios # or yarn React-native run-iosCopy the codeThen, you can see the iOS emulator automatically start and run your project, as shown below.