react结合ts与mobx环境搭建步骤详解

　　由于react ts mobx 版本上的更新，一些配置信息也在随时更新，使得有时候，在更新版本时，一些配置文件出错，让我们措手不及，现将三者环境搭建配上，废话不多说

　　思路：新建react 应用，利用弹射实现进行mobx支持配置，最后搭建typescript

　　装包：使用的用yarn，相信为什么使用yarn，而不使用npm，大家是知道的，因为速度嘛！！！

　　1、新建应用 npx create-react-app reacttsmobx 最后的reacttsmobx是项目名称

　　2、装包 yarn add mobx

　　3、进行弹射 yarn eject

　　4、弹射之后，新建一个Mobx .js 文件运行发现会报错

　　5、需要安装 @babel/plugin-proposal-decorators

　　yarn add @babel/plugin-proposal-decorators --dev

　　安装完后进行配置：

　　配置完后，会发现在我们定义 observable会报一个错，missing class properties

　　6、装包 yarn add babel-plugin-transform-class-properties --dev

　　进行package.json 配置

　　接下来就是安装一些依赖

　　但是，我们会发现，在定义的observable会划线

　　这个时候需要我们配置jsconfig.json 文件

　　这个时候，需要做什么呢，有些宝宝会直接看运行结果，不着急，先关闭vscode，然后在重启应用

　　你会发现你的问题得到完美解决

　　7、下面引入ts 安装包typescript tslink

　　新建文件 MiGu.tsx

　　引入的时候，记得加上tsx不然会报错，找不到文件

接下里会报一些，各种各样的错误，那是因为我们没有进行json文件的配置，记得之前配置过rn+ts 是tsconfig.json

但是在这里,tsconfig.json不仅会报各种各样的错误，还会影响运行，将tsconfig.json改成jsconfig.json,也就是在上边jsconfig.json文件的基础上，进行配置

{

"compilerOptions": {

"module": "es2015",

"target": "es2015",

"jsx": "react",

"experimentalDecorators":true,

"filesGlob": [

"typings/index.d.ts",

"src/**/*.ts",

"src/**/*.tsx",

"node_modules/typescript/lib/lib.es6.d.ts"

"types": [

"react",

"react-dom",

"react-native"

"exclude": [

"build",

"node_modules",

"jest.config.js",

"App.js"

"compileOnSave": false

}

这个就是我的jsconfig.js文件，接下来就可以很happy的进行tsx程序的编写了！！！

转载于:https://www.cnblogs.com/luxinyi/p/10048919.html

react结合ts与mobx环境搭建步骤详解相关推荐

Linux下服务器基本环境搭建步骤详解(三种软件安装方式)
Linux下服务器基本环境搭建小伙伴们注意看:下面使用三种方式分别安装JDK.Tomcat.Docker进行演示操作系统基于CentOs7. 文章目录 Linux下服务器基本环境搭建前言一.L ...
[转]大数据环境搭建步骤详解（Hadoop，Hive，Zookeeper，Kafka，Flume，Hbase，Spark等安装与配置）
大数据环境安装和配置(Hadoop2.7.7,Hive2.3.4,Zookeeper3.4.10,Kafka2.1.0,Flume1.8.0,Hbase2.1.1,Spark2.4.0等) 系统说明 ...
php强类型 vscode,VSCode + WSL 2 + Ruby环境搭建图文详解
vscode配置ruby开发环境 vscode近年来发展迅速,几乎在3年之间就抢占了原来vim.sublime text的很多份额,犹记得在2015-2016年的时候,ruby推荐的开发环境基本上都是 ...
手动angular2环境搭建_详解.Net Core + Angular2 环境搭建
本文介绍了.Net Core + Angular2 环境搭建,具体如下: 环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版 ...
Visual Studio集成Qt环境搭建_详解与测试
1.利器≠戾气接了两个项目,而这两个项目说起来也很有意思. 一个是监护仪软件开发,要求利用MFC进行开发,因为在此之前接近两年时间一直进行MFC开发:来到清华后,碰到了好多的计算机编程大牛,就GUI ...
深度学习环境搭建超级详解（Miniconda、pytorch安装）
小白刚开始学习<动手学深度学习>,第一次发文,本文主要是为了记录在环境搭建过程中遇到的问题和疑惑,以及解决方法,同时希望能帮到遇到相同问题的小伙伴. 在学习中遇到的疑惑和最后搜索得到的解答 ...
hadoop环境搭建（详解）
hadoop 环境搭建引言: 随着人工智能和大数据的热潮的到来,大数据变得越来越火了,坏蛋哥的信念就是致力于大数据的发展和进步,希望能为大数据的发展和推广尽一份绵薄之力.如果要做大数据,那么大数据相 ...
ftp服务器搭建步骤详解
本文中ftp服务器搭建是依靠fileZillar这个软件.其下载地址如下所示: https://www.filezilla.cn/download/server 搭建步骤如下: 安装安装过程中,需要 ...
服务器php环境搭建教程,PHP服务端环境搭建图文详解
PHP环境搭建也是一门技术,本文主要为大家分享一篇PHP服务端环境搭建的图文教程,具有很好的参考价值,希望对大家有所帮助. 一.PHP服务端环境搭建 1.php 服务端环境安装套件 xampp(ap ...

react结合ts与mobx环境搭建步骤详解

react结合ts与mobx环境搭建步骤详解相关推荐

最新文章

热门文章