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

使用preact别名时,create- react -app在测试中找不到react

使用preact别名时,create-react-app在测试中找不到react的原因是create-react-app默认使用的是React作为前端开发框架,而preact是React的一个轻量级替代品,两者虽然有相似的API和功能,但是在代码实现上有一些差异。

当使用preact别名时,create-react-app在测试中找不到react的解决方法如下:

  1. 确保已经安装了preact和preact-alias插件:npm install preact preact-alias --save
  2. 在项目的根目录下创建一个.env文件,并添加以下内容:NODE_PATH=src/
  3. 在项目的根目录下创建一个jsconfig.json文件,并添加以下内容:{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }
  4. 修改src目录下的index.js文件,将其中的import React from 'react'替换为import React from 'preact'
  5. 运行测试命令时,使用react-scripts替代react-scripts:react-scripts test

通过以上步骤,create-react-app将会使用preact作为React的替代品进行测试,解决了找不到react的问题。

preact是一个轻量级的React替代品,具有更小的体积和更快的加载速度,适用于对性能要求较高的项目。它与React具有相似的API和功能,可以无缝替换使用。腾讯云提供了云原生应用开发平台Tencent Cloud Native,其中包括了云原生应用开发框架Tencent Cloud Native Framework,可以用于快速构建和部署云原生应用。相关产品和介绍链接如下:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 新一代构建工具对比

重新构建这个应用程序,让我可以测试开发人员将一些相当标准的 React 依赖项添加到工具(包括 React Router 和 axios)的体验。...你使用 Preact 不会有同样的问题,因为它不需要任何环境变量,而且默认情况下已经为浏览器准备好了。...同样使用 Vite ,我引入使用 node API 或传统格式的依赖项没有任何问题。它们似乎都被塞进了一个浏览器可接受的 esmodule 。...首先,在你的package.json把htm/preact别名为htm/react,把react别名为es-react。...wmr 转换 JSX 使用了一个叫 htm 的工具,它提供了一些很棒的好处。比方说,我们 wmr 中使用 Preact 写一个计数器,却犯了一个错误。

