react+mobx+装饰器环境搭建

最新推荐文章于 2023-12-23 17:03:40 发布
最新推荐文章于 2023-12-23 17:03:40 发布
阅读量306 收藏
点赞数
分类专栏： 常见问题 前端学习 React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24724109/article/details/96387134
版权
在学习mobx过程中遇到装饰器报错，通过安装@babel/plugin-proposal-decorators的7.4.4版本并配置create.js文件，修改test正则包含tsx,jsx,js，并设置legacy为true，解决了运行yarn start时的错误。" 80790344,7605470,Centos7中Python3+Selenium+Chrome+Chromedriver详细安装指南,"['Python开发', '自动化测试', 'Web开发', 'Selenium框架', 'Linux系统']
摘要由CSDN通过智能技术生成
问题描述:

今天在学习mobx的时候发现，使用mobx的装饰器，运行yarn start 报错!!!

解决办法：
  1. 安装@babel/plugin-proposal-decorators@7.4.4
yarn add @babel/plugin-proposal-decorators@7.4.4
yarn install
  1. 配置node_modules下的create.js文件

将override按照下面的配置， 将这里的test的正则表达式， 修改为包括tsx,jsx,js在内的文件，并legacy设为true


    overrides: [
      isFlowEnabled && {
   
        exclude: /\.tsx?$/,
        plugins:
最低0.47元/天 解锁文章
月半叫做胖
关注
专栏目录
React项目搭建 router5.0+mobx
exaggerate_smile的博客
12-25 331
一个基础的项目搭建,使用Router5.0 + Mobx状态管理仓库
react+mobx+router+axios+antd搭建单页应用
01-20
react+mobx+router+axios+antd搭建单页应用创建项目基础框架1. npm 全局安装 create-react-app2. 使用 create-react-app 创建项目3. 进入创建的项目中，弹出配置添加依赖1. 添加less依赖2. 添加路由依赖（React Router）3. 添加状态管理依赖（MobX ）4. 添加Http请求依赖（Axios）5. 添加UI框架依赖（Ant Design） 创建项目 基础框架 1. npm 全局安装 create-react-app npm install -g create-react-app 2. 使用 create-re
mobx项目环境搭建
黄彪博客
09-11 319
文章参考 bilibili入门视频 Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (3:5): 中文文档 创建一个 mobx 工程（hello world） 使用 create-react-app 创建一个mobx-study工程 create-react-app mobx-study git add . git commit -m 'init' npm run eject 要执行
Mobx中装饰器语法的环境配置
Twinkle的博客
11-12 638
1.快速新建一个项目 npx create-react-app mobx-react cd mobx-react yarn eject 报错的话执行以下操作 git add . git commit -m "aa" 2.安装依赖包 yarn add babel-plugin-transform-decorators-legacy @babel/plugin-proposal-dec...
关于Mobx中装饰器语法的环境配置
weixin_30632089的博客
10-24 111
1.弹出项目配置 npm run eject 此处注意，若弹出项目配置失败，请先执行以下两行代码（若没有安装git则请跳过，本人是在安装git的情况下解决问题的） 1.git add . 2.git commit -m "init" 　　 2.安装装饰器所需依赖 npm install --save-dev babel-plugin-transform-d...
1-1、create-react-app 配置 mobx
weixin_30823683的博客
03-05 117
1、用npx create-react-app my-app安装项目 2、cd my-app 3、执行 npm run eject 让配置文件可见 4、npm install --saveDev babel-plugin-transform-decorators-legacy 安装es6装饰器函数解析器插件，因为项目自身不带 5、打开 package.json "babe...
从零开始搭建一个 React + Mobx + React Router 脚手架
浮沉半生的博客
04-30 928
本文详细介绍了如何从零开始搭建一个 React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。 本文代码地址：react-mobx-starter。 建议将代码拉下来之后，配合本文一起查看，效果更佳。 代码下载命令： git clone https://github.com/beichensky/react-mobx-starter.git 最近将脚手架中的 ...
lego-react-mobx-antd：一​​颗脚手架
02-03
通过`@observer`装饰器和`<Provider>`组件，可以轻松地将MobX的状态传递到React组件树中，实现数据驱动的开发模式。 这个项目中，开发者可以期待以下功能： - 使用React进行组件化开发，提高代码复用和可维护性。 -...
Webpack4 + React + Mobx 自己搭建项目编译环境
田智文的专栏
03-07 844
Webpack是啥？不说多解释，更不想说什么React 和Mobx的作用。我认为很多人学习React，是因为工作需要，大部分也都是用手脚架在开发。毕竟这是快速入门的好方法，我也是这样的。写这个目的是记录一下 别忘记了自己的体会。 第一步 创建一个空文件夹，其实就是你的项目目录 mkdir test-react-demo npm init 执行 npm init 后可以一路回车。里面是项...
mobx环境配置
xjx0121的博客
06-20 208
1.创建react项目，初始化2.安装mobx和mobx-react-lite1.定义数据状态2.数据响应式处理3.定义一个函数4.实例化并将实例导出 1.导入countStore实例2.使用实例中的数据3.修改实例中的数据4.让试图响应数据变化...
create-react-app+mobx（+装饰器）+antd 一步一步搭建过程
try again
09-13 3412
全局安装 npm install -g create-react-app yarn //yarn 这是一个类npm 的管理工具 挺好用的 安装包可以离线安装 安装过一次 不需要重复请求外网 create-react-app 你的项目名字 //创建项目 然后开始安装配置 和工具 下面是antd官方网站引入的解释 和步骤 详情自己看下就好了很简单的 //安装antd ui库 y...
react中mobx的使用
liulang68的博客
12-06 357
在组件当中调用action,action中修改state的状态，状态改变以后更新组件的视图。 传过去以后app组件就可以使用这个属性了。 @后面跟上一个成员名称这种语法在我们的es6当中我们称之为装饰器语法。 也可以理解为利用装饰器实现的一种继承方式。 装饰器除了可以修饰类本身还可以修饰类的内部成员。 当count发生改变，autorun就会默认执行。 大佬：https://www.bilibili.com/video/BV1tL4y1h7ND?p.
Mobx-React 用法简述
拯救世界的光太郎
03-28 5908
一、是什么？ 一个非常简单的 状态管理工具，对比 Redux，Mobx 会更容易上手，更容易理解，且编写方便。 二、使用方法 1. 直接借助 Javascript（不推荐） const map = observable.map({ key: "value"}); map.set("key", "new value"); const list = observable([1, 2, 4]); list[2] = 3; const person = observable({ firstName: "
react mobx 装饰器语法配置
weixin_30699741的博客
01-18 237
1.弹出项目配置 npm run eject 此处注意，若弹出项目配置失败，请先执行以下两行代码（我的项目执行上一句都会报错，所以都会执行） 1.git add . 2.git commit -m "init" 　　 2.安装装饰器所需依赖 npm install --save-dev babel-plugin-transform-decorators-legac...
在使用create-react-app创建的项目中配置mobx
weixin_42965828的博客
06-04 201
第一步 正常创建项目 第二步 安装依赖 //使用yarn yarn add react-app-rewired yarn add customize-cra @babel/plugin-proposal-decorators --dev //使用npm npm install react-app-rewired npm install customize-cra @babel/plugin-proposal-decorators --dev 第三步 替换package.json中的scripts内容 /
mobx-react快速入门使用
最新发布
火山的博客
12-23 1875
介绍了mobx的一些基础用法，和一些简单理解。
mobx装饰器使用报错指南
qq_26383604的博客
12-25 3391
一 react中使用mobx: .首先 npm install --save-dev babel-plugin-transform-decorators-legacy .之后在package中找到babel配置添加 "plugins": ["transform-decorators-legacy"] .针对编译器报错 用js 新建jsconfig.json 用typ
12.mobx 6的安装与使用,启用装饰器语法
RRRRRDong的博客
07-12 463
mobx6的配置及使用
react-native+mobx
09-19
React Native Mobx是一个用于构建移动应用程序的开源框架，它结合了React Native和Mobx的功能。使用React Native Mobx，您可以使用React组件模型和Mobx的状态管理功能来开发跨平台的移动应用程序。如果您想开始使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值