首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我是这样在 React 中实践 TDD 编程的

在Redux中编写测试听起来肯定有悖直觉。如果你使用了Redux,它可能看起来更加复杂。 然而,在添加功能之前编写测试有助于编写更好的代码,因为你预先考虑了将使用的设计模式、体系结构和变量的名称。...编写测试 这是最有趣的部分。让我们开始TDD。 首先,让我们创建并配置存储。在src目录中,创建一个名为index.js的新目录。在这个文件中,初始化存储。...Redux reducer逻辑和动作的集合,通常定义在单个文件中。...在slice目录中,创建一个名为user.js的文件。...结论 在本文中,我们快速介绍了使用Redux的TDD。如果你希望使用TDD编写React组件,你可以查看我写的这篇文章。

1.9K30

React Native推送通知:完整的操作指南

这里有一个图表,简化了通知服务如何与设备进行通信: 当涉及到在React Native中设置推送通知时,有几种设置方式: 原生平台特定的通知服务(FCM/APNS) Expo推送通知服务和其他云服务 像...发送测试通知 我们可以通过添加推送通知令牌,使用Expo通知工具向设备发送测试通知。进入Expo通知工具,输入你的令牌,输入标题和描述,保持你的应用在后台,然后点击发送通知按钮来发送测试通知。...请注意,在这里,我没有设置 FCM 就收到了我的 Android 设备的通知,因为我在使用 Expo 应用进行开发。...通过 style 属性进行自定义样式:开发者现在可以在通知中嵌入图片和大量文本 基于触发器的消息:如果满足某个条件,允许应用程序发送通知 易于使用的交互API:顾名思义,这使得用户可以通过按钮或文本字段与通知进行交互...让我们看看这些问题的原因以及如何解决它们: 我无法在裸 React Native 应用中运行 Expo 通知:这是因为 Expo 通知库依赖于其他 Expo 库。

