React+Typescript清理项目环境

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

上文 创建一个 React+Typescript 项目 我们创建出了一个 React配合Ts开发的项目环境
那么 本文 我们先将环境清理感觉 方便后续开发
我们先来聊一下React的一个目录结构
跟我们之前开发的React项目还是有一些区别
public 主要是存放一些静态资源文件 例如 html 图片 icon之类的
其中 manifest.json 带有一些移动端大小配置类的管理
React+Typescript清理项目环境,react.js,typescript,前端
src下自然就是我们的源码内容
React+Typescript清理项目环境,react.js,typescript,前端
入口文件是 src下的 index.tsx文件

然后 根目录下的 tsconfig.json 是一个配置文件
其中包含了Typescript的一些特定选项 所以 大家轻易不要动比较好
React+Typescript清理项目环境,react.js,typescript,前端
然后 我们打开 src下的 index.tsx
下面这一段
React+Typescript清理项目环境,react.js,typescript,前端
这是一个断言 或者叫转换的开发方式

然后 为了方便大家看 我们将不用的东西都干掉 打开src
删掉下面的 App.test.tsx App.css logo.svg reportWebVitals.ts

src下的 index.tsx 更改代码如下

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

把没用的都清掉 看着舒服很多
src下的 App.tsx 改成

function App() {
  return (
    <div className="App">
        hello React Typescript
    </div>
  );
}

export default App;

然后 我们启动项目 就会发现 干净了很多
React+Typescript清理项目环境,react.js,typescript,前端文章来源地址https://www.toymoban.com/news/detail-649947.html

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

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

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

相关文章

  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(51)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

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

    2024年02月06日
    浏览(57)
  • 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)
  • 以antd为例 React+Typescript 引入第三方UI库

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

    2024年02月09日
    浏览(70)
  • WEB3 创建React前端Dapp环境并整合solidity项目,融合项目结构便捷前端拿取合约 Abi

    好 各位 经过我们上文 WEB3 solidity 带着大家编写测试代码 操作订单 创建/取消/填充操作 我们自己写了一个测试订单业务的脚本 没想到运行的还挺好的 那么 今天开始 我们就可以开始操作我们前端 Dapp 的一个操作了 在整个过程中 确实是没有我们后端的操作 或者说 我们自己就

    2024年02月07日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包