As an iOS developer, I started to learn React Native on and off about a year ago. Recently, DUE to work requirements, I have been learning React Native full-time for over a month. There are a lot of knowledge resources on the Internet, but only a few can make people suddenly understand and learn quickly. The articles I have compiled are good for beginners. I hope that by sorting out my learning route, I can provide some help to friends who are also iOS developers who want to learn React Native.

Since it is written for iOS developers, I assume that you already have the basic knowledge of iOS native app development, so I will not explain the relevant content of iOS native app development.

React Native

Noun explanation

Let’s start with a few key words:

  • React
  • Native
  • React Native

These three words don’t really have much to do with each other, so let’s take them one by one:

  • React: A development framework in the Web front-end field is very popular in recent years. The core idea is to componentize the view and render the component by updating the state of the component.
  • Native: This word is very literal, it means Native. A few years ago there was a very popular cross-platform development framework PhoneGap (now called Cordova) that wasn’t native. Native development is done using platform-specific languages and frameworks, such as iOS apps developed using Objective-C or Swift.
  • React Native: Combining these two words, we can conclude simply: Use the React framework for native-style development.

Realize the principle of

We all know that On iOS, Apple provides a JavaScriptCore framework that can parse JavaScript language. React Native is defined by multiple encapsulation. The end result is classes and methods that call Objective-C in the JavaScript language. We don’t have to go into the details of this right now, but we’ll get to that later in the course.

So since you call objective-C classes and methods, the performance is certainly not bad (but not perfect), so React Native has an advantage over other cross-platform development methods.

evaluation

  • Cross-platform: React Native officially supports iOS and Android mobile devices. There are also some popular adaptations for macOS, tvOS, and even UWP. However, due to the different features of different platforms, one code cannot be directly run on all platforms. The idea of React Native is to “Learn once, write anywhere”. We need to write different codes according to the characteristics of different platforms, and try to maintain high reusability of components.
  • Performance: The official claim is that the performance is comparable to Native. In practice, we will find several problems, such as too many layers of views rendered by complex views, ListView (equivalent to UITableView on iOS) has no reuse mechanism, and some components have memory leaks. This can lead to poor performance on some low-end Android models, with complex, large applications having significant performance issues.
  • Hot update: Due to the efficiency of App Store release iteration, hot update has become a highly desired feature of iOS platform. Fortunately, React Native has excellent hot update capability. By deploying JavaScript code to the server, the entire interface can be reloaded during running.
  • Learning cost: For iOS developers, a fair amount of Web front-end development knowledge is required to develop, while for Web front-end developers, native performance tuning requires native development knowledge and experience, so the learning cost is slightly higher.
  • Development efficiency: Android and iOS platforms can reuse many components, only part of the code needs to be maintained separately, so it is much more efficient than developing native apps for both platforms. Add to that the ability to dynamically render, Command⌘+R allows to re-render the interface without having to recompile, and the development efficiency is surprisingly fast.

Learning path

Just follow the sequence.

Development Environment Configuration

If you do not have Homebrew, Node.js, WatchMan and other tools installed on your computer, please refer to:

If you have Homebrew, Node.js, or WatchMan installed, go to:

  • React Native Chinese

For IDE/Editor options, Sublime Text, VSCode, WebStorm, Atom+Nuclide, and Deco are currently available. I personally recommend VSCode and WebStorm. Here are two articles about IDE setup.

  • WebStorm – WebStorm developer tools for Setting React Native intelligence tips – CSDN
  • VSCode – VSCode IDE super development plug-in introduction – Jiang Qingqing’s technical column

JavaScript

The first is a basic JavaScript tutorial that you can quickly walk through.

  • JavaScript Advanced Tutorial – W3School
  • No more hesitation: Fully understand JavaScript’s this – Segmentfault

ES6

ES6, also known as ES2015, is a relatively new standard for JavaScipt language. We recommend using this standard when developing React Native.

  • ECMAScript 2015 Easy Tutorial – Yan Haijing
  • Getting Started with ECMAScript 6 – Nguyen Yifeng
  • About Promise: 6 Things you May not know – DWQS/Blog

Grammar specification

JavaScript itself changes rapidly, and this syntax maintained by Airbnb is widely used and comprehensive, which is of great reference value.

  • Airbnb React/JSX Style Guide

React Native

Quick start

  • React Native Chinese

Since there will be open source projects and components developed using the ES5 standard, you should be able to read ES5 code.

  • React Native ES5 /React Native ES6

layout

  • Layout FlexBox Layout – Jane book

component

  • React-Native from Beginner to Deep – Component Life Cycle – Simple book
  • React Native Navigator uses Mystra
  • The React-native component is a detailed listview-simple book
  • Learn more about components: React Native – Qingqing Jiang’s technology column

React with Redux

  • Redux tutorial – GitHub
  • Redux state management method and instance – Segmentfault
  • Redux and Command mode – Jimmylv
  • Redux 中文文档 – Redux
  • React + Redux componentization solution – IMWeb
  • React-Native with Redux – Lifecycle

Hot update

  • CodePush Hot Update Process (iOS) – Talisk’s Wiki
  • React Native Hot Update Deployment/Hot Update -CodePush’s latest integration summary – Brief book

The principle of

  • React Native – Bang’s Blog

Recommended resources

  • awesome-react-native – GitHub
  • React Native Chinese
  • Jiang Qingqing’s technology column