React Native-入门篇02:Node.js和开发环境配置

搞开发这么久了,都一直没有总结过Node.js相关内容,既然React Native的开发环境配置需要Node.js基础框架, 那就总结一下。


Node.js与npm

其实在iOS开发中,我们经常遇到说安装npm,但可能猛地解释不出来这到底是个什么东西。

关于Node.js

Node.js是一个基于Chorme V8引擎的JavaScript运行环境。
简单来说,Node.js就是一个JavaScript运行时,底层是Chorme V8引擎,并在此基础上进行了封装。

Node.js架构图

经上图可以看出,Node.js底层使用C/C++,最上层提供了JavaScript类库,也就是开发时接触到的应用层。

关于npm

npm是Node.js的包生态系统,是最大的开源生态系统。(也可以理解为是npm就是一个功能类库, 里面是各种各样开源的包和框架)

本质上,React也是npm包中的一个,React Native也是npm包之一。

React Native开发环境配置

安装前先查一下电脑的环境,看看是否已经配置了node和npm:

  • 安装Node.js

Node.js下载官网: https://nodejs.org/en/download/ 推荐下载LTS版本,框架整体的变更不频繁, 稳定且好用。

安装完成后,再次查看下node和npm的安装情况:

  • 安装React Native

在安装React Native之前,先安装监控文件变更的组件watchman,以便后期项目打包更新时提高性能。

watchman的安装推荐使用brew install watchman, 所以要先确保系统安装Homebrew

如果没有安装过可查看之前写过的这篇文章:【iOS开发】 2020最新安装CocoaPods -- 快速安装Homebrew, 升级Ruby版本

在安装的过程中,可能会出现错误, 比如:Error: Failed to download resource "python@3.9"

image.png

可能是因为网速,来回多下载几次,或者搭个梯子,就可以把python/3.9这个包下载下来了。

Homebrew 安装 watchman 成功
  • 安装react-native-cli

在npm下安装一个包的命令格式为:npm install + 包的名称,如果加上参数g, npm install -g + 包的名称就是全局安装

react-native作为npm的一个包,我们可以直接用npm命令执行安装React Natice CLI命令行工具:

npm install -g react-native-cli

安装过程中如果出现错误, 看是否是权限问题,可尝试

sudo npm install -g react-native-cli

这里有个额外的知识点:

Yarn

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

  • 下载Visual Studio Code

Visual Studio Code官方下载地址:https://code.visualstudio.com/docs/?dv=osx

但是下载超级慢,在某乎上看到个方法:

打开浏览器下载项,找到下载的这个文件, 右键拷贝地址:https://az764295.vo.msecnd.net/stable/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/VSCode-darwin.zip
az764295.vo.msecnd.net 替换为vscode.cdn.azure.cn,即https://vscode.cdn.azure.cn/stable/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/VSCode-darwin.zip

再去下载,速度飞快!!!亲测有效!!!


以上,React Native使用的前置条件就完成了, 接下来就可以开始创建应用了~

下篇见。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • -------------如果你使用的是Mac OS系统,请参照以下步骤----------- 安装前注意: 1)...
    Lucky丶晴阅读 555评论 0 3
  • 日常唠嗑:基于windows下搭建,之前一直想写篇关于配置环境的文章,毕竟react-native这块坑太多了,一...
    roar_挖掘工阅读 486评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,454评论 16 22
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,534评论 0 11
  • 在妖界我有个名头叫胡百晓,无论是何事,只要找到胡百晓即可有解决的办法。因为是只狐狸大家以讹传讹叫我“倾城百晓”,...
    猫九0110阅读 3,247评论 7 3