ReactNative开发工具有这一篇足矣

 ReactNative系列文章:

1.《逻辑性最强的React Native环境搭建与调试》

2.《ReactNative开发工具有这一篇足矣》

正文

React Native(以下简称RN)开发工具的文章很多,几乎千篇一律都是Copy的(一毛一样),本文结合自己的实践经历,推荐给Coder最实用的RN开发工具,RN开发工具用这一篇足矣!

概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm、Sublime Text 3、VS Code等。

面对这些IDE我们应该怎么选择的呢?先说不推荐IDE排行榜

Top1:Nuclide虽然是Facebook专门为React开发的,但依托于Atom的Nuclide真是慢的出奇,性能低到无法让人忍受,如果你觉得自己是一个好性子,不妨验证一番。

Top2:WebStorm这个工具对于我来说是非常熟悉的IDE从几年前开始开发NodeJs一来一直使用的此IDE,他的缺点是慢、卡、容易崩溃,而且是收费的,虽然可以破解但对于没有用过的人来说,门槛也不低,但重要的是它的不稳定性崩溃和加载启动的速度着实让人不满意。

说完了不推荐使用的IDE,下来说说咱们的重点推荐IDE排行榜

Top 2:Sublime Text 3启动和关闭的速度简直快的像打开text文本一般,当装完插件之后也好用的可以上天,下面说说具体的使用以及插件安装和优化。

1.下载地址:http://www.sublimetext.com/3

2.安装Package Control

