React Native Concept Introduction noun explanation
First, several key words are listed:
- React
- Native
- React Native
These three words do not really have much to do with it, and we explain it individually:
- React: In recent years, the Web front-end field is a very hot development framework react.js, the core idea is to component the view, by updating the state of the component to render the component.
- Native: This word is literally enough to refer to the native. There was a very hot cross-platform development framework in the last few years-PhoneGap (now known as Cordova), which is not a native development approach. Native will be developed using the specific language and framework of the corresponding platform, such as iOS apps developed using Objective-c or Swift.
- React Native: Combined with these two words, we can simply get the conclusion that the native-style development is done using the REACT framework.
Implementation principle
As we all know, on the iOS platform, Apple provides a javascriptcore framework that can be used to parse the JavaScript language, React native is defined by multiple wrappers, Finally, classes and methods that call Objective-c in the JavaScript language are implemented. We do not have to delve into the specific principles, which will be mentioned later in the learning route.
So since it's called Objective-c's class and method, the performance is certainly not bad (but not perfect), so this is also react native compared to other cross-platform development way of a big advantage.
Evaluation
- Cross-platform: currently react native has supported mobile devices on iOS and Android two platforms, and there are also some people who are doing the adaptation of MacOS, TvOS, and even the UWP platform. But due to different platform features, and can not be a code on all platforms directly run, React native idea is "learn once, write anywhere", we need to target different platform features to write different code, as far as possible to maintain the high reusability of components.
- Performance: Official claims that performance is comparable to native, in practice we will find a few problems, such as complex view rendering too many view levels, the ListView (equivalent to iOS UITableView) No reuse mechanism, some components have memory leaks. This results in poor performance on some low-end Android models, with significant performance issues for complex, large-scale applications.
- Hot update: Because of the App Store's iteration efficiency issue, hot update is a very desirable feature of the iOS platform, and the good news is that react native's hot update capability is great, by deploying JavaScript code to the server, You can re-reload the entire interface during the run.
- Learning costs: For iOS developers, to understand the amount of Web front-end development knowledge can be developed, for web front-end developers, for native performance tuning requires native development knowledge and experience, so the learning cost is slightly higher.
- Development efficiency: Android and iOS platforms can be reused for many components, and only part of the code needs to be maintained separately on the respective platform, so it is much more efficient than developing native applications for two of platforms. Coupled with the ability to dynamically render itself, without recompiling, Command?+r can re-render the interface, the development efficiency is surprisingly fast.
Learning Route
Follow the sequence to learn.
Development environment Configuration
If your computer does not have tools such as homebrew, node. js, and Watchman, please refer to:
- Configuring the development environment for react native-CSDN
If you have installed homebrew, node. js, WatchMan, directly:
- Building development environment-react native Chinese network
For the choice of ide/editor, there can be sublime Text, Vscode, Webstorm, atom+nuclide, deco selection. My personal recommendation is Vscode and Webstorm. Two settings for the IDE are provided below.
- Webstorm-webstorm development tools Settings react native Smart Tips-CSDN
- Vscode-vscode IDE Super Development Plugin Introduction-Jiang Qing's technical column
Javascript
The first is the most basic JavaScript tutorial, quickly over and over.
- JavaScript Advanced Tutorial-W3school
- No more hesitation: fully understand this in JavaScript (summary)-Segmentfault
ES6
ES6, also known as ES2015, is a relatively new standard for Javascipt languages, which we recommend when developing react native.
- ECMAScript 2015 Easy Tutorial-Yehai
- ECMAScript 6 Getting Started-Nanyi
- About promise: 6 things you may not know about-dwqs/blog
Syntax specification
JavaScript itself is changing quickly, and the syntax specification maintained by Airbnb is widely used, comprehensive, and very reference.
- Airbnb REACT/JSX Style Guide
React Native
Quick Start
- Quick Start example-react native Chinese web
Since some open source projects and open source components are developed using the ES5 standard, you should be able to understand the ES5 code.
React/react Native ES5 ES6 Writing table-React Native Chinese web
Layout
- Layout Flexbox Layout-Pinterest
Component
- React-native from getting started to in-depth – component life cycle – Pinterest
- React Native How to use Navigator components-Mystra
- React-native component Usage detailed listview-Pinterest
- For more component learning, please refer to: React Native Special topic-Technical column of Jiang Qing
React with Redux
- Redux Concise Tutorial-GitHub
- Redux state management methods and examples-Segmentfault
- "Translated" Redux and Command mode-JIMMYLV
- Redux Chinese Document-Redux
- React + Redux Modular 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 Latest Integration summary-Pinterest
Principle
- React Native communication mechanism-bang ' s blog
Recommended Resources
- Awesome-react-native-github
- React Native Chinese web
- The technical column of Jiang Qingqing
Finally, attach the original link:
- Talisk Tech Blog] (http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/)
IOS React Native Learning route (RPM)
