Expo builds the React-Native component library

In recent days, I have been studying how to quickly build RN component library, which happened to be shared by the company. Therefore, I prepared a PPT to discuss with you here.

Why develop component libraries?

First, let’s start with a question: Why do we develop component libraries at all? Why reinvent the wheel when there are so many different component libraries out there?

There are two reasons for this:

On the one hand, as far as component library itself is concerned, it can improve development efficiency, reduce maintenance cost, code reuse and other benefits; On the one hand, for the company’s projects, we use third-party component libraries, which are not highly utilized and difficult to modify again, plus the developers themselves have encapsulated more than a dozen components.

Also, trying to develop a component library is a personal enhancement. But I think one of the most important reasons is that the design specification must have code.

Product managers have a product logic specification, interaction designers have a product interaction specification, designers have a UI style specification, and so on. These specifications, directly or indirectly to the developer, are code. By doing so, the component library can better define these specifications than a thousand Hamlets. Therefore, it is necessary for us to have our own component library.

directory

Take a look at the table of contents. There are four parts to this article.

• Expo profile
• Project structures,
• The development of component
• Release the component

Before we get into EXPO, let’s take a look at the steps involved in creating an RN project in general.

As you can see, there are several cases depending on the development platform and target platform, and for beginners, these configurations are usually not difficult to get down in half a day. However, Expo is much simpler. You only need to install expo-CLI globally, and you don’t need to configure those complicated development environment.

Expo profile

Expo, according to its website, is the framework and platform for the Universal React application. It’s a set of features, tools, and services built around the React-Native and native platforms that allow you to develop, build, deploy, and iterate quickly on iOS, Android, and Web applications using the same JS/TS code.

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Introduction to EXPO – Features

Expo allows us to develop RN projects efficiently and quickly, mainly because it helps us to encapsulate many device-related functions. We just need to focus on developing JS files. It mainly consists of the following four functions:

First, there are rich apis for accessing device functionality. Such as album, address book, location, camera functions, just need to introduce EXPO-related API to achieve.

Second, build binaries online. You don’t need any device environment, just a certificate qualification, to build binaries and deploy applications.

Third, deliver updates over the air. This must be the heat more. If icon, name, sdkVersion, etc. (publish-limitations) are not modified, the update can be issued immediately without building.

Fourth, push notifications. Push notifications across platforms only require a few lines of JS code. Of course, you can also configure your own push Settings.

Introduction to EXPO – Tools

Expo offers four tools to help us develop better.

• clientMobile app for previewing projects
• expo-cliCommand-line tools, development, build, deployment
• snackSandbox tools, live editing, online preview
• SDKThe core. The version number is updated with the RN version number

Introduction to EXPO – Services

In principle, Expo is free, and the code is open source without charge.

However, some priority services will be provided at $29 /month. For example, building services online is free and requires a server. Expo will provide basic build services, but if peak usage is high, there will be a queuing mechanism and wait times will be uncertain. If you don’t want to delay something for this reason, use priority services and build your project first. Of course, he has other services, you can go to the official website.

Community	VS	Priority 29$/m
support	Developed in Expo-CLI	support
support	Online build	support
Does not support	Priority to build	support
Does not support	team	support

Project structures,

Ok, with a brief introduction to Expo, it’s time to use Expo to create our project.

Project setup — init

First, install expo-CLI scaffolding globally

npm install expo-cli --global
Copy the code

Then, initializing the project will let us select the template, we select blank template

expo init xxx
Copy the code

Next, start the project

cd xxx
expo start
Copy the code

Finally, preview the project

You can scan code to preview the project through the mobile terminal, namely Expo-client, or enter I or A in the terminal to start ios or Android emulator preview (provided you have the corresponding emulator installed).

At this point, you can actually move on to the third part, developing the components and skip the rest of the project

Project Scaffolding – Template usage scenarios

Expo Init XXX will have several templates for us to choose from when initializing the project. How to choose a template can be found in the following table according to your actual needs.

If used for project demos, component previews, or personal projects, select blank templates.

If you need the bottom TAB menu, select Tabs template;

If you need to control native code, select minimal template.

If unknown problems are expected, use RN.

Characteristics of the	Managed workflow	Naked process	Native RN
Can only be developed using JS/TS	✔
Use Expo to create iOS and Android versions	✔
Use Expo’s wireless update feature	✔
Use expo’s push notification service	✔
Use the EXPO client application for development	✔	✔
Visit the expo SDK	✔	✔
Add custom native code and manage native dependencies		✔	✔
Develop in Xcode and Android Studio		✔	✔
Unable to access the Expo SDK			✔

Project setup — publish

When we finish developing the project, we need to let others preview it by logging in to the Expo account expo Login, and then executing Expo Publish to publish our application. You can also use the UI provided by EXPO. When the post is complete, there will be a pop-up box telling us the preview link.

Project building — Build

If you need to generate an installation package, run expo Build :ios/andorid with related certificate permissions. Packaging is actually packaged online, where the generated binaries are saved. You can go to the Expo website and log in to see the packaging process and results.

Project setup — upload

With binaries in place, we were ready to launch the app store expo Upload :ios.

Of course, this is a very rudimentary process, but it’s enough to get an idea of how an EXPO project will go from creation to launch. If they do, they need to be studied.

The development of component

With the project created, we can develop the components.

Development components – Add a development directory

Developing directories is simple, just have a components folder in the root directory and an exported file. As follows:

Develop components – Component source switches

If you need to preview a component in real time as you develop it, the introduction of the component in the preview page might look like this:

// The preview page may be located at SRC /views/ buttonDemo.js
import { Button } from  '.. /components'

Copy the code

After the component is developed and published, if you want to see the online component in action, the introduction might look something like this:

import { Button } from  'react-native-unit-zjp'
Copy the code

If you develop some components and have some preview pages, you may need to change the component paths frequently during development and after release to preview the components.

In fact, we can have a unified modification of the component import path to solve these problems.

Add index.js file to SRC /component-path:

export * from '.. /components'; // Local debugging
// export * from '.. /.. /dist'; // Test the package before release
// export * from '.. /.. /node_modules/you-name'; // NPM online package
Copy the code

Develop components – Add publishing directories

Add the dist folder to the root directory, where the Components folder under dist was copied directly from the development directory. There needs to be a package.json file in the directory that manages the components we want to publish.

At this point, we just need to refine our components over time.

Release the component

Once the components are developed, it’s time to publish our components to NPM.

First, create an NPM account. Register on NPM website.

Then, step 2, initialize the NPM project. The project we just created has a package.json file.

Then, step three, log in to our NPM account. NPM adduser or NPM login. If you do not know whether you have logged in, run the NPM who am I command.

Finally, step four, publish. Go to the dist directory and execute NPM publish. If it is not the first release, modify package.json in the dist directory, modify the version field, and then execute NPM publish.

Here is my demo, you can have a look. durian-ui npm durian-ui

review

A few bits and pieces, so let’s review them;

First, I showed you a general way to create RN projects, but it was so complicated that Expo was just a command.

expo init xxx
Copy the code

Then, we briefly introduced EXPO from three aspects.

• Function, similar to applets, easy access to device functions
• Tools, Client, CLI, Snack, SDK
• Service, free, but with priority service, 29$/m

Next, we created an Expo project that introduced the differences between templates and introduced several common commands for Expo.

expo init xxx
...

cd xxx
expo start
...

expo publish

expo build:ios

expo upload:ios
Copy the code

Finally, the four steps for releasing the NPM package are described. A sample project is provided.