一个新手需要哪些基础知识上手RN开发？

• 开发工具和插件等准备工作
• Git基础
• Javascript 基础
• ES6 基础
• CSS3 基础
• Flex 布局
• React 基础
• Redux、Saga
• React Native 基础
• IOS开发者账号和Xcode使用基础
• Android Studio使用和配置
• API调试
• 翻墙工具
• 拓展学习

准备工作

• 要想有一个效率的开发效果，必然需要一个效率的开发工具，因此开发工具和一些基础的插件已经成为开发者必备的工具，比如前端需要VSCode、WebStorm等，而后端则需要对应不同的语言使用不同的编辑器，比如Go用Goland、Java使用Idea、Php使用PhpStorm等。

• 这里只介绍前端开发的一些基础工具，比如VSCode插件、Google Chrome插件。

• 前端开发工具：

  • VS Code
  • WebStorm

• 由于作者使用的是VS Code，所以也推荐此工具，简洁方便，外加强大的插件功能，让开发效率可以更高，当然玩法也变的更多。

• VS Code 需要哪些主题和基础的插件

  • One Dark Pro ，主题，根据自己喜欢选择即可
  • vscode-leetcode，刷题必备神器
  • Path Intellisense，自动补全路径，在也不用一直输入
  • Document this，js快速注释模版
  • Beautify ，代码格式化
  • React Native Tools，调试、提示
  • ESLint ，语法检查
  • vetur，vue语法高亮
  • Atuo Rename Tag 、Auto Close Tag，自动补全Tag标签，修改时同步，补全闭合标签
  • Git History，图形化查看git历史提交
  • JavaScript (ES6) code snippets，es6语法提示高亮
  • ES7 React/Redux/GraphQL/React-Native snippets，R系列开发必备

• 谷歌Chrome 插件

  • FeHelper，json格式化、网页取色、时间戳等常用工具
  • Adblock Plus、ublock，屏蔽广告必备
  • Momentum ,简洁的新标签页
  • React Developer Tools ， react调试工具
  • Vue.js devtools ，vue调试工具
  • Quick QR ， 二维码生成器
  • 划词翻译
  • postman，调试接口必备
  • wappalyzer ， 查看网页使用的技术

Git基础

• git是什么？
  • 是一个分布式版本控制软件。
• git知识大全指南
• git基础指南
• 廖雪峰,Git教程
• 猴子都能懂的Git基础，进阶

Javascript 基础

• 推荐使用 MDN JS入门教程
  • JavaScript基础

ES6 基础

• 什么是ES6？

  • ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

• 入门文档推荐

  • 阮一峰 ES6 入门教程
  • ES6 入门文档

CSS3 基础

• Css做为页面的重要属性和Html，Js一样，建议先了解Css，然后在学习Css3如何布局、盒子模型、样式层叠等其他属性。
• MDN Css 入门介绍
• CSS3开发文档
• Css/Css3样式参考手册

Flex 布局

• 什么是flex布局？

  • Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
  • 使用Flex布局很大程度上是为了适配不同机型，甚至是这种形式的布局更有效率去开发项目，节省时间。
  • MDN Flex布局基础知识

• flex布局教程指南

  • 阮一峰 Flex 布局教程：语法篇
  • 阮一峰 Flex 布局教程：实例篇

• Css3 Flexbox布局口诀

  • 5张图看懂Flexbox布局

• 延伸阅读

  • 深度解析 CSS Flexbox 布局

React 、Redux 基础

• React 基础

  • 学习是一个循序渐进的过程，推荐先看官方的基础文档，并上手直接写代码，跟着demo走起来，看再多说在多，不如直接做，逼逼那么多根本没用，不是天才就努力实干。对于大多数语言而言，目前大多数官方教程足够让你学会基础，如果不能让新手上手（没有笨的学生，只有教不好的老师），那只能说这是一门失败的语言…
  • 官方文档入门学习React

• 拓展使用第三方教程

  • 全栈公开课，Part 1 部分讲解React入门，当然也推荐从头开始，系统的学习Web开发，也可以直接学习React和Redux部分
  • FullStack–React和Redux基础
  • React 教程–菜鸟教程版
  • 快速入门React基础知识

• Redux、Store、Saga、Reducer基础

  • 数据管理是APP开发的一大难题，因此有很多解决方案供大家使用，比如Redux、Saga、Dva这些，当然也有一些先进的，比如Rematch，或是一些高阶函数、Promise方式，后者是群里听大佬们谈论的，目前还没有实践，不过看了hook这些方式，确实用起来都会省事不少。
  • Redux、Store、Reducer文档
  • Redux-Saga文档和用法

• 拓展使用替代Redux方案，Rematch

  • Rematch是 在 Redux 的基础上构建并减少了样板代码和执行了一些最佳实践，使用rematch可以不用写一堆types、action、store、saga等，写完项目交流的时候发现的，目前我们项目用的还是老一套Redux、Saga、Reducer，写起来type、saga，state等状态是真的痛苦，或许Rematch是更好的选择。
  • Rematch官方文档

