创建一个 React+Typescript 项目

这篇具有很好参考价值的文章主要介绍了创建一个 React+Typescript 项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

接下来 我们来一起探索一下用TypeScript 来编写react
创建一个 React+Typescript 项目,react.js,typescript,前端
这也是一个非常好的趋势,目前也非常多人使用
那么 我们就先从创建项目开始

首先 我们先找一个 或者 之前创建一个目录 用来放我们的项目
创建一个 React+Typescript 项目,react.js,typescript,前端
然后 在这个目录下直接输入
例如 这里 我想创建一个叫 tsReApp 的项目就可以输入

npx create-react-app tsreapp --template typescript

这个没办法 这个命令是不支持大写的 所以 名字就只好将大写部分换成小写了
创建一个 React+Typescript 项目,react.js,typescript,前端
然后 我们查看目录 发现项目就已经创建好了
这里 大家一定要搞清楚 npx的概念
他的意思是 如果你的项目中有执行这个命令需要的依赖 他就用依赖 如果没有 他就自己先将依赖装好 再创建
创建一个 React+Typescript 项目,react.js,typescript,前端
然后 我们聊个题外话
官方推荐我们使用 VSCode 一般前端电脑里应该都有 这个工具还是非常好用的
创建一个 React+Typescript 项目,react.js,typescript,前端
然后 我们用VSCode打开刚刚创建的项目
在 package.json 中 我们可以看到 启动命令是start
创建一个 React+Typescript 项目,react.js,typescript,前端
我们直接终端执行

npm run start

创建一个 React+Typescript 项目,react.js,typescript,前端
然后 浏览器端 也正常起来了
创建一个 React+Typescript 项目,react.js,typescript,前端
但这个不得不承认 Ts项目的编译速度 会比ES项目会稍微慢一些文章来源地址https://www.toymoban.com/news/detail-649625.html

到了这里,关于创建一个 React+Typescript 项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(57)
  • 简介:在这篇教程中,我们将使用React.js框架创建一个简单的聊天机器人的前端界面,并利用Dialogflo

    作者:禅与计算机程序设计艺术 介绍及动机 聊天机器人(Chatbot)一直是互联网领域中的热门话题。而很多聊天机器人的功能都依赖于人工智能(AI)技术。越来越多的企业希望拥有自己的聊天机器人系统,从而提升自己的竞争力。为此,业界也出现了很多基于开源技术或云

    2024年02月06日
    浏览(52)
  • react/typescript小结

    1.TS可选链原理分析 2.React hooks之useEffect、useMemo优化技巧 3.React hooks之useCallback的使用与性能分析

    2024年02月12日
    浏览(35)
  • React + TypeScript 实践

    主要内容包括准备知识、如何引入 React、函数式组件的声明方式、Hooks、useRefT、useEffect、useMemoT / useCallbackT、自定义 Hooks、默认属性 defaultProps、Types or Interfaces、获取未导出的 Type、Props、常用 Props ts 类型、常用 React 属性类型、Forms and Events、onSubmit、Operators、Tips、不要在 typ

    2024年02月13日
    浏览(41)
  • React框架:TypeScript支持的JavaScript库

    React 框架是一个功能强大的 JavaScript 库,让用户可以轻松地构建高度动态的用户界面。它借助虚拟 DOM 的思想实现高效的性能,并具有易于使用和灵活的编程接口。随着越来越多的人开始使用 React ,在不断的发展和变化中, React 框架现在加入了 TypeScript 的支持,使其成为一个

    2024年02月11日
    浏览(58)
  • 【React】React18+Typescript+craco配置最小化批量引入Svg并应用的组件

    无论是哪种 Web UI 框架都不可避免的要与 Svg 打交道,那么批量引入才更方便管理 Svg 。 https://ryanhutzley.medium.com/dynamic-svg-imports-in-create-react-app-d6d411f6d6c6 https://github.com/airbnb/babel-plugin-inline-react-svg/issues/51 https://blog.shianqi.com/2017/12/13/Webpack/SVG-sprite/ https://pganalyze.com/blog/building-svg

    2024年04月10日
    浏览(41)
  • 基于React、Typescript和Solidity的NFT完整教程

    基于React、Typescript和Solidity的NFT完整教程 了解如何使用 React / Next JS、Solidity 和 Pinata(IPFS) 在以太坊上创建 NFT 市场 课程英文名:NFT Marketplace in React, Typescript Solidity - Full Guide 此视频教程共5.0小时,中英双语字幕,画质清晰无水印,源码附件全 课程编号:300 百度网盘地址:ht

    2023年04月09日
    浏览(36)
  • React + Typescript + Antd:封装通用的字典组件DXSelect

    在开发中,我们经常遇到这样的场景,在表单中,有个下拉框,选择对应的数据。 那么这个下拉框的选项,就是字典。一搬的做法是,通过antd的Select来实现,代码如下:

    2024年02月15日
    浏览(71)
  • TypeScript基础篇 - React-Rollup-TS环境实战

    目录 Rollup+React+TS scripts/rollup.confog.js package.js Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。主要是做组件化的,如vite scripts/rollup.confog.js package.js

    2024年02月16日
    浏览(43)
  • 以antd为例 React+Typescript 引入第三方UI库

    本文 我们来说说 第三方UI库 其实应用市场上的 第三方UI库都是非常优秀的 那么 react 我们比较熟的肯定还是 antd 我们还是来用它作为演示 这边 我们先访问他的官网 https://3x.ant.design/index-cn 点击开始使用 在左侧 有一个 在 TypeScript 中使用 通过图标我们也可以看出 这个UI库与

    2024年02月09日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包