生态：React Native

生态：React Native

第一类：React Native 快速入门

• React Native Tutorial for Beginners - Build a React Native App (2020)
  尽管资料已有两年，但大部分内容至今仍然适用。视频形式适合新手，能带着一步步操作学习。

• React Native Express
  适合想快速了解 React Native 中各种概念的新手。

• The Complete React Native + Hooks Course
  这是优达学院最受欢迎的 React Native 视频课程，内容详细且完整，适合新手。

第二类：学习 JavaScript

• MDN JavaScript 教程
  MDN 是前端同学必备的网站，内容权威，适合有编程基础的人快速掌握 JavaScript。

• ES6 入门教程
  ES6 对 JavaScript 的发展有划时代意义，本书可以作为入门学习或手册查询使用。

• Learn JavaScript
  结合思维导图边学边练，涵盖 JavaScript 的 13 个主要部分，适合边学习边实践。

第三类：学习 TypeScript

如果你要写业务项目，我推荐使用 TypeScript 而非 JavaScript。TypeScript 的静态类型检查功能可以减少 Bug 并提高可维护性。

• 了不起的 TypeScript 入门教程
  这是掘金最受欢迎的 TypeScript 入门课程，分为十四个知识点带你一步步学习。

• Type Challenges
  结合 TypeScript 官网在线编辑器练习，帮助掌握 TypeScript 的使用。

• React + TypeScript Cheatsheets
  帮助你掌握 React 和 TypeScript 的最佳实践。

第四类：学习 React

对于 React 的学习，我推荐 React 官方教程和文档。

• React 官方教程
  包含初学者到深入学习的内容，配有示例和练习材料，适合不同层次的学习者。

• API Reference
  这是 React 的 API 手册，但目前仅完成了 5%。需要查询 API 时，可以访问 React 老官网。

项目工程

第一部分：脚手架

React Native 项目可以选择以下脚手架：

• react-native init
  React Native 官方提供的基础脚手架。

• Expo
  集成了原生工具和能力，支持 Android、iOS 和 Web，适用于出海应用。

• Ignite
  由美国团队开发，包含包管理、状态管理、自动化测试等技术选型。

第二部分：包管理

常见的包管理工具：

• Yarn
  Meta 团队开发的包管理工具，安装速度和功能强大，推荐使用经典版。

• npm
  Node.js 自带的包管理工具，搭建 React Native 环境时自动安装。

• pnpm
  更快的包管理工具，适用于需要快速安装的场景。

第三部分：状态管理

常见的状态管理工具：

• React 自带：

  • useState
  • useReducer
  • useContext

• 第三方库：

  • Redux + Redux Toolkit
  • Mobx
  • Zustand

• Hooks 工具：

  • react-query
  • SWR
  • react-hook-form
  • formik

• GraphQL：
  提供比 RESTful 更灵活的请求后端接口的方案。

第四部分：自动化测试

常见的自动化测试工具：

• Jest
  Meta 团队开发的 JavaScript 单元测试框架。

• react-native-testing-library
  专门用来测试 React Native 组件。

• Detox
  用于在真机/模拟器上运行测试代码，适合真实环境测试。

样式和组件

样式

• React Native 自带的 StyleSheet
  适合大多数样式需求，简洁高效。

• Styled-Components
  适合喜欢 CSS 语法的开发者。

• Tailwind CSS
  简拼 CSS，减少键盘敲击次数，但性能有所损耗。

组件库

• Native Base
  近两年最活跃的 React Native 组件库，功能强大。

• React Native Elements
  常用的组件库，风格简洁。

• React Native Paper
  Material Design 风格的组件库。

• UI Kitten
  另一种流行的组件库。

路由

• React Navigation
  React Native 最主流的路由库。

• React Native Navigation
  另一个路由库，但下载量远不如 React Navigation。

手势

• react-native-gesture-handler
  社区开发的声明式手势处理库，替代了 React Native 自带的 PanResponder。

动画

• Animated API
  React Native 提供的基础动画 API，适合轻量级动画。

• Reanimated
  社区提供的高性能动画库，适用于大规模动画。

• Lottie
  适合 UI 设计师提供的静态动画。

国内常用组件

• react-native-agora
  声网官方维护的 React Native 组件库，适用于语音、视频和直播。

• hms-react-native-plugin
  华为为 React Native 提供的 HarmonyOS 插件。

• jpush-react-native
  极光推送的 React Native 插件。

• react-native-baidu-map
  基于百度地图 SDK 封装的 React Native 组件，适用于地图相关功能。