来自创建React App项目的共享库(jsx当前未启用错误)

创建React App项目时出现"jsx当前未启用"错误是因为在项目中使用了JSX语法，但是没有正确配置Babel来转译JSX语法。下面是解决该问题的步骤：

确保你的项目中已经安装了React和Babel相关的依赖。可以通过运行以下命令来安装：

npm install react react-dom @babel/core @babel/preset-react --save

在项目根目录下创建一个名为.babelrc的文件，并添加以下内容：

{
  "presets": ["@babel/preset-react"]
}

这将告诉Babel使用@babel/preset-react来转译JSX语法。

确保你的项目中的Webpack配置正确。在Webpack配置文件中，确保以下几点：

确保Babel Loader已经正确配置，并且将@babel/preset-react添加到presets选项中。
确保Webpack配置中的resolve.extensions选项包含.jsx扩展名。

重新启动项目，应该不再出现"jsx当前未启用"错误。

关于React App项目的共享库，它是一种将React组件和逻辑封装为可重用的模块的方法。通过创建共享库，可以将常用的React组件、工具函数或其他逻辑封装起来，以便在多个项目中共享和重用。

共享库的优势包括：

代码重用：共享库可以将常用的组件和逻辑封装起来，以便在多个项目中重复使用，提高开发效率。
维护性：通过将共享库作为独立的项目进行维护，可以更好地管理和更新共享的代码。
可扩展性：共享库可以根据需要进行扩展和定制，以满足不同项目的需求。

共享库的应用场景包括：

多个项目中使用相同的React组件或逻辑。
团队内部共享和重用代码。
提供给其他开发者使用的开源组件库。

腾讯云相关产品和产品介绍链接地址：

腾讯云函数计算（Serverless）：https://cloud.tencent.com/product/scf
腾讯云云开发（云原生应用开发）：https://cloud.tencent.com/product/tcb
腾讯云数据库（云数据库服务）：https://cloud.tencent.com/product/cdb
腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云安全产品（包括DDoS防护、Web应用防火墙等）：https://cloud.tencent.com/product/ddos

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端反卷计划-组件库-01-环境搭建

今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：图片图片目前这些内容持续更新到了我的学习文档中。...创建项目使用create-react-app创建项目在终端执行如下命令: npx create-react-app curry-design --template typescript执行后，就会下载成功...: true, // 启用JSX语法支持 }, }, plugins: [ 'react', // React相关的ESLint插件 '@typescript-eslint',...，可以根据需要启用 '@typescript-eslint/no-unused-vars': ['error'], // 使用TypeScript的规则检查未使用的变量 'react/prop-types...': 'off', // 关闭prop-types检查，如果你不使用prop-types 'react/react-in-jsx-scope': 'off', // 关闭React在JSX中的全局引入

2613 0

前端项目里都有啥？

❝快速创建一个React项目，我们可以选择Create-React-App[1]或者Vite[2]，下文中我们以Vite构建的项目作为底，来进行二次的配置。...项目的 Ts 编译选项，包括目标版本、模块解析方式、JSX 语法支持等。...优点：依赖项在状态更改时会自动更新缺点：异步更新中的竞态条件可能导致应用程序状态混乱既然，有这么多状态管理库，我们该如何选择呢。...❝最适合你项目的React状态管理库取决于你和你团队的具体需求和专业知识 ❞ 请不要：仅基于项目大小和复杂性选择库。因为我们可能在某处听说过X更适合大型项目，而Y更适合较小的项目。...库的作者在设计其库时考虑了可扩展性，而项目的可扩展性取决于我们如何编写代码和使用库，而不是我们选择使用哪些库。 13.

3161 0

如何使用Vite+React18创建Cesium项目？教你两种方式

