Translation | "JavaScript Everywhere" Chapter 21 Using React Native to Create Mobile Applications

Write at the top

Hello everyone, I am Mao Xiaoyou, a front-end development engineer. An English technical book is being translated.

In order to improve everyone's reading experience, the structure and content of sentences have been slightly adjusted. If you find any flaws in this article, or if you have any comments or suggestions, you can leave a message in the comment area, or add my WeChat: code_maomao, welcome to communicate and learn from each other.

(σﾟ∀ﾟ)σ…:*☆Oh, good

Chapter 21 Creating Mobile Applications with React Native

1980One day in the late decade, when I was shopping with my parents, I found a small portable TV, which was a battery-powered square box with antenna, small speakers and a small black and white screen.

In the yard on Saturday morning, I was shocked by the cartoons I saw.

Although I may never own such a TV, as long as I know that such a device exists, I will feel like I am living in the future world of science fiction.

I had no idea that I would carry a device in my pocket when I was an adult, so that I could not only watch the Master of the Universe, but also access unlimited information, listen to music, play games, take notes, and take photos. Call a car, buy things, check the weather and complete countless other tasks.

2007In 1991, Steve Jobs ( Steve Jobs) launched iPhone, he said: "Every once in a while, there will be revolutionary products, which change everything. Of course, smart phones 2007existed before the year, but until iPhonethe rise (and The subsequent Androidrise), they really become smart. In the past few years, smart phone applications have surpassed the initial "everything is" gold rush stage, and have become a thing that users demand quality and have high hopes for.

Today's applications have high standards of functionality, interaction and design.

To make matters worse, modern mobile application development dispersed Apple iOSand Androidon the platform, each platform using a different programming language and tool chain.

You may have guessed it (it's in the title of the book), but it JavaScriptallows our developers to write cross-platform mobile applications.

In this chapter, I will introduce cross-platform libraries: React Nativeand Expotoolchains.

We will also clone the sample project code, which will be built in the next few chapters.

What we are building

In the next few chapters, we will Notedlybuild a mobile client version of the social note-taking application. The goal is to use JavaScriptand Webtechnology to develop applications that users can install on their mobile devices. We will implement part of the function to avoid Webtoo much repetition in the application chapter. Specifically, our application will:

Can be used on iOSand Androidoperating system
GraphQL APILoad note summaries and individual user notes from our
Stylize with CSSand styled components
Implement standard and dynamic routing

These features will give a comprehensive overview React Nativeof the core concepts used to develop mobile applications. Before we begin, let's take a closer look at the technology that will be used.

How we will build it

React NativeIt is the core technology that we will use to develop applications. React NativeAllows us JavaScriptto Reactwrite applications in and present them for the local mobile platform. For users, this means React Nativethat there is no obvious difference between an application and an application written in the programming language of the platform. This is the main advantage over React Nativeother popular Webtechnology-based mobile frameworks, which usually Webwrap the view in an application shell. Facebook, , InstagramBloomberg, Tesla, SkypeWal-Mart, Pinterestand many other companies have used React Nativeto develop applications for.

The second key part of our application development workflow is Expothat this set of tools and services simplifies React Nativedevelopment through truly useful features , such as on-device preview, application building, and core React Nativelibrary expansion . Before starting our development, it is recommended that you do the following:

Access expo.ioand create an Expoaccount.
npm install expo-cli --globalInstall the Expocommand line tool by typing in the terminal application .
expo loginLog in to your Expoaccount locally by typing in the terminal application .
Install the Expo Clientapp for your mobile device . You can expo.io/toolsfind links to Expo Client iOSand Androidapplications in it.
Expo ClientLog in to your account in the app.

Finally, we will re-use Apollo Clientand GraphQL APIinteract with data. Apollo ClientContains GraphQLa series of open source tools for use .

getting Started

Before starting development, you need to copy the project starter file to your computer. The source code of this project contains all scripts and references to third-party libraries, which are required for our application development.

To clone the code to the local computer, open a terminal, navigate to the directory where you saved the project, then git clonethe project repository.

If you've browsed API, Weband desktopchapters, it may have created a notedlyrational directory to keep the project code:

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/mobile.git 
$ cd mobile
$ npm install

Install third-party dependencies

By making a copy of the starter code for this book and running it in the directory npm install, you don't need to run it again for any third-party dependencies npm install.

The structure of the code is as follows:

/src

This is the directory where you develop with the book.
/solutions

The catalog contains solutions for each chapter.
If you get stuck, these can be for your reference.
/final

This directory contains the final work items.

The rest of the files and project settings are adapted expo-cli React Nativeto the standard output of the generator, and you can expo initrun the output by typing in the terminal .

App.js？

Due Expoto the working mode of the build chain, the App.jsfiles in the root of the project directory are usually the entry points of the application. In the rest of the book, in order to standardize the code of our mobile project, the App.jsdocument only as a / src/Main.jsreference file.

Now that we have installed the code on the local computer and installed the dependencies, let's run the application. To start the application, in the terminal application, type the following:

$ npm start

This will open Expothe " Metro Bundler" Webapplication on the browser's local port . Here, you can start the local device simulator by clicking one of the "Run on..." links. You can also Expo Clientstart the application by scanning the QR code on the (picture 21-1).

Figure 21-1. After starting our application, ExpotheMetro Bundler

Install device simulator

To run the iOSdevice simulator, you will need to download and install Xcode(only macOS). For Android, download Android Studio, and follow the Expoguidelines set device simulator. (See the diagram 21-2for comparison.) However, if you are just starting mobile application development, it is recommended that you start with your own phone.

Figure 21-2. Our app runs side by side iOSwith the Androiddevice simulator

If you have Expo Clientlogged in from the terminal application on your computer and the application on your mobile device Expo, you only need to open the Expo Clientapplication and click the Projectstab to open the application (picture 21-3).
Insert picture description here

Figure 21-3. With the help Expo Client, we can preview our application on the phone

With the ability to clone the code to your local computer and be able to use the Expo Clientpreview application, you can develop mobile applications.

in conclusion

This chapter introduces React Nativeand Expo. We cloned the sample project code, ran it locally, and previewed it on the phone or simulator. React NativeEnables Weband JavaScriptdevelopers to use their familiar skills and tools to build fully functional native mobile applications. ExpoSimplifies the tool chain and lowers the entry barrier for native mobile development. Using these two tools, novices can easily start mobile development, and web-savvy teams can quickly introduce mobile application development skills. In the next chapter, we will take a closer look at React Nativethe features and introduce routing and styles for our application.

If there is any inadequate understanding, please correct me. If you think it's okay, please like to collect or share it, hoping to help more people.