1.8K10
  • ReactPreact PWA 性能分析报告

    的例子使用服务端渲染,首屏渲染时间减少到1.1s,首屏完整渲染时间减少到2.4s - 这提高了用户页面加载速度的感知,他们可以更提前获取内容,而且测试显示SEO也略微改善。...缓存Javascript,Service Worker使用了缓存API(如我们JavaScript 性能入门一文中提到的),使得TreeboV8的代码缓存也有不俗的优先选择,这样Treebo反复访问的启动节省了一点间...理想情况下,您应该使用preactpreact-compat来进行开发,生产和测试。 这可以让你在早期发现任何交互操作性错误。...如果你只想在Webpack使用别名preactpreact-compat生成构建(例如,如果你最开始使用Enzyme),请确保部署到服务器之前彻底测试一切正常工作。...', }, }, 这种方法的缺点是,需要兼容其他配套方案,这样Preact才能在他们想使用React生态的各部分同样工作 如果你正在使用ReactPreact对于95%的案例来说都是最合适的选择

    2.2K20

    干货 | Qreact,去哪儿网的迷你react方案

    去哪儿深耕React多年,构建了两个基于React的UI库,它们都是用于移动端。如果这些库都是内置APP,应该没有要求。但是去哪儿分成十来个事业部,根据事业部的赚钱能力分配更新包的体积。...为了能让用户wifi上更新我们的APP,更新包的体积一般不超过100MB,因此像这样公用的框架与库体积越少越好。...4、扩展方便 尤其第4点,开发qreact,我们都为双方提了不少ISSUE。其实程序员还是比较腼腆,不愿麻烦人,因此我们写框架还是多留一些扩展接口吧。...整个qreact的架构大概就是: qreact= preact改+preact-compat改+react-web事件系统迷你版 preact的源码里一个叫options.js的文件,里面有一个options...图6 这了让preact支持它们,我们是框架diff节点,重新添加上它们的。因为这时,我们能轻松知道一个节点在DOM树的上下关系。 最后是对事件系统进行瘦身。

    1K80

    Why you shouldn`t use Preact, Fast-React, etc. to replace React today

    而且,FacebookReact 16还没有release的情况下已经主站开始使用React Fiber,并通过完整的测试用例保证其向后兼容性,让React使用者很安心。...react-static是指调用 renderToStaticMarkup 的数据。...Client Client是使用Chrome Headless模式来测试的。 Fast-React的浏览器端直接使用React@16来渲染。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间DOM节点较少的时候与Preact一致,节点很多的情况下比Preact、其他方案的成绩要好一大截。...小结 很兴奋React@16性能方面做了这么多优化,相信绝大多数情况下我已经不用考虑其他的替代方案了。当然也有例外: 当你的目标用户网络环境比较糟糕:之前的测试主要是基于执行速度来考察的。

    46910

    Preact -- React的轻量解决方案

    若团队选择此框架作为React的轻量解决方案的话,我们最好能具备维护和开发此框架的能力,这能够遇到bug的时候第一间修复,而且能够很好地开发一些组件,提升框架的开发效率。...如何上手及如何和React同一构建下使用 作者Getting Started里有比较好的介绍。其实不外乎就2点差异: 引入preact与引入react的差异。...将 jsx 编译成 js 代码,提供了一个选项 pragma 来选择 react(默认)还是其他的 Virtual-DOM。...因此如果混合使用 reactpreact,可以使用 preact 的 jsx 文件里添加 /** @jsx h /(或者 /* @jsx preact.h */,如果你只 import preact...Preact,大体是通过这个流程,然后最终转换成真实dom: render (类似于react-dom里的render,主入口,触发渲染) => diff => idiff (看起来应该是做dom

    2K50

    被升级整疯了,Etsy 放弃 React

    Preact 还是 React ? Etsy 目前拥有两大主要产品栈。面向买家的页面,Etsy 使用的是基于 PHP 服务器的渲染方案,再配合客户端上的 jQuery/ 原始 JS。...面向卖家的页面,Etsy 选择使用React 渲染的 SPA 再配合一点点基于服务器的 HTML 渲染,借此尽可能减少从同一 PHP 服务器端堆栈接收的数据总量。...相关博客文章,Sangster 详细解释了 Etsy 迁移到 Preact 而不是最新版 React 的三个原因。 首先,采用 Preact 能最大程度地降低迁移风险。...同时 ReactPreact 中支持 / 测试 Web Toolkit 等工具必定会增加 FES 团队及其他同事的工作负担,导致团队很难实现全面的工具与架构共享。... Preact 成为整个 Etsy 的唯一标准后,这类问题也就随之消失了。

    46941

    打爆React泡沫,重新审视前端技术选择

    例如,我忽略了 Ember 和 Angular,因为它们的岁数比 React 还大。而且基准测试,它们的性能一般也不会显著优于 React。...但 Vue 使用的是更接近默认 HTML,而非 JSX 的模板语言,这使得模板文件编写条件与循环变得更轻松,不必借助 map 和三元组等变通方法。...SOLID 能够替代: React 和 ReactDOM。SolidStart 未来也有可能取代 Next,但截至本文撰稿,它仍处于 beta 测试阶段。...PREACT 适用于: 还想坚持使用 React,但希望运行速度更快的前端开发者。 PREACT 能够替代: React。...我不知道下一次飞跃会是什么、因为什么,但我发现大家感受到的很多问题在 React 其实找不到答案。这种感觉跟当初使用 jQuery 的时候很相似。

    34330

    打爆 React 泡沫,重新审视前端技术选择

    例如,我忽略了 Ember 和 Angular,因为它们的岁数比 React 还大。而且基准测试,它们的性能一般也不会显著优于 React。...但 Vue 使用的是更接近默认 HTML,而非 JSX 的模板语言,这使得模板文件编写条件与循环变得更轻松,不必借助 map 和三元组等变通方法。...SOLID 能够替代: React 和 ReactDOM。SolidStart 未来也有可能取代 Next,但截至本文撰稿,它仍处于 beta 测试阶段。...PREACT 适用于: 还想坚持使用 React,但希望运行速度更快的前端开发者。 PREACT 能够替代: React。...我不知道下一次飞跃会是什么、因为什么,但我发现大家感受到的很多问题在 React 其实找不到答案。这种感觉跟当初使用 jQuery 的时候很相似。

    29110

    新一代构建工具的比较

    通过这种方式,我们可以看到有哪些选择以及它们是如何叠加起来的,这样我们就可以需要的时候做出最好的选择。 当然,所有这些都会被我使用 ReactPreact 的经验所影响。...重新构建这个应用程序使我能够测试开发人员将一些非常标准的 React dependencies 引入到工具的经验,包括 React Router 和 axios。...也就是说,React 需要手动导入,然后将 JSX 转换为 React.createElement。但是,有一些方法可以 JSX 添加自动导入,或者为 Preact 配置 JSX。...但这对我的测试需求来说已经足够了。 尽管我们每次保存文件都会重新绑定整个应用程序,但是 esbuild 变慢之前,我们需要有一个非常庞大的应用程序。...这是因为它需要知道构建使用 React 和 ReactDOM 的哪个版本。你可以通过写一个 snowpack.deps.json 来解决这个问题,它可以通过运行以下命令自动创建: .

    2.3K20

    使用Preact 开发基于Shadow DOM的JS插件

    相比于使用ReactPreact更符合我们的要。PreactReact的轻量级替代方案,体积仅有3kB,并且拥有与React相同的API(官网如是说)。...关于它的更多优点以及与React的差异性,都可以官网了解到,在此不再赘述。 开发过程 Preact提供了脚手架工具,并且也能与其他构建工具如Webpack、Rollup等整合。...React或者Vue项目中,通常的做法是选择一个根节点,然后将根组件挂载至根节点上。...Shadow DOM可以直接添加style标签节点,并且只会Shadow DOM中生效,外部样式也不会在内部生效,完美做到样式隔离。...常见问题 组件选择 Preact可以直接使用React生态的绝大多数组件,然而其中有许多使用的是Styled-Components,对于这类组件是无法直接在Shadow DOM中使用的,因为Styled-Components

    2K30

    Why you shouldn`t use Preact, Fast-React, etc. to replace React today

    而且,FacebookReact 16还没有release的情况下已经主站开始使用React Fiber,并通过完整的测试用例保证其向后兼容性,让React使用者很安心。...react-static是指调用 renderToStaticMarkup 的数据。...Client Client是使用Chrome Headless模式来测试的。 Fast-React的浏览器端直接使用React@16来渲染。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间DOM节点较少的时候与Preact一致,节点很多的情况下比Preact、其他方案的成绩要好一大截。...小结 很兴奋React@16性能方面做了这么多优化,相信绝大多数情况下我已经不用考虑其他的替代方案了。当然也有例外: 当你的目标用户网络环境比较糟糕:之前的测试主要是基于执行速度来考察的。

    70180

    为什么不用Preact或者Fast-React来代替React

    而且,FacebookReact 16还没有release的情况下已经主站开始使用React Fiber,并通过完整的测试用例保证其向后兼容性,让React使用者很安心。...react-static是指调用 renderToStaticMarkup 的数据。...Client Client是使用Chrome Headless模式来测试的。 Fast-React的浏览器端直接使用React@16来渲染。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间DOM节点较少的时候与Preact一致,节点很多的情况下比Preact、其他方案的成绩要好一大截。...4小结 很兴奋React@16性能方面做了这么多优化,相信绝大多数情况下我已经不用考虑其他的替代方案了。当然也有例外: 当你的目标用户网络环境比较糟糕:之前的测试主要是基于执行速度来考察的。

    36230

    vite3使用指南,小白再也不用担心项目配置问题了

    以获取每个模板的更多细节:vanilla,vanilla-ts, vue, vue-ts,reactreact-ts,react-swc,react-swc-ts,preactpreact-ts,...区分开发环境,测试环境和生产环境 首先在项目根目录下创建.env文件,Vite 使用 dotenv 从你的 环境目录 的下列文件加载额外的环境变量 .env # 所有情况下都会加载...测试模式下 通过验证我们可以看出,不管是什么模式下,都可以加载到.env文件的变量 更改.env的默认地址 我们现在的.env文件都是建立根目录的,如果.env.XX的文件太多,会显得我们的项目目录很乱...port: 9000,//项目启动端口 open: true,//项目启动是否打开浏览器 base:'/',//用于代理 Vite 作为子文件夹使用。...,会长打包时间,所以可以build再添加一个配置项关闭打包计算。

    88830

    Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

    运行时改造 Taro 小程序环境模拟实现了类浏览器环境,因此理论上任意的前端框架都可以 Taro 中使用。...兼容 React 生态 Preact 使用preact/compat 去磨平与 React 的 API 差异,让 React 的各种生态库可以直接运行在 Preact 上。...得益于此,开发我们可以使用任意的 React 生态库,甚至对 React、ReactDOM 的 API 引用也不需要修改,只需要简单地配置 alias 即可: // Webpack config const...React ,还是会包含 Vue2、Vue3 的适配层代码。...【Breaking Changes】安装对应的框架适配插件 因为 Taro v3.4 把各前端框架的适配逻辑拆分到对应的插件,因此旧项目升级需要安装对应框架的适配插件: 使用 React,请安装 @

    85800

    基于Vite+React构建在线Excel

    react-ts preact preact-ts lit lit-ts svelte svelte-ts 我们可以看到,目前已经支持了react以及react-ts模板。...对于一个经常性使用React开发项目的程序媛来说,之前一直使用create-react-app来构建react应用,也没有觉得有太大的问题。...最开始要使用到Vite,本葡萄的内心还是有点疑虑的,因为毕竟Vite是跟着Vue3发布的,对于使用者而言,潜意识会觉得它和Vue更加适配;但在实际上手用了之后,才会发现Vite的搭建速度,不亏于它的名字...项目默认启动3000端口。打开后展示如上图所示,到这一步我们使用Vite就已经创建好React项目了,接下来我们需要引入纯前端表格控件,用来构建一个在线Excel。...要想使用,就必须先引入组件相关资源,我们可以package.json添加以下内容: "dependencies": { "react": "^18.0.0", "react-dom"

    78430

    Rocket Chat,一个纯前端技术构建的开源产品

    跨平台解决方案上,React Native是先行者,它也是前端技术,React Native与React同出一门,都是Facebook的杰作。...当然,对于前端团队来说,使用React Native也能编写出非常好的移动app,肯定比不熟悉的Flutter来得更容易。 3.Electron 我前几周才专门就这个技术写了几篇文章。...链接在文末. 4.Preact 如果说起React,可能大家会非常熟悉。但Preact可能知名度就没有这么高了。Preact是什么呢? Preact是一款轻量级的取代React的前端类库。...它几乎完全兼容React,但更小,更快。(兼容是指它的写法与React几乎一样) 由于它的小和快,这使得一些习惯React,又觉得它太重了的,纷纷转向Preact。...Chat这样,使用前端技术构建一整套产品成本及收益的考量上非常可取。

    4K40

    我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁!

    React 官网介绍了 Hook 的这样一个限制: 不要在循环,条件或嵌套函数调用 Hook, 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。...遵守这条规则,你就能确保 Hook 每一次渲染中都按照同样的顺序被调用。这让 React 能够多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。...这个限制开发也确实会时常影响到我们的开发体验,比如函数组件中出现 if 语句提前 return 了,后面又出现 Hook 调用的话,React 官方推的 eslint 规则也会给出警告。...由于 React 的源码太复杂,接下来本文会以原理类似但精简很多的 Preact[1] 的源码为切入点来调试、讲解。...以 Preact 的 Hook 的实现为例,它用数组和下标来实现 Hook 的查找(React 使用链表,但是原理类似)。

    1.8K20
    领券