React Native 开发之IDE

简介:

个人暂时使用Atom和Nuclide,虽然有些不方便,不过喜欢界面以及安装简单哈哈,之后可能尝试下别的。

译注:React Native官方更推荐使用WebStorm或Sublime Text来编写React Native应用。

1. Atom和Nuclide

1) Atom编辑器

Atom是一个开源版本的编辑器,有着非常强大以及完美的体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。

Atom.png

2) Nuclide插件

Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档

直接打开Atom软件,点击Atom->Preferences打开Setting,然后点击install,输入nuclide-installer 搜索,进行下载即可,如下图:

Nuclide插件.jpeg



2. WebStorm

相信做过Web前端的童鞋们,肯定对WebStorm IDE非常的熟悉WebStorm 是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

该新版本已经支持了React了,所以在现如今的开发阶段WebStrom已经算是支持性最好的IDE了,不过该是收费的,土豪忽略,至于破解版本看大家的了。

WebStorm.png

WebStorm.png界面.png


看到有文章写了个破解方法(未尝试过):

安装完webStorm之后,激活界面选择第二个License server,下面输入框输入http://idea.lanyus.com, 确定即可

3. Sublime Text

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

Sublime Text.png



4. VSCode(正在尝试,感觉自动补全比较好用)

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……

Visual Studio Code.png

该扩展工具(React Native Tools)给React Native项目提供了一个开发环境。你可以调试你的代码、通过命令面板终端快速的运行react-native命令、并且支持代码智能补全,对象搜索浏览、方法、参数以及其他一些React Native API。

安装React Native Tools:

1)调出扩展窗口

方式一:按f1,搜索ext,调出扩展窗口

调出扩展窗口@2x.png

方式二:若左侧工具栏有扩展图标,直接点击进行扩展图标调出扩展窗口

2)搜索并安装React Native Tools插件,install后要enable:

QQ20160805-0@2x.png

3)重启编辑器完成。

调试(Debugging)

1.安装调试环境(Setup debug environment)

在菜单中点击调试图标 ,然后点击configure齿轮样子的"设置"图标,选择React Native(调试环境设置)。

VSCode会生成一个launch.json文件保存在项目,同时里面会有一些默认的数据配置,如下图所示:

调试.png

上面的配置文件你可以修改这些配置信息,或者往列表中添加新的项。你也可以在这些配置信息中使用其他属性。

例如:你可以修改target属性来指定iOS调试的模拟器

2.开启调试(Start debug session)

为了开始调试,通过配置下拉框选择一个调试项,然后点击运行箭头或者F5按键.

你可以调试Android模拟器,Android设备或者iOS模拟器中的应用,当前插件提供iOS设备的支持。有关使用VS Code进行调试的更多详细信息请点击查看

3.使用iOS设备调试(Debugging on iOS Device)

采用iOS设备调试需要完成以下一些常规步骤:

①.在APP中改变jsCodeLocation IP,更多详细的步骤请点击查看

②.从调试配置下拉框选择Debug iOS并且按F5按键

③.摇一摇设备,打开开发者菜单,并且选择"Debug in Chrome"




作者:朱源浩
来源:51CTO
目录
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
3月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
30 0
|
10天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
13天前
|
IDE 测试技术 项目管理
集成开发环境(IDE)的使用:提升Visual Basic开发效率的工具和技巧
【4月更文挑战第27天】本文探讨了如何使用Visual Basic IDE提升开发效率,包括理解IDE组件、利用代码编辑器的智能功能、通过界面设计器设计GUI、使用调试和测试工具、有效管理项目与版本控制、掌握快捷键和宏、定制IDE以及利用学习资源。通过充分利用这些工具和技巧,开发者能更快地编写高质量代码,高效管理项目,从而提升整体开发效率。随着IDE的持续发展,开发者应不断学习新特性以适应进步。
|
4天前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
13天前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
17天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
22 0
|
19天前
|
前端开发 API 开发者
React这些新特性在开发效率上有哪些改进
【4月更文挑战第18天】React 18 提升开发效率,引入新Root API `createRoot`优化挂载,支持渐进式升级,减少迁移成本。新增性能工具如Profiler API和Concurrent Mode,自动化批处理提高性能,减少重渲染。服务器组件优化加载速度,减轻客户端负担。开发者可更高效构建和优化React应用。
73 6
|
28天前
|
JavaScript 前端开发 API
Vue和React,哪个在移动端开发更适合呢
【4月更文挑战第10天】Vue和React在移动端各有优势。Vue以其简单易用、渐进式开发和性能优化吸引开发者,适合初学者和快速迭代项目。而React凭借强大的生态系统、组件化开发模式和卓越性能,尤其在复杂应用和依赖特定库时更具优势。选择应基于项目需求、团队技术栈及性能要求,可先进行技术调研和原型开发。
22 4