前言书接上文，上篇文章介绍了《使用Vite+Vue3创建Cesium项目》，感觉还是对很多小伙伴有帮助的，那么这篇文章就介绍一下使用Vite+React18创建Cesium项目。...react18项目 pnpm create vite vite+react18+cesium --template react-ts 进入项目 cd vite+react18+cesium 安装依赖 pnpm...下面介绍基于react框架创建cesium项目的两种方式：使用cesium的vite插件 vite-plugin-cesium 把cesium依赖包放到public文件夹下直接引入第一种方法安装vite-plugin-cesium...App.js里面的默认样式都删除掉然后在App.jsx组件中 import * as Cesium from 'cesium' import '..../App.css' import {useEffect} from "react"; function App() { useEffect(() => { // 初始化

4394 0

新一代构建工具的比较

我创建了一个 src/app.jsx 文件和一个 dist/index. html 文件。然后，我使用以下命令将应用程序编译成 dist/bundle.js 文件: `..../body> 最后，我们将添加一个 app.jsx 文件: // app.jsx import React from 'react' import ReactDOM from 'react-dom...my-react-project --template @snowpack/app-template-react (#supported-files)Supported files支持的文件支持 JSX...在 Snap Shot 应用程序中，我最终得到了184KB 的源文件，这些文件会请求另外105kb 的来自 Skypack 的依赖项，这就形成了一个非常巨大的瀑布。...这意味着在加载第一个页面之后，不会浪费时间编译、服务或请求导入的依赖项。Vite 还提供了清晰的错误消息传递，打印准确的代码块和排除故障的行号。

2.3K2 0

React 17.0.0-rc.2带来全新的JSX转换

如果你需要在代码中手动创建元素，你可以继续使用 React.createElement。它将继续工作，不会消失。...如需启用新的转换，你可以使用 {"runtime": "automatic"} 作为 @babel/plugin-transform-react-jsx 或 @babel/preset-react 的选项...注意如果你在使用 JSX 时，使用 React 以外的库，你可以使用 `importSource` 选项[17]从该库中引入 — 前提是它提供了必要的入口。...移除未使用的 React 引入因为新的 JSX 转换会自动引入必要的 react/jsx-runtime 函数，因此当你使用 JSX 时，将无需再引入 React。...运行 codemod 会执行如下操作：升级到新的 JSX 转换，删除所有未使用的 React 引入。

2.6K1 0

如何将ReactJS与Flask API连接起来？

我们将为您提供有关如何设置 Flask API、启用跨源资源共享（CORS）、从 ReactJS 发出 API 请求、在用户界面中显示 API 数据以及处理 API 错误的分步指南。...启用可替代通信量 CORS 是由 Web 浏览器实现的一项安全功能，可防止网页向托管在不同域上的 API 发出请求。...通常，Web 浏览器会阻止对来自另一个域的 API 的请求。要允许 ReactJS 向 Flask API 发出请求，您必须在 Flask 服务器上启用跨源资源共享（CORS）。...下面是如何在 React 组件中显示来自 Flask API 的 /api 路由的消息的示例： import { useState, useEffect } from 'react'; function...从 API 获取响应后，我们将其消息分配给消息变量，并使用 JSX 将其显示在用户界面中。处理 API 错误发出 API 请求时，处理可能发生的错误非常重要。

3631 0

用TypeScript编写React的最佳实践

你可以运行以下面的命令： npx create-react-app my-app --template typescript 这可以让你开始使用 TypeScript 编写 React 。...一些明显的区别是： .tsx：TypeScript JSX 文件扩展 tsconfig.json：具有一些默认配置的 TypeScript 配置文件 react-app-env.d.ts：TypeScript...d.ts文件 "noUnusedLocals": true, // 报告未使用的本地变量的错误 "noUnusedParameters": true, // 报告未使用参数的错误.../recommended', // 使用来自 @eslint-plugin-react 的推荐规则 'plugin:@typescript-eslint/recommended', // 使用来自...第三方库无论是用于诸如 Apollo 之类的 GraphQL 客户端还是用于诸如 React Testing Library 之类的测试，我们经常会在 React 和 TypeScript 项目中使用第三方库

4.7K5 1

从0到1使用vite搭建react项目保姆级教程

一、vite创建react项目要使用Vite创建一个React项目，你需要按照以下步骤操作： 1、确保你已经安装了Node.js（建议使用最新的稳定版本）。...2、使用npm命令安装Vite CLI工具，再来创建项目npm create vite@latest my-vite-app 3、运行上述命令后，按照提示选择“create-react-app”模板创建项目...4、输入项目名称，例如“my-react-app”。5、选择需要的选项，例如选择JavaScript或TypeScript作为项目的编程语言。...--open：启动开发服务器后自动打开默认浏览器并访问应用程序--cors：启用 CORS（跨域资源共享）。--strictPort：如果指定的端口已被占用，则退出。.../router.jsx"import {BrowserRouter} from 'react-router-dom' function App() { return ( <BrowserRouter

2.5K1 0

JavaScript 新一代构建工具对比

我创建了一个 src/code秘密花园.jsx 文件和一个 dist/index.html 文件。然后，我使用下面的命令将app编译成一个 dist/bundle.js 文件。 ....让我们在项目的根目录创建一个名为 watch.js 的文件。...// code秘密花园.jsx import React from 'react' import ReactDOM from 'react-dom' const App = ()=>{ return...npx create-snowpack-app my-react-project --template @snowpack/app-template-react 支持的文件支持JSX，但同样，默认情况下只支持...这意味着在第一次页面加载后，不会在编译、服务或请求导入的依赖项上浪费时间。Vite还提供了清晰的错误信息，打印出准确的代码块和行号，以排除故障。

1.8K1 0

如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件

这也会安装 npm，你将使用它来管理项目依赖项。.../Popup"; const App: React.FC = () => { return ; }; export default App; 为项目添加 TypeScript...该弹出窗口的内容来自 App.tsx 组件中的 Popup.tsx 组件。要测试你的扩展，打开 Chrome 并导航到 chrome://extensions。...启用开发者模式并点击加载已解压的扩展程序。选择项目的 dist 文件夹。调试技巧如果某些东西不起作用，请检查控制台中的错误。你可以通过右键点击扩展弹出窗口并选择检查来访问控制台。...你可能需要创建一个宣传图片并撰写详细的描述。在 Chrome 网上应用店发布前往 Chrome 网上应用店开发者控制台，创建一个新项目，并上传你的扩展包（项目的 zip 文件）。

4231 0

40道ReactJS 面试问题及答案

元素是 React 应用程序的最小构建块，通常使用 JSX 创建，JSX 是 JavaScript 的语法扩展。...它旨在共享可被视为 React 组件树的全局数据的数据，例如当前经过身份验证的用户或主题。上下文是使用 React.createContext 函数创建的。...React Portal 是 React JavaScript 库中的一项功能，允许您在正常组件层次结构之外渲染组件。...数据获取：如果组件需要来自 API 或数据库的数据，服务器会获取该数据并在渲染过程中将其传递给组件。...c) 优化捆绑包大小：密切关注捆绑包大小，并通过删除未使用的依赖项、使用树摇动和最小化大型库的使用来优化它。

5141 0

详解 Module Federation 的实现原理

完成代码可查看这里 https://github.com/projectcss/react-mf 大家最好将源代码下载下来自己跑一遍便于理解，下面展示的是 main 应用的代码，在 App 组件中我们引入了...shared 当前应用无论是作为 host 还是 remote 都可以共享依赖，而共享的这些依赖需要通过 shared 去指定。...': { singleton: true } }, }) 他的配置方式有三种，具体可以查看官网，这里只介绍常用的对象配置形式，在对象中 key 表示第三方依赖的名称，value 则是配置项，常用的配置项有...espose-chunk 是当前应用暴露一些属性 / 组件给外部使用的时候生成的，在构建的时候会根据 exposes 配置项生成一个或多个 expose-chunk，比如 src_Button_jsx.js.../node_modules/react/index.js"))))))) }; // 当前应用依赖的共享模块 var chunkMapping = { "bootstrap_js": [

8722 0

Flow 与 Typescript：哪个更适合你的项目？

Flow 与 TypeScript 与 React 的集成一个标准的 React 应用程序创建 React 应用程序的最简单方法是使用create-react-app工具。...首先，让我们通过创建一个没有任何类型检查的 React 应用程序来看看这个工具的实现： npx create-react-app demo-app React启用TypeScript 如果我们从头开始...React启用Flow yarn add flow-bin npm run flow init 然后我们创建和之前一样的ItemsList组件。...TypeScript 也感觉像是一种全有或全无的方法，这会使事情复杂化并减慢具有大量依赖项的大型项目的开发速度。...尽管 Flow 是由 Facebook创建的，但是对于同公司开发的React框架来说，并没有特别优待之处，毕竟它最初的目的就不是作为react的附属工具，而是作为一个通用项目管理工具。

2K3 0

Module Federation最佳实践

，请看下面，MDF解决的问题 MDF解决的问题 webpack5升级了，module Federation允许一个应用可以动态的加载另一个应用的代码，而且共享依赖项现在就变成了一个项目A中可以动态加载项目...(App />); 在App.jsx // application-a/src/App.jsx import React from 'react'; // 引入application_b应用的Example.../App': './src/App' // 这样会报错，另外一个应用引入会报错 */ }, 另外exposes只能暴露内部jsx的组件，不能是js文件，不能是整个App.jsx应用。...主要是App.jsx有引用application-a的引用如果application-b中,App.jsx改成以下 import React from 'react'; function App().../src/App' }, 在application-a的App.jsx // application-a/src/App.jsx import React from 'react'; // import

1.5K3 0

React 入门手册

create-react-app 会在你指定的文件夹下创建项目的目录结构（本示例中为 todolist），同时将它初始化为一个 Git 仓库。...JSX 简介要想学习 React 就必须首先了解 JSX。在上一节中，我们创建了第一个 React 组件，即 App，它定义在由 create-react-app 构建的默认应用程序中。...特别的，在 React 组件中，你可以导入其他 React 组件，然后将它们嵌入当前组件以展示它们。...如果你忘记将一个标签闭合，你将会得到一条错误信息： ? React 会给出非常友好的错误信息，使你可以准确地定位问题并解决问题。...React 并没有添加类似的新特性。React 通过使用大括号的方式，容许我们在 JSX 中嵌入 JavaScript。我们展示的第一个示例，来自于我们之前学习过的 App 组件。

6.4K1 0

React常见面试题

许多包含预配置的工具，例如：create- react app 和 next.js 在其内部也引入了jsx转换。旧的 JSX转换会把jsx 转换为 React.createElement调用。...jsx以js为中心来写html代码 jsx语法特点：支持js+html混写； jsx编译更快比html 优点：jsx类型安全的，在编译过程中就能发现错误； # create-react-app 如何实现...定义：create-react-app是一个快速生成react项目的脚手架；优点：无需设置webpack配置缺点：隐藏了webpack,babel presets的设置，修改起来比较麻烦 # HOC...useMemo：把""创建""函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时重新计算，可以作为性能优化的手段。...共享状态钩子，在组件之间共享状态，可以解决react 逐层通过props传递数据的问题使用流程（使用流程和react-redux差不多）：创建store：通过 createContext Api 包裹整个组件

4.2K2 0

【译】在 Webstorm 中使用 ReactJS：编码辅助、代码规范、重构以及编译

For example: 注意：只要你在项目的任何地方有了 react.js 的库文件，WebStorm 就会为你提供 React 方法和 React 特定属性提供代码自动补全。...为了增强代码补全的类型参数信息，我们推荐你可以添加一个 TypeScript 类型定义文件 react.d.ts，作为当前项目的 JavaScript 库。...在接下来的一篇文章中，我们将会讨论更多关于可用的重构项，代码质量分析，以及代码编译。敬请期待！ 2....禁掉那些你并不想看到的，或者将安全等级从警告改成错误，反之亦然。...在规则对象中你可以列出想要启用的 ESLint 内置规则，通过 React 插件实现的规则也是一样的。

5.8K1 0

浅谈React与SolidJS对于JSX的应用

React将JSX这一概念深入人心。但，并非只有React利用了JSX，VUE、SolidJS等JS库或者框架都使用了JSX这一概念。...import {jsx as _jsx} from 'react/jsx-runtime'; function App() { return _jsx('h1', { children: 'Hello...如需启用新的转换，你可以使用 {"runtime": "automatic"} 作为 @babel/plugin-transform-react-jsx 或 @babel/preset-react 的选项...('#app')).render(appComp) 调用React.createElement创建React节点实例；调用ReactDOM的API完成某个节点的渲染...每个组件执行一次，随着依赖项的更新，钩子和绑定会多次执行。Solid 遵循与 React 相同的理念，具有单向数据流、读/写隔离和不可变接口。但是放弃了使用虚拟 DOM，使用了完全不同的实现。

2855 0

快将你的 React 应用迁移到 Vite 吧，速度太快啦

大多数人使用 Create React App 来创建 React App。虽然它支持所有开箱即用的配置。...我们可以迁移到 Vite，而不是使用 CRA 来创建 React App。Vite 是下一代前端工具，可以更快地构建应用程序。...对 TypeScript、JSX、CSS 等的具备开箱即用的支持。支持多页面构建。具有完整的 TypeScript 类型的 API。支持 React、Vue、Preact、Svelte。...但是，一些大型依赖项（例如 AntD）的处理成本也很高。源代码通常包含需要转换的非纯 JavaScript（例如 JSX、CSS 或其他组件），并且会经常被编辑。..."> 将你的 env 从 REACT_APP 更新为 VITE，如下所示: // From REACT_APP_ENV = local REACT_APP_HOST_UR = https

1.3K2 0

快速上手Vue开发：在项目中如何配置 tsconfig.json 文件？

–allowUnreachableCode boolean false 不报告执行不到的代码错误。 –allowUnusedLabels boolean false 不报告未使用的标签错误。...–init 初始化TypeScript项目并创建一个 tsconfig.json文件。...–jsx string “Preserve” 在 .tsx文件里支持JSX： "React"或 “Preserve”。查看 JSX。...–jsxFactory string “React.createElement” 指定生成目标为react JSX时，使用的JSX工厂函数，比如 React.createElement或 h。...–reactNamespace string “React” 当目标为生成 “react” JSX时，指定 createElement和 __spread的调用对象 –removeComments boolean

1.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云