Learning is like running. If you want to run a long distance, you can’t run too fast.

background

During this period, I learned some front-end knowledge and wrote a simple news client Demo with React Native.

React Native and React Native development have their own strengths, but I won’t go into details. The only drawback is that React Native and React Native communication processes are less friendly.

Here I would like to share the knowledge points and learning materials that I think are more important in the learning process. This article is written as light as possible, hoping to be helpful to readers.

Preliminary knowledge

Some people with front-end experience learn React Native just like an old horse learning how to React. Everything is the same and they can’t play any tricks by changing things.

HTML5: H5 elements are used in the same way as React Native components.

CSS: React Native’s FlexBox is used for component layouts, and is the cousin of CSS.

JavaScript: Write in JavaScript. JavaScript is to React Native what bricks are to skyscrapers.

React JSX: React uses JSX instead of regular JavaScript. JSX is a JavaScript syntax extension that looks a lot like XML.

1. Learn React Native

The React Native community is relatively mature, and the Content of the Chinese website is comprehensive, from the beginning to the advanced, environment installation to the user guide. Learn the React Native recommendation website from reactnative. Check out the layout, components, and API suggestions on the React Native website. Note that you can switch to the historical version of React Native at the top of the page.

1.1 Installing the Development Environment

  1. The React Native website recommends setting up development environment guide portals. (Remember to setApp Transport Security SettingsTo allow HTTP requests.
  2. A Native project has been built to integrate React Native into an existing Native project portal
  3. Based on # 2, how do React Native and React Native communicate with each other
  4. In IDE choice, don’t worry too much, personal use of WebStorm, it is easier.

1.2 Life Cycle

Class Clock extends React.Component {// The constructor usually performs some initialization operations such as defining an initial value for state constructor(props) {super(props); } // The component is mountedcomponentDidMount() {} // The component will be uninstalledcomponentWillUnmount() {} // render functionrender() {
    return( <View></View> ); }}Copy the code

1.3 the Props and the State

All data for a component comes from Props and State, and distribution is the properties passed in externally and the internal State.

Props is used by a parent component to pass data to a child component. It cannot be changed after being passed from an external component. Multiple properties can be passed at the same time.

// The parent component passes a property name to the child component <Greeting name='xietao3'Name <Text>Hello {this.props. Name}! </Text>Copy the code

State: Controls the internal State of the component. Each change will re-render the component.

// Initialize state constructor(props) {super(props); this.state = { showText:'hello xietao3'}; } // use staterender() {// Display content based on the current value of showTextreturn( <Text>{this.state.showText}</Text> ); } // Change the state of the render function, rerender the page this.setState({showText:'hello world'});
Copy the code

For example (skip it if you understand) :

We use two types of data to control a component: props and state. Props is specified in the parent component, and once specified, it does not change during the life of the specified component. For data that needs to change, we need to use state.

In general, you need to initialize state in Constructor and then call the setState method when you need to modify it.

Let’s say we need to make a text that flashes all the time. The literal content itself is already specified when the component is created, so the literal content should be a prop. The show or hide state of the text (a quick show or hide toggle creates a flicker effect) changes over time, so it should be written to state.

1.4 Components and apis

When it comes to components, we have to say the componentization thought of React Native. Nicholas Zhao si once said that combination is due to inheritance. Simply put, it is multilevel encapsulation nested and combined use to improve the reuse rate of basic components.

How do components work?

Teaching people to fish is better than teaching people to fish, click here to open the official documentation, in the left navigation bar to find the component you want to use and click, there is a detailed description of how to use the component and its properties.

About API

It is recommended to browse through all the apis before writing the first Demo. It is not necessary to know how to use them, but it is important to know what functions they provide, which may be used in future development. A list of apis can also be found in the left navigation on the official website.

2. React Native took off

The following are not recommended in the first Demo:

2.1 Redux

Redux is a JavaScript state container that provides predictable state management.

Some recommended tutorials:

  • Ruan Yifeng – Redux introduction tutorial (1) : Basic usage

  • Ruan Yinfeng – Redux Introductory Tutorial (II) : Middleware and Asynchronous operations

  • [Ruan Yf-Feng] — React-redux

2.2 CodePush

The React Native thermal update engine goes through a lot of loops when it’s plugged in, but it’s pretty easy to plug in later. CodePush can also build its own server for hot updates, in addition to using services provided by Microsoft.

Recommended tutorials:

  • CodePush access official documentation
  • React Native is a hot update for Microsoft
  • The react – native – code – a push into the order

3. Communicate with the native terminal

3.1 Use Native UI components in React Native

Fill in the pit:

  • Native Manager files prefixed with RCT should not be referenced in RN.
  • The native UI component’s RCTBubblingEventBlock property name must start with on, such as onChange.

React Native (since RN calls Native are asynchronous, it is best to use advice to send messages to specific classes in callbacks)

3.3 Sending message notifications to React Native (It is recommended to write a class method in the Manager, so that external users can flexibly send notifications)

Here is actually a Demo, but not sorted out 🤦️.

React Native Advanced resources

Sometimes I see a lot of interesting things all of a sudden, which is easy to distract my attention. It is recommended not to think too much before reaching a certain level. It is enough to start by looking at the official website. Once you’ve mastered that knowledge, you can expand your knowledge base.

  • Awesome-react-native 19000+⭐️ (includes popular articles, information, third-party libraries, tools, learning books and videos, etc.)
  • React-native Guide 11900+⭐️ (Chinese React-Native Learning Resources, Open-source Apps and Components)
  • Js. coach (third-party library search platform)
  • Some open source projects collected by individuals (reading thousands of books is not as good as traveling thousands of miles, traveling thousands of miles is not as good as reading countless code! Always look at other people’s code, there’s always something new to learn)

React Native first small Demo

5.1 MonkeyNews profile

MonkeyNews, pure React Native news client, partly reference Zhihu Daily, and use part of its interface, because it is a practice project, only for reference, here attached GitHub address, interested can learn about (star).

5.2 Third-party Libraries used:

  • React -native code-push: React native hot update
  • React-native swiper: used for rote graphs
  • React-navigation: TabBar + NavigationBar

5.3 Project Structure

Common

MKSwiper.js

MKNewsListItem.js

MKImage.js

MKPlaceholderView.js

MKThemeListItem.js

MKLoadingView.js

…

Config

MKConstants.js

Pages

Home

MKHomePage.js

MKNewsDetailPage.js

Category

MKCategoryPage.js

MKThemeDetailPage.js

UserCenter

MKUserCenterPage.js

Services

MKServices.js

APIConstants.js

Styles

commonStyles.js

Six, summarized

After getting to know React Native, I feel that the current situation of React Native is difficult to replace Native development, at least not at the present stage.

Disadvantages in my opinion: The advantages of dual-terminal running React Native are not obvious. Many Native apis are cumbersome to use, which largely offsets the improvement of development efficiency brought by dual-terminal running. In this case, I would even prefer to write a set for both Native iOS and Android.

Advantages: React Native and React Native are used in combination. Dynamically switch between the React Native page and the React Native page through dynamic routing, and switch to the React Native page when bugs occur on the Native page. React Native is a great way to develop simple pages.

React Native also has a lot to offer.