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;

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

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript