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;

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

相关推荐
还是大剑师兰特6 分钟前
TypeScript 面试题及详细答案 100题 (11-20)-- 基础类型与类型操作
typescript·大剑师·typescript教程·typescript面试题
徐小夕11 分钟前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK2 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
qq. 28040339842 小时前
react hooks
前端·javascript·react.js
LHX sir3 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web