上文 創建一個 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 改成
function App() {return (<div className="App">hello React Typescript</div>);
}export default App;
然后 我們啟動項目 就會發現 干凈了很多