Win系统可以使用“Ctrl+`”快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

3.安装需要用到的插件

打开Sublime Text3 ,Win系统可以使用快捷键CTRL+SHIFT+P 打开或者,点击菜单栏的“Preferences”-->"Package Control"

打开的终端窗口,输入“install”,下方就会提示“Package Control:install package”,用鼠标点击,后输入要安装的插件:

  •  ReactJS:支持React开发,代码提示,高亮显示
  •  Emmet:前端开发必备
  •  Terminal:在sublime中打开终端并定位到当前目录
  •  react-native-snippets:react native 的代码片段
  •  JsFormat:格式化js代码

其中要单独设置的是JsFormat可以设置为保存时自动格式化,设置如下:打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码:

{
"e4x": true,
// jsformat options
"format_on_save": true,
}

效果如图:

Top 1:VS Code

1.下载地址https://code.visualstudio.com/Download

2.添加RN开发插件

  •  React Native Tools:微软官方出的ReactNative插件,非常好用
  •  Reactjs code snippets:react的代码提示,如componentWillMount方法可以通过cwm直接获得
  •  Auto Close Tag:自动闭合标签
  •  Auto Rename Tag:自动重命名标签,配合上面的插件使用,基本上能赶上IntelliJ IDEA系的功能了
  •  Path Intellisense:文件路径提示补全

3.常用快捷键&设置

Shift + Alt + F:格式化代码

Ctrl + Space:代码提示,与输入快捷键冲突所有使用不了,可根据自己喜爱自行设置,设置:文件 => 首选项 => 键盘快捷方式 => 搜索“space”=>修改为自己的快捷键,如图:

 

4.配置VSCode调试ReactNative,摆脱手动输入命令运行RN项目的苦恼

  a).安装“React Native Tools”插件;

  b).点击调试 => 增加配置 => 选择“React Native:Debug Android” => 插入代码报错,如图:

保存,点击调试按钮,即可运行调试RN项目;

 

如果觉得有用,请点击“推荐”按钮,谢谢!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547097.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【K8S】Docker向私有仓库拉取/推送镜像报错(http: server gave HTTP response to HTTPS client)

这里,我们搭建的Harbor仓库的地址为 http://192.168.175.101:1180。 报错信息如下所示。 [rootbinghe101 ~]# docker login 192.168.175.101:1180 Username: binghe Password: Error response from daemon: Get https://192.168.175.101:1180/v2/: http: server …

MFC串口通信串口指示灯的实现

前一段做了个串口通信小软件,当打开串口时串口指示灯亮,关闭串口时串口指示灯灭,实现方法如下: 1.在资源视图中,添加两个图标,分别为串口指示灯灭IDI_ICON1,串口指示灯亮IDI_ICON2。 2.在串口通…

07-Windows Server 2012 R2 会话远程桌面-标准部署-RD授权

Windows Server 2012 R2 会话远程桌面-标准部署-RD授权马博峰当完成所有的部署后,在实际操作中没有任何问题,并完成所有的测试,在所有工作的最后一步就是需要安装RD授权服务器,远程桌面授权(RD 授权)以前称…

解决React Native unable to load script from assets index.android.bundle on windows

React Native运行的时候,经常碰到React Native unable to load script from assets index.android.bundle on windows解决方法有2种: 方法一:设置IP和端口 具体步骤:报错页面晃动手机,显示菜单 》 点击Dev Settings …

CentOS 安装go client调用Kubernetes API

CentOS 安装 Go环境并配置goproxy wget https://dl.google.com/go/go1.14.4.linux-amd64.tar.gz tar -xzvf go1.14.4.linux-amd64.tar.gz -C /usr/local/ mkdir -p /home/gopath cat >> /etc/profile <<EOF export GOROOT/usr/local/go export GOPATH/home/gopath…

VS2010中使用sprintf出现warning C4997: 'sprintf': This function or variable may be unsafe.

使用VS2010编译时。会出现以下警告。 warning C4997: sprintf: This function or variable may be unsafe. Consider using sprintf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. c:\program files (x86)\microsoft visual …

list使用

1、将两个list合并成一个list&#xff0c;可以用addAll()方法。2、一个list1嵌套list&#xff0c;可以list<bean> listnew ArrayList<bean>();ArrayList<list> list1new ArrayList<list>();lst1.add(list);转载于:https://blog.51cto.com/7533390/1341…

React Native App设置amp;Android版发布

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 一、设置APP信息 1.设置包名…

Kubernetes 1.20 报错:“open /run/flannel/subnet.env: no such file or directory“

pod 一直处于 ContainerCreating&#xff0c;查看 pod 详情&#xff1a; kubectl describe pod [pod name]提示错误信息&#xff1a; ... NetworkPlugin cni failed to set up pod "mysql-mb6t7_default" network: open /run/flannel/subnet.env: no such file or …

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 《史上最易懂——ReactN…

tomcat 系统服务 outofmemory

TOMCAT内存溢出outofmemory的问题&#xff1a; http://hi.baidu.com/mefeng47/item/3b247af74ce4e24e922af2e5 注&#xff1a;双击tomcat6w.exe打开tomcat monitor 1.OutOfMemoryError: Java heap space 堆溢出 VM参数&#xff1a;-Xms256m -Xmx512m 2.OutOfMemoryError: PermG…

Jeston TX2安装Ubuntu系统

准备材料&#xff1a;一台装有Ubuntu系统的电脑&#xff0c;联网的路由器&#xff0c;网线&#xff08;这里用了两根&#xff09;&#xff0c;一根普通安卓手机充电线 我的电脑系统是Ubuntu16.04&#xff0c;尝试了在Ubuntu18.01上面运行下面的命令&#xff0c;不能运行&#x…

VS2010 error C299: “Font”:“struct”类型重定义

在VS2010里添加了在VC6.0里形成的OFFICE库文件的类 excel9.h,excel9.cpp&#xff0c;就是我在VC6里做操作OFFICE的表格时候添加的库文件&#xff0c;然后把它们&#xff08; excel9.h,excel9.cpp&#xff09;加载VS2010里&#xff0c;然后就报很多的错误。下面的错误只是一部分…

ReactNative环境搭建扩展篇——安装后报错解决方案

之前一篇写了《逻辑性最强的React Native环境搭建与调试》说了RN的安装&#xff0c;今天在这里做一个复盘&#xff0c;让我们能够更直观更深入的了解React Native&#xff08;以下简称RN&#xff09;,这一篇重点来说的就是&#xff0c;安装之后必报的2个错误的解决方案。 更新…

TensorFlow实战——深度学习训练个性化推荐系统

请安装TensorFlow1.0&#xff0c;Python3.5 项目地址&#xff1a;GitHub - xiaobingchan/movie_recommender: MovieLens based recommender system.使用MovieLens数据集训练的电影推荐系统。 前言 本项目使用文本卷积神经网络&#xff0c;并使用MovieLens数据集完成电影推荐的…

Ubuntu开发环境配置--- 安装chrome浏览器

Ubuntu开发环境配置--- 安装chrome浏览器 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#xff1a;https://blog.csdn.net/idomyway/article/details/81986062 前言 Ubantu中自带了…

java中的匿名内部类总结

匿名内部类也就是没有名字的内部类正因为没有名字&#xff0c;所以匿名内部类只能使用一次&#xff0c;它通常用来简化代码编写但使用匿名内部类还有个前提条件&#xff1a;必须继承一个父类或实现一个接口实例1:不使用匿名内部类来实现抽象方法12345678910111213141516abstrac…

Xamarin使用ListView开启分组视图Cell数据展示bug处理

问题描述 Xamarin使用IsGroupingEnabled"true"之后再Cell操作就会出现数据展示bug&#xff0c;数据不刷新的问题&#xff0c;如下图所示&#xff1a; 点击取消的是其他钢厂&#xff0c;但ViewCell展示的一直是“长峰”&#xff0c;这就分组试图一个比较常见的bug。 …

YOLOv3实现鱼类目标检测

YOLOv3实现鱼类目标检测 我将以一个项目实例&#xff0c;记录如何用YOLOv3训练自己的数据集。 在开始之前&#xff0c;首先了解一下YOLO系列代表性的DarkNet网络。 如下图所示&#xff0c;是YOLOv3中使用的DarkNet-53的结构&#xff0c;几种核心结构是&#xff1a; DBL: 是…

Xamarin截取/删除emoji表情bug解决方案

大家都知道&#xff0c;一个英文1字节&#xff0c;一个汉字2字节&#xff0c;而一个emoji表情4个字节&#xff0c;在有这三种混用的时候&#xff0c;比如app聊天界面&#xff0c;那么删除和截取便成了很头痛的事情。 问题描述 截取导致乱码&#xff0c;如下图&#xff1a; 解…