React+Typescript清理项目环境

news/2024/7/15 19:16:40 标签: react.js, typescript, 前端

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

然后 根目录下的 tsconfig.json 是一个配置文件
其中包含了Typescript的一些特定选项 所以 大家轻易不要动比较好
在这里插入图片描述
然后 我们打开 src下的 index.tsx
下面这一段
在这里插入图片描述
这是一个断言 或者叫转换的开发方式

然后 为了方便大家看 我们将不用的东西都干掉 打开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 改成

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

export default App;

然后 我们启动项目 就会发现 干净了很多
在这里插入图片描述


http://www.niftyadmin.cn/n/4939067.html

相关文章

发布游戏,进行打包。(Unity)

做到这里&#xff0c;我们的项目基本功能已经完成了&#xff0c;如果你还想使项目功能更加完善&#xff0c;可以自己思考如何补充&#xff0c;充分发挥并进行优化使效果达到更加美好。 首先呢&#xff0c;我们这里是说打包Window电脑游戏&#xff0c;我们直接点击菜单栏文件-&…

如何在Stream流中分组统计

上面是今天碰到需求,之前就做过类似的分组统计,这个相对来说比较简单,统计的也少,序号和总预约人数这两部分交给前端了,不需要由后端统计,后端统计一下预约日期和检查项目和预约人数就行; Overridepublic List<ItemStatisticsVo> statistics(ItemStatisticsModel itemSta…

【概念篇】文件概述

✅作者简介&#xff1a;大家好&#xff0c;我是小杨 &#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文件概述 1&#xff0c;文件的概念 狭义上的文件是计算机系统中用于存储和组织数据的一种数据存…

从零开始,快速打造租车服务小程序的分享

随着移动互联网的发展&#xff0c;小程序成为了企业推广和服务的重要手段之一。租车服务行业也不例外&#xff0c;通过打造一款租车服务小程序&#xff0c;企业可以更好地与用户进行互动和交流&#xff0c;提供更方便快捷的租车服务。本文将介绍如何利用第三方制作平台/工具快速…

探寻Pytest的重难点:挑战与突破

Pytest作为Python社区中广受欢迎的测试框架&#xff0c;以其简洁优雅的语法和强大的功能&#xff0c;成为了许多开发者的首选。然而&#xff0c;在使用Pytest的过程中&#xff0c;我们不可避免地会遇到一些重难点&#xff0c;这些挑战也正是我们不断学习和成长的机会。本文将带…

Spring Security自定义登陆界面和密码验证逻辑

maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency> 创建配置文件处理跳转拦截等功能以及密码比对功能 package com.example.demo2.demos.web1;…

【Redis】Redis中大key怎么处理?

什么是 Redis 大 key&#xff1f; 大 key 并不是指 key 的值很大&#xff0c;而是 key 对应的 value 很大。 一般而言&#xff0c;下面的情况被称为大 key&#xff1a; ● 一个String类型的Key&#xff0c;它的值为5MB&#xff08;数据过大&#xff09;&#xff1b; ● 一个L…

ES踩坑记录之集群间通信异常造成节点无法加入

问题描述 公司新搭了一套ES集群&#xff0c;4台机器&#xff0c;ES版本7.5.0&#xff0c;前期搭建十分顺利&#xff0c;但集群运行一段时间后会出现问题。问题具体体现为节点间通讯异常&#xff0c;集群会重新选主&#xff0c;但选主之后只能通过新的主节点进行集群操作&#…