The front end is a broad concept. The front end is the end closest to the user, Web front end, mobile end, desktop end, etc. One set of code, common to many, is nothing new, and many frameworks are striving to build the future of the big front-end, as is RN, which smooths the transition from Web front-end development to desktop and mobile front-end native application development.

These days, almost any framework provides command-line tools that run in a Node environment, and RN is no exception. If you’re a veteran mobile developer, use the NPM i-g React-Native command to install the React-Native command-line tool. If you haven’t done a full mobile project like me, install expo CLI using NPM I-g expo -CLI. The Expo CLI includes a set of tools around building React Native projects.

npm install -g expo-cli
Copy the code

After installing the Expo CLI, try executing Expo Init -h on the terminal. Init is one of the directives of the Expo CLI. The abbreviation for the initialization project is Expo I. Add the -h option to see the help manual for the init directive.

Expo init h -- -- -- -- -- -- -- -- -- -- -- -- here are terminal output -- -- -- -- -- -- -- -- -- -- -- -- the Usage: Init | I [options] [project - dir] initialize the project directory, you can specify a directory location, the default command in the implementation of the directory to create a project directory. Options: -t, --template [name] Specifies a template. The following templates are available: "Blank ", "tabs", "bare-minimum", other templates can be installed using NPM -- NPM specifies to install module dependencies with NPM. If yarn is not installed, NPM will be used by default to install dependencies -- YARN If you have yarn installed, The dependency module is installed using YARN by default. - Workflow [name] About to be obsolete. - Name [name] The name displayed on the first screen of the application --ios-bundle-identifier [name] Specifies the ios app packaging identifier -h, --help help manual, which is the content hereCopy the code

As shown in the official documentation, executing expo Init AwesomeProject creates a directory named AwesomeProject in the directory where you executed the command. If you want to create a custom directory name or directory hierarchy, you can do this:

Expo I name_one/name_two/test_project or EXPO I name_one/name_two/test_project/Copy the code

The above code creates the name_one directory in the current directory and the name_two directory in the name_one directory. The directory that actually contains the project files is test_project, which is wrapped in the name_two directory. There is no need to make things complicated during the learning phase. Follow the official example commands to create the AwesomeProject project directory:

expo init AwesomeProject
Copy the code

You will then be asked three questions:

  • Choose an RN project template that comes with Expo
  • Which dependency module is used to manage the tool? If YARN is installed, yarn is used by default
  • Enter the app name. The app name will be displayed on the home screen

It is not yet known what slug does, but slug has the same name as the directory where the project files reside, similar to the package name.

Go to the project directory and execute:

cd awesomeProject
expo start
Copy the code

Start the server successfully. Next, install the Expo app on your Android device or iOS. Download Expo from Google Play for Android devices. Download Expo from the App Store for iOS devices. The interfaces and operations of the two apps are roughly the same, but the way RN apps are connected is a little different. The Expo app installed on android devices is on the left and the Expo app installed on iOS devices is on the right.

On an Android device, click the Scan QR Code button of the Expo app and Scan the QR Code on a web page or terminal to see a sample app created by React Native. On the iOS device, directly open the camera of the device to scan the QR code, open Expo and run the sample app created by React Native according to the floating message that pops up in the camera.

Open the app.js file in the project, which is the entrance to the RN App, and try to modify the JSX code. RN apps running on Android and iOS devices will be updated in real time, thanks to Expo CLI.

import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app! </Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });Copy the code

After learning how to create an RN application using Expo CLI, use the React Native built-in command line to create an RN application. AwesomeProject is still used as the project directory, but in order to prevent name conflicts, first delete the project directory created with Expo CLI and execute the create project command directly using NPX:

npx react-native init AwesomeProject
Copy the code

Installing Cocoapods takes the most time, taking about 3-4 minutes to initialize the project directory.

I have installed Android Studio and Xcode in advance. I plan to deal with the work flow of React Native on Android devices first, because I made a piano 🎹 application through Android Studio when I was in college. Although it has been 4 years, I haven’t recorded it in time, so I have forgotten how to implement it. But I am more confident than dealing with Xcode. So I want to get RN up and running on an Android device first.

According to RN’s documentation, you need to have the appropriate Android SDK and Android AVM installed. The recommended Android SDK version in the document is Android 9.0 Pie, and then follow the steps in the document to create an appropriate VIRTUAL machine AVD. Since I find it too troublesome to test on a real machine during the development process, I recommend installing the virtual machine. I remember making the UI for the Piano APP. Android Studio supports real-time updating of the adjusted UI, so it was very convenient. When installing the VM, ensure that the Android SDK version matches the image version.

The RN official documentation recommends that the SDK version be Android SDK 9.0 Pie. I have installed the Android SDK from 9.0 to the latest version. I’m still using the Android SDK version 9.0 Pie.

After selecting the Android phone model, select the Android image. Android SDK 9.0 Pie has been installed on it. Click Next to create the VM. As you can see from the image below, I created two virtual machines, both with 9.0 SDK versions, but with different phone models. You can also create android virtual machines with custom hardware configurations based on device sizes and other requirements.

Install the React Native and Android development environment. Install the React Native and Android development environment. Go to the root directory of the project from terminal according to the official documentation steps, and then run the following command on terminal:

npx react-native run-android
Copy the code

When the command above starts to execute, a new terminal window will automatically open, as shown in the following figure. Then the Android VIRTUAL machine, the first of the two virtual machines I created above, will automatically open, and I guess the first virtual machine in the list will be the default virtual machine. The newly opened terminal window will start a service that listens for changes in JS files in the project in real time and notifies the application in the virtual machine to refresh the UI in real time.

The terminal running NPX react-native run-Android will automatically start downloading the necessary files to the vm. The following figure shows the output from the start of the command to the end of the command.

React Native configuration in the Android development environment is almost complete. Try modifying the code in the app.js file in the sample project, and the virtual machine will quickly respond to refreshing the UI, which is very convenient and efficient.

Next, React Native and Xcode work together to configure the iOS application development environment. Since it is my first time to use Xcode to develop iOS applications, I hope I can configure the Android development environment as smoothly as above.