React+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 更改代码如下

javascript 复制代码
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;

然后 我们启动项目 就会发现 干净了很多

相关推荐
键盘不能没有CV键13 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ13 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python14 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep15 小时前
【前端】前端运行环境的结构
前端
你的人类朋友15 小时前
【Node】认识multer库
前端·javascript·后端
Aitter15 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front16 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'16 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'16 小时前
css `dorp-shadow`
前端·css
流***陌16 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序