React+TypeScript进行项目构建案例讲解

    react项目构建可以很简单，但是如果是结合typescript，其实也不是很麻烦，官网也有很明确的说明。有两种办法：

    1、直接构建带有typescript的react项目，我们需要增加额外的参数，模版不能使用默认的cra-template。而是使用cra-template-typescript。

npx create-react-app tsreactdemo --template typescript

     

    创建完成的成功提示与原来没有太大的区别，直接进入项目路径下，然后yarn start或者npm start。

  

    进入项目，我们不着急启动，首先看看文件长得怎么样，默认会创建一个tsconfig.json，而且src目录下的默认的index.js,App.js文件变为了ts版本的index.tsx,App.tsx。

    我们可以看看package.json中的依赖：

    

    其实，依赖就是多了@types/jest,@types/node,@types/react,@types/react-dom 。

    最早，我们创建typescript的react项目命令好像直接就是npx create-react-app xxx --typescript，可是现在这样不行了，后面的参数必须是--template typescript，而不是直接--typescript。这个需要说明一下，并不是我们搞错了，其实原来就是这样使用的，现在更新换代，方法发生变化了，从这里可以看出，web前端变化太快了，一两年时间如果不学习，可能会完全颠覆你的认知。 这里不是说--typescript就不能创建，它创建不会报错，但是默认就是react的项目，不会包含typescript的内容。

    另外，通过这种方式创建项目，官方文档也推荐我们不要全局安装create-react-app这个工具了，在最新的版本中，可以直接通过npx create-react-app就可以创建最新的react项目了，而如果你全局安装了create-react-app，而且版本还不是最新的，很有可能创建的就是老版本的react项目，如果安装了，可以直接卸载npm uninstall -g create-react-app。

    2、在react项目的基础上，直接加入typescript相关的依赖即可。

npm install typescript @types/react --save

    开始创建一个默认的react项目：

     

    命令上，我直接加上了--typescript，这就是我前面说过的，原来是通过这种方式创建，但是现在这种方式不行了，但是它也不会报错，默认创建的就是react项目，使用的模版是cra-template。

    

    我们直接加上typescript的依赖：

    

    其实，就这么加，都不用增加tsconfig.json文件，就可以了，就好比我们直接增加了一个依赖，没有对项目做大的修改。

    当我们修改了index.js,App.js文件为index.tsx,App.tsx之后，npm start 或 yarn start，默认会创建一个文件tsconfig.json，这也是官方明确说明的，我们没有必要手动创建tsconfig.json。 

    

    我们也可以看看默认生成的tsconfig.json文件的内容：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

    其实，手动创建也大概就是这个样子，所以还不如直接让它自己生成。 