1.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    React Native 开发心得分享

    Expo​ Expo 是基于 React Native 并整合大量常用的 native module(Expo SDK),像原生的功能如相册,相机,蓝牙等功能,在 expo 都是直接集成的,相当于封装原生的...在浏览器打开 snack.expo.dev ,点击 MyDevice,扫码并在 Expo app 中查看。 会自动将该程序实时运行在你的移动端设备,意味着你更改代码也将会同步到Expo go 中。...,由于 RN 的组件样式中并不是完全兼容 Web 端,就比如说你想实现毛玻璃效果,通过 backdrop-blur 原子类就可以轻松实现,但是在原生移动端并不能生效,其原因就是原生组件的 View 并没有毛玻璃效果...React Native 和 Next.js 应用程序共享代码​ 如果你想要在 React Native 和 Next.js 应用程序共享代码(UI,逻辑),你可以考虑使用 solito。...一些案例/组件分析​ 分享一些我在编写 RN 中的一些案例。该说不说,RN 的生态是真的可以,很多原生的解决办法几乎都有。

    50131

    为你的圣诞灯构建一个应用程序

    Z-Wave是一种用于家庭自动化的协议。对我们来说,重要的是,它与您的WiFi分开运行。 在我的例子中,我把它连接到2个户外电灯开关上,用来打开和关闭我的圣诞灯。电灯开关有防水罩,上面有一个手动按钮。...您可以按下按钮启用配对模式,也可以手动打开和关闭灯光。最后,还有在我的iPhone上运行的React原生应用程序。 通常,我不会尝试为这么小的项目构建iPhone应用程序。...但是自从我构建应用程序以来已经有一段时间了,而且我一直在听说 React Native,所以我决定试一试。 我很惊讶能够在不到一个小时的时间内在我的手机上安装我的应用程序的构建版本。...确实,因为我的“应用程序”太小了(字面意思是一个按钮和一个状态ON或OFF),除了基本的示例应用程序之外,我真的没有什么可做的: import React, {useState, useEffect }...Flask 应用程序中还有一个视图,您也可以在浏览器中访问它来控制灯光。你可以在/网址上看到它。 我鼓励你让你的应用程序看起来比我的更好,并分享结果。 节日快乐!

    1.8K40

    Expo与Flutter:如何选择合适的移动框架

    我向您保证,这篇文章不同。 在本文中,我将提出并回答十个可操作的问题,这些问题将帮助您确定适合您特定用例的技术,以便您自信地说:“我选择 Expo/Flutter 是因为 X、Y 和 Z。”...在 Expo 中,相机被抽象化,您可以使用 expo-camera 包来渲染原生 iOS 和 Android 相机视图。 虽然看起来是一个很小的区别,但它会影响某些项目的关键要求。...在撰写本文时,React Native 中的新架构尚未成为标准,并非所有库都与之兼容。...如果您仍然不确定,让我帮助您快速了解一下: 您应该选择 Expo,如果您: 已经拥有 React 经验或代码 想要使用一个代码库构建 Web 和移动应用程序 想要使用原生平台组件 需要访问最新的原生平台...我观察到的趋势是,公司使用 Flutter 来构建员工体验,在这种体验中,在多个设备上拥有视觉上相同的体验对于内部应用程序来说是有意义的,而公司使用 Expo 来构建消费者体验。这些显然不是绝对的。

    35610

    如何在React Native中添加自定义字体

    在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法。...在我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体库中。...首先,你需要下载 font 文件到你的项目中,并安装 expo-font 包。对于这个教程,我从 FontSquirrel 下载了 Source Code Pro 作为我的自定义字体。...性能影响:在React Native应用程序中添加自定义字体时,请注意它们的文件大小(以kb/mb为单位)。大型字体文件可能会显著增加应用程序的加载时间,特别是在加载自定义字体时。...总结 如本文所探讨的,将自定义字体集成到React Native应用程序中不仅仅是技术上的提升,更是一种改善用户体验的策略性方法。

    61610

    【计算机网络】我与张三的 DNS 解析过程,浏览器中输入URL 回车后发生了什么

    解析 hello ⼤家好,我是 up主黎明⾲菜 今早我正打开b站刷剧,突然想到了⼀个问题: 我们在浏览器⾥输⼊ bilibili.com 的时候,电脑是怎么找到b站的呢?...⼦在外⾯要保护好⾃⼰ 这⾥的奖学⾦ Excel 就相当于权限域名服务器 果然在⾥头找到张三的电话,也就是bilibili 的 ip 地址 我赶紧给他打了过去,结束这要命的⼀天 总结 这个在浏览器中输⼊...地址的流程,其实也就是DNS的⼯作流程 简单的总结一下: 第一步:在浏览器中输入www.bilibili.com域名,操作系统会先检查自己本地的hosts文件 是否有这个域名的映射关系,如果有,就先调用这个...第二步:如果hosts文件中没有,则查询本地DNS解析器缓存,如果有,则完成地址解析。 第三步:如果本地DNS解析器缓存中没有,则去查找本地DNS服务器,如果查到,完成解析。...⽣活息息相关 信息技术源于⽣活,却⼜在⽆时不刻的影响着我们的⽣活 这就是我们在浏览器输⼊URL后的全部内容了 谢谢⼤家观看,我是up主黎明⾲菜 参考文献:https://segmentfault.com

    1.6K30

    【计算机网络】我与张三的 DNS 解析过程,浏览器中输入URL 回车后发生了什么

    # 视频解析 方便大家理解,我在 b 站发布了一期视频,欢迎大家查收 【计网】浏览器输入url按下回车后发生了什么?...计算机网络DNS工作流程详解 # 解析 hello ⼤家好,我是 up主黎明⾲菜 今早我正打开b站刷剧,突然想到了⼀个问题: 我们在浏览器⾥输⼊ bilibili.com 的时候,电脑是怎么找到b站的呢...⼦在外⾯要保护好⾃⼰ 这⾥的奖学⾦ Excel 就相当于权限域名服务器 果然在⾥头找到张三的电话,也就是bilibili 的 ip 地址 我赶紧给他打了过去,结束这要命的⼀天 # 总结 这个在浏览器中输...⼊地址的流程,其实也就是DNS的⼯作流程 简单的总结一下: 第一步:在浏览器中输入www.bilibili.com域名,操作系统会先检查自己本地的hosts文件 是否有这个域名的映射关系,如果有,就先调用这个...⽣活息息相关(深情) 信息技术源于⽣活,却⼜在⽆时不刻的影响着我们的⽣活(深情) 这就是我们在浏览器输⼊URL后的全部内容了(深情) 如果你喜欢这期视频,想要听更多有关编程的故事(深情) 希望你能点赞、

    1.5K40

    老板说,2 天开发一个 App,双端支持,我是怎么做到的

    首先,Expo 是一个开源框架,背后有一个强大的社区支持。你可以在 Expo 的 GitHub 仓库 找到它的源码、更新日志以及社区贡献的内容。...Expo 的核心特点你可能会问,Expo 和普通的 React Native 开发有什么不同?Expo 的一大特点就是“省心”。它帮你封装了大量底层配置,让你不需要花时间在复杂的环境搭建上。...而且,Expo SDK 每年都会发布几次更新,哦不好意思,每个月都会更新,奶奶的,我刚用就从 50 更新到 51 了,也够速度的,但是好在,是兼容的,好处是确保你能用上最新最酷的功能,比如 react...如果你想了解某个API的用法,文档里都有详细的示例代码,这让学习曲线变得非常平滑。我遇到的一些问题就是在 docs 上找答案,比如如何本地构建,如何弹出原生模块,因为有可能需要做一些原生开发。...如果你需要使用某些非常特殊的原生功能,Expo 可能并不能完全满足你的需求。在这种情况下,你可能需要“弹出”Expo(也就是所谓的“eject”),从而使用纯粹的 React Native 环境。

    40610

    2024 前端趋势预测:React 不会被取代,AI 崛起,追求全栈宇宙

    组件和 React Server 组件,而 Expo 一直在推动Expo Router。...就今年而言,我敢肯定地说,“AI 不可阻挡的进步”在导致你失去前端工作的原因清单中处于较靠后的位置,但这个领域的市场潜力已经非常真实。...Expo 也做了很多值得一提的事情,特别是通过Expo Modules革命性地提升了原生 API 访问能力,以及继续进行代码共享和延续 SSR 与Expo Router的故事。...如果你可以在 Expo Router 上构建并免费得到原生移动应用,为什么要选择 Next.js 呢?这是 Sanket Sahu 提出的一个很有说服力的论点。...对于 Servo 明年能否挑战桌面领域,我持怀疑态度,因为它在 CSS 测试中仍处于中等水平,通过率为 61.8%,WPT 测试通过率为 55.4%,但它的 WebView 可能可以在应用程序中发挥其可控的作用

    69300

    原来 React Native 已经如此成熟了

    如下图所示 新的 通信方式:JSI 在以前的版本中,RN 代码与客户端原生 UI 的交互的成本是非常高的,他们之间通过 JSBridge 进行通信和数据的转化。...上手即用的完整应用层框架:Expo 上面我分享的这些都比较偏底层,更多的是他们在性能上带来了非常大的提高。 Expo 则是在开发体验上带来的巨大提升。...所以 React 中的并发模式,React 中的 use + Suspense 等特性都可以在 React Native 中得到体验。...由于我系统学习了 React 19,也因此深刻的感受到了 React 19 在开发体验上带来的巨大提升,这些开发体验都可以在 RN 中感受到,包括 React Compiler 也有机会运用在 RN 中...开发体验一致的 tailwindcss 支持 终于可以不用在 React Native 中写 Styles 代码了。在我的感受中它非常不方便。

    37720

    几个好用的React-Native 开发工具

    3、React Native Code Push React Native Code Push 是一个用于 React Native 应用热更新的服务,它可以帮助开发者在不发布新版本的情况下,快速地将应用程序的更新推送到用户设备上...这样一来,开发者可以更加方便地修复应用程序中的漏洞、添加新功能或者调整 UI 设计,而无需等待应用商店的审核。...与原生的调试工具相比,React Native Debugger 提供了更加完整的调试功能,可以方便地查看应用中的状态和调用栈信息。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。...当然,React Native 社区中还有许多其他优秀的工具和框架,我就罗列了一些自己相对于比较熟悉的工具和技术,这些工具和技术都可以在 React Native 应用开发过程中发挥重要作用,提高开发效率和代码质量

    2.3K10

    移动开发者必备的 React Native 开发工具

    3、React Native Code PushReact Native Code Push 是一个用于 React Native 应用热更新的服务,它可以帮助开发者在不发布新版本的情况下,快速地将应用程序的更新推送到用户设备上...这样一来,开发者可以更加方便地修复应用程序中的漏洞、添加新功能或者调整 UI 设计,而无需等待应用商店的审核。...与原生的调试工具相比,React Native Debugger 提供了更加完整的调试功能,可以方便地查看应用中的状态和调用栈信息。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。...当然,React Native 社区中还有许多其他优秀的工具和框架,我就罗列了一些自己相对于比较熟悉的工具和技术,这些工具和技术都可以在 React Native 应用开发过程中发挥重要作用,提高开发效率和代码质量

    1.8K20

    React Native 开发工具推荐

    图片3、React Native Code PushReact Native Code Push 是一个用于 React Native 应用热更新的服务,它可以帮助开发者在不发布新版本的情况下,快速地将应用程序的更新推送到用户设备上...这样一来,开发者可以更加方便地修复应用程序中的漏洞、添加新功能或者调整 UI 设计,而无需等待应用商店的审核。...与原生的调试工具相比,React Native Debugger 提供了更加完整的调试功能,可以方便地查看应用中的状态和调用栈信息。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。...当然,React Native 社区中还有许多其他优秀的工具和框架,我就罗列了一些自己相对于比较熟悉的工具和技术,这些工具和技术都可以在 React Native 应用开发过程中发挥重要作用,提高开发效率和代码质量

    1.7K20

    我不认为Flutter比React Native好

    Flutter 的升级体验也更好,我们直接在现有应用程序中运行 flutter create,它就能根据新版本重建所有内容。...当然,情况也在逐渐改善。微软的几位大佬就在之前的访谈中讨论过 React Native 工具与开发者体验的改进思路。 此外,Expo 也确实极大改善了 React Native 中的开发者体验。...使用 Expo 服务,大家不仅能够实现原版 React Native 中的一切功能,还将获得更好的升级体验与集成工具运行效果。...首先,这只是我的个人观点。我做的就是 React Native 咨询业务、而且与 React Native 核心团队保持合作,所以我不会说自己的观点有多么客观公正。...总之,我希望尽可能在文章中公平讨论这个问题。 我也不关注那些什么美学、优雅层面的问题,例如 Dart 和 TypeScript 的语法、或者 JSX 和 Dart 的功能部件结构谁更好之类。

    2.5K20

    如何使用ChatGPT构建Web Components

    我一直在思考 web components 很长时间。在 1996 年 BYTE 题为 On-Line Componentware 的故事中,我展示了网站也是可编程的构建块。...VBX 生态系统提供了用于图表绘制、网络通信、数据访问、音频/视频播放和图像扫描/编辑的控件。UI 控件包括按钮、对话框、滑块、用于显示和编辑表格数据的网格、文本编辑器、树和列表以及选项卡视图。...构建渐进式 Web 应用程序,使其作为由简单 CSS 和 JS 支持的原生 HTML 工作,然后叠加现代 Web API 以匹配原生应用程序的体验。...作为此应用程序的作者,您只需编写一些基本的 HTML 和可选的 CSS 来声明数据源、输入字段和用于显示记录的视图。...这个快速而廉价的实验暴露了一个结构缺陷。列表组件最初是卡片组件的容器,这些卡片组件是列表内部的,应用程序作者看不到也无法设置样式。这就是将我们推向继承的滑坡的原因。

    11510

    从零开始构建React Native数字键盘功能

    现代移动应用程序在入门过程中经常涉及一个步骤,你需要输入发送到你的电子邮件或手机号码的验证码 PIN。有时,你需要使用类似于分割 OTP 输入字段的东西来输入 PIN。...在React Native应用中数字键盘的使用场景 在React Native应用中,有许多专业的数字键盘使用场景。 一个常见的例子是一次性密码(OTP)输入验证。...一旦输入正确的PIN码,应用将会将用户引导到 Home 屏幕。 我们开始构建我们的React Native应用程序,包含这三个屏幕。...就像第一个用例一样,你可以在你的应用程序中自定义数字键盘,显示在你的登录页面上。 用户在注册时可以输入一个PIN码。...构建自定义功能意味着你不会受到库的能力的限制。 此外,在你的React Native应用程序中安装过多的包会使其变得臃肿。自行构建功能并减少安装的包可以帮助减小应用程序的大小。

    34610

    最新React Native环境搭建(从0到打包APK)

    React Native 之旅 React Native 踩坑开始 5.1 假期 就这样短暂的结束了,你都干啥了? ,我嘛加了3天班,你们呢?...,这里就不介绍了) 夜深模拟器 其它模拟器 ​ ---- ​ 安装 React Native 脚手架 我之前是按照官方提供的脚手架安装的,出现各种坑,创建好了项目,启动项目,各种报错,最后各种百度...创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO Expo是通用React应用程序的框架和平台。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...是不是很轻松哈,使用官方提供的,你的自己配置,查找模拟器。 React Native 支持热更新 这样很方便我们开发APP 中调试, 数据改变, 视图同时改变。

    4.3K00
    领券