A video dubbing app developed based on RN (open source)

In today's react, Ng, vue three sub-world pattern, have to let themselves accelerate the pace of learning. Although often fall into a variety of confusion, learn more will find that things are infinitely magnified, but can use the new technology to make some small projects small demo or will give themselves a little confidence and then the motivation to learn.

Project Part Show

Project Source Address

Project Introduction

1. App back-end build:

• Use the Nodejs koa framework to complete the app backend setup;
• Using the mongodb complete data storage, through the mongoose module to complete the construction of the mongodb data;

2. App front-end setup:

• RNrapid Development using component-type architecture and JS class library
• Using Flexbox Layout method
• No background Mock数据 to do local JSON interface, to achieve front-end separation development

3. Some function modules:

• Start the implementation of the interface Carousel effect;
• Log in by SMS verification code;
• Video upload and mute processing;
• The upload of audio;
• Integration of video and audio;
• update of user data;
• Comment Module
• Likes module

Component life cycle of react

The most important person in Rn is the realization of the interface, some people think it is the encapsulation of the event, some people think it is the management of the interaction State and data re-rendering, and some people say that it is the coupling and interface between components, after a project has been done, I think the most important thing in Rn is the life cycle of the component.

React's main idea is to build reusable components to build user interfaces. In react everything is a component. Each component has its own life cycle, which specifies the state and method of the component at which stage it is executed. A life cycle diagram of Rn is attached below:

Component first stage: initialization, rendering and loading complete;

Component Phase II: State ① When component is running: state change causes component updates and re-renders to update completion

②: Parent Component Property changes raise component updates (means of passing data and synchronizing state between common components): for example, the parent component is logged on, and the subcomponent needs to be logged in

Component Phase III: Uninstalling components

If you want to learn more about the relevant knowledge points, Anli Scott's RN course, you can also talk with me.

A video dubbing app developed based on RN (open source)