到此这篇关于React+TypeScript进行项目构建案例讲解的文章就介绍到这了,更多相关React+TypeScript进行项目构建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应用程序更高效.它使用虚拟DOM来有效地操作DOM.它遵循从高阶组件到低阶组件的单向数据流. 前言

  • React 并发功能体验(前端的并发模式)

    React 并发功能体验(前端的并发模式)

    React 是一个开源 JavaScript 库,开发人员使用它来创建基于 Web 和移动的应用程序,并且支持构建交互式用户界面和 UI 组件.React 是由 Facebook 软件工程师 Jordan Walke 创建,React 的第一个版本在七年前问世,现在,Facebook 负责维护.React框架自首次发布以来,React 的受欢迎程度直线飙升,热度不减. 2020 年 10 月,React 17 发布了,但令人惊讶的是--"零新功能".当然,这并不是真的表示没有任何新添加

  • Vue3.0中Ref与Reactive的区别示例详析

    目录 Ref与Reactive Ref Reactive Ref与Reactive的区别 shallowRef 与shallowReactive toRaw ---只修改数据不渲染页面 markRaw --- 不追踪数据 toRef --- 跟数据源关联 不修改UI toRefs ---设置多个toRef属性值 customRef ---自定义一个ref ref 捆绑页面的标签 总结 Ref与Reactive Ref Ref 用来创建基础类型的响应式数据,模板默认调用value显示数据.方法中修

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • 教你使用vscode 搭建react-native开发环境

    教你使用vscode 搭建react-native开发环境

    问题 代码没有提示: 许多刚接触RN开发的非前端同学,都会问"哪个编辑器有智能提示?"...而对于前端同学来说,现在的日子已经好很多了,要什么自行车. 低级代码错误: 这里的错误是指类似拼写错误,符号错误等.写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题. 解决办法 可选的方案大概有: 使用typescript: 直接使用有静态类型支持的js版本,but要再学习一套语法,而且我的代码都是ts写的,但很多好的公共库不是啊. 使用flow: 由于网络的原因,这个环境

  • 基于visual studio code + react 开发环境搭建过程

    基于visual studio code + react 开发环境搭建过程

    开发环境 windows 开发工具 visual studio code node 安装和 npm windows 安装node 可以直接在 node官网直接下载直接当作普通软件安装即可. 安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装. 目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具).这里安装好了 node并且测试安装成功之后,可以继续在控制台输入 npm -v 检查是

  • React实现导入导出Excel文件

    React实现导入导出Excel文件

    目录 表示层 业务层 核心插件xlsx excel 导入 excel 导出 excel 导出插件(js-export-excel) 实现效果 结语 表示层 这里我是使用的是antd的Upload上传组件 引用antd部分代码 import { Button,Table,Upload } from 'antd'; <Upload {...props} fileList={state.fileList}> <Button type="primary" >Excel导

  • 手把手带你用React撸一个日程组件

    手把手带你用React撸一个日程组件

    目录 业务背景 使用技术 技术难点 设计思路

  • React+TypeScript进行项目构建案例讲解

    React+TypeScript进行项目构建案例讲解

        react项目构建可以很简单,但是如果是结合typescript,其实也不是很麻烦,官网也有很明确的说明.有两种办法:     1.直接构建带有typescript的react项目,我们需要增加额外的参数,模版不能使用默认的cra-template.而是使用cra-template-typescript. npx create-react-app tsreactdemo --template typescript           创建完成的成功提示与原来没有太大的区别,直接进入项目路

  • 详解webpack4多入口、多页面项目构建案例

    详解webpack4多入口、多页面项目构建案例

    趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi

  • 详解DevEco Studio项目构建讲解、编写页面、布局介绍、页面跳转

    首先要知道鸿蒙的APP是怎么构成的?   HarmonyOS的应用软件包以APP Pack(Application Package)形式发布,它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成.HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开. 一个HAP是由代码.资源.第三方库及应用配置文件组成的模块包,可分为entry和feature两种模块类型,如下图所示. 一.项目目录 首先来看一

  • Vite+React+TypeScript手撸TodoList的项目实践

    Vite+React+TypeScript手撸TodoList的项目实践

    目录 布局与样式 创建工程 定义全局数据类型 实现步骤 源码地址 布局与样式 一个TodoList长什么样子相信无需多言: 上样式: src/TodoList.css .td-wrapper { width: 700px; margin: 0 auto; } .dp-wrapper { width: 100%; height: 40px; display: flex; margin-top: 10px; } .dp-wrapper input { flex: 4; height: 36px; l

  • React Fiber树的构建和替换过程讲解

    目录 前言 mount 过程 update 过程 前言 React Fiber树的创建和替换过程运用了双缓存技术,即先在内存中创建 fiber 树,待 fiber 树创建完成以后,直接将旧的 fiber 树替换成新的 fiber 树,这样做的好处是省去了直接在页面上渲染时的计算时间,避免计算量大导致的白屏.卡顿,现在你一定还不太理解,下面进行详细讲解! mount 过程 以一下demo为例进行讲解: function App() { const [num, add] = useState(0);

  • React+TypeScript+webpack4多入口配置详解

    资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category

  • 详解vue项目构建与实战

    详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • springboot docker原理及项目构建

    这篇文章主要介绍了springboot docker原理及项目构建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.添加maven配置 <properties> <docker.image.prefix>ms4t</docker.image.prefix> </properties> <build> <finalName>eureka</finalName> <p

  • 手把手教你从零开始react+antd搭建项目

    手把手教你从零开始react+antd搭建项目

    之前的文章都是自己的学习日志,主要是防止自己遗忘之前遇到的坑.这次将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统.我会一步步进行下去,所以看完本文你哪怕不了解react,应该也会使用react做一个简单的项目.话不多少,直接开始.完整项目请前往GitHub查看,体验请点击这里.如果觉得可以请给一颗star,谢谢各位. 1.开发环境: node.js -v 12.16.3 create-react-app -v 3.4.1 antd -v 4.3.3 项目开始前请自行全

  • Java对文件进行基本操作案例讲解

    File文件类 java.io.File是文件和目录的重要类(JDK6及以前是唯一) 目录也使用File类进行表示 File类与操作系统无关,但会受到操作系统的权限限制 常用方法 createNewFile , delete , exists , getAbsolutePath , getName , getParent , getPath isDirectory , isFile , length , listFiles , mkdir , mkdirs File不涉及到具体的文件内容.只会涉

随机推荐