React Native 基础

• 有了以上基础，写基础的页面应该不是啥大问题，而对于RN开发，则需要学习对应的文档，了解一些基础的UI组件使用、组件复用、网络请求、flexbox布局、数据存储（AsyncStorage）、loading加载、手机适配、与原生IOS、安卓交互等。

• 往远了说，在一切页面布局开始写的时候，同时应该规划好接口的调用和字段、mock数据格式、数据的持久化、打包的方式、热更新等。

• RN基础之环境安装

  • RN中文网，入门就是教你如何搭建环境，有win版和macos版，基本按着流程走不会出太大的问题，都可以跑起来初始化的项目。
  • React Native开发环境搭建指南
  • 此处可能遇到的问题，如果是iOS，则可能出现CocoaPods版本问题、超时问题、选择master版本问题、更多问题可以看issues,brew 比较慢的问题，基本都是网的问题，推荐使用清华源，brew update无反应,或者直接上代理，并设置git的拉取方式，设置socks5代理端口，此方式同理适用npm、git clone,如何设置git socks5端口。
  • 如果是安装安卓版本，则可能遇到sdk版本问题，java jdk需要1.8（java8）版本，然后安装Android Studio 需翻墙，否则网站都进不去.安卓环境90%都是网络问题，这里翻墙情况下推荐使用电信网络，移动可能卡住不动。
  • 推荐一个稳定的机场,speed

• 组件化和组件复用

  • RN和Flutter差不多，都是一切组件化，因此在开发的时候，则需要组件化，最终拼接一切完成设计稿里的页面样式，组件复用会很大程度上减少耦合，加快开发进度，减少工作时间，规划好组件复用会事半功倍。
  • 一般情况下：列表、交互、loading、toast会复用的比较多，比如一些Button、列表渲染、line、layout、layoutscroll、TouchableOpacity交互等一些常用的组件，应该让他们独立出来复用。

• 数据请求和数据持久化

  • http请求一般使用axios，封装post、get，请求头等参数，根据不同需求使用即可
  • 数据持久化，推荐使用AsyncStorage+reducer，可以安卓、ios同时适配，也是官方的包。

• RN 路由、Bottom

  • 推荐使用React Navigation，功能全，生态完善，版本在持续升级，不过坑的是可能新旧版本语法不一样。
  • 备选：Wix React Navigation,有基础的功能，不过功能不如React Navigation 功能强大，相对的github也不如React Navigation活跃度高。

IOS开发者账号和Xcode使用基础

• Xcode打包IOS之证书签名配置

• iOS 打包发布最新流程

• 注意事项，一般情况下不要升级Xcode，否则会导致项目跑不起来，同理安卓AS也一样，IOS开发者账号可能会遇到签名问题、添加测试机设备、打包AD hoc包等问题。
• 一般情况下添加新的udid之后需要重新配置Profiles,选择已经添加的设备之后，一直下一步，最后通过Xcode导入当前下载的证书，然后重新打包hoc包即可。
• Xcode 模拟器或真机调试时需要开启:automatically manage signing,并选择开发者账号和已经配置的Profiles，然后设置Build Settings 搜索sign，设置debug和release的四个选项为Apple Development,重新打包启动即可。
• 更多ios开发遇到的问题，请查看同时间发布的其他文章，或者加TG咨询我。

Android Studio使用和配置

• 安卓环境基本按照官方文档都可以顺利完成，并跑起来，而更多的坑则是后期开发中需要设置xml配置，gradle配置，引用第三方包需要增加配置等问题。
• 关于安卓开发中遇到的问题，请查看:”RN小技巧记录系列文章”。

API调试

• 接口调试也是前端必备技能，毕竟数据不能只使用假的，而对于调试接口，则需要看后端如何提供稳定，比如java、go、php都有swag在线调试，而对于没有swag的则可以使用postman发请求看接口的情况，当然你也可以直接使用axios去调试。
• 在高端一点，可以使用抓包工具Charles、Fiddler等抓包工具查看返回情况和请求情况。

翻墙工具

• 万恶的GFW，真是难为了国内的广大开发者。
• 推荐使用，有钱可以直接上Surge，要不就选V2ray、Trojan模式
• 客户端推荐使用：ClashX、Shadowrocket、Quantumult X、V2RayX
• 科学上网的方式
  • 自建：推荐使用Vultr，快速注册Vultr获取100美元测试金
• 机场千万家如何选？
  • 不想折腾就买稳定的，否则就白嫖吧，反正不花钱,网上有很多分享ss的不过不是很安全。
  • 注册白嫖版，邀请码过期请评论区留言
  • 注册便宜版V2ray
  • 注册稳定付费版V2ray，支持Clashx

拓展学习

• Typescript基础入门
• 开课吧web全栈架构师第4期, 提取码: az94
• seo魔贝8期, 提取码: qnua

RN相关博客推荐

• 贾鹏辉的技术博客，RN开发部分
• trello上的RN指南和讨论
• RN的一些组件和demo事例
• React和React Native组件库
• React技术揭秘