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