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 更改代碼如下

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;

然后 我們啟動項目 就會發現 干凈了很多
在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/37606.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/37606.shtml
英文地址,請注明出處:http://en.pswp.cn/news/37606.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

響應式設計是什么?怎么學習? - 易智編譯EaseEditing

響應式設計是一種用于創建能夠適應不同設備和屏幕尺寸的網站和應用程序的設計方法。它的目標是確保網站在各種設備上都能提供良好的用戶體驗&#xff0c;無論是在大屏幕的桌面電腦上還是在小屏幕的移動設備上。 在響應式設計中&#xff0c;頁面的布局、字體、圖像和其他元素會…

【yml文件的解釋】

目錄 一、yml的簡介二、手寫yml文件進行配置三、使用yaml格式導出生成模板四、deployment.yaml文件詳解五、Pod yaml文件詳解六、Service yaml文件詳解 一、yml的簡介 Kubernetes 支持 YAML 和 JSON 格式管理資源對象 JSON 格式&#xff1a;主要用于 api 接口之間消息的傳遞 Y…

路由器和交換機的區別

交換機和路由器的區別 交換機實現局域網內點對點通信&#xff0c;路由器實現收集發散&#xff0c;相當于一個獵頭實現的中介的功能 路由器屬于網絡層&#xff0c;可以處理TCP/IP協議&#xff0c;通過IP地址尋址&#xff1b;交換機屬于中繼層&#xff0c;通過MAC地址尋址(列表)…

護眼燈值不值得買?什么護眼燈對眼睛好

想要選好護眼臺燈首先我們要知道什么是護眼臺燈&#xff0c;大的方向來看&#xff0c;護眼臺燈就是可以保護視力的臺燈&#xff0c;深入些講就是具備讓燈發出接近自然光特性的光線&#xff0c;同時光線不會傷害人眼而出現造成眼部不適甚至是視力降低的照明設備。 從細節上看就…

【數據結構】二叉樹篇|『構造二叉樹』刷題

博主簡介&#xff1a;努力學習的22級計算機科學與技術本科生一枚&#x1f338;博主主頁&#xff1a; 是瑤瑤子啦每日一言&#x1f33c;: 所謂自由&#xff0c;不是隨心所欲&#xff0c;而是自我主宰。——康德 目錄 一、前言二、刷題1、最大二叉樹2、從前序與中序遍歷序列構造二…

怎么使用手機遠程控制Win10電腦?

可以使用手機遠程控制電腦嗎&#xff1f; “近期&#xff0c;我將出差一段時間。問題是&#xff0c;我希望能夠從很遠的地方瀏覽家里電腦上的一些東西&#xff0c;但我不會一直隨身攜帶笨重的筆記本電腦。我可以手機遠程訪問Windows電腦嗎&#xff1f; ” 當然&am…

SpringBoot請求響應

簡單參數 1. 原始方式獲取請求參數 Controller方法形參中聲明httpServletRequest對象 調用對象的getParameter參數名 RestController public class RequestController {RequestMapping("/simpleParam")public String simpleParam(HttpServletRequest request){Strin…

Pytorch源碼搜索與分析

PyTorch的的代碼主要由C10、ATen、torch三大部分組成的。其中&#xff1a; C10 C10&#xff0c;來自于Caffe Tensor Library的縮寫。這里存放的都是最基礎的Tensor庫的代碼&#xff0c;可以運行在服務端和移動端。PyTorch目前正在將代碼從ATen/core目錄下遷移到C10中。C10的代…

12-數據結構-數組、矩陣、廣義表

數組、矩陣、廣義表 目錄 數組、矩陣、廣義表 一、數組 二.矩陣 三、廣義表 一、數組 這一章節理解基本概念即可。數組要看清其實下標是多少&#xff0c;并且二維數組&#xff0c;存取數據&#xff0c;要先看清楚是按照行存還是按列存&#xff0c;按行則是正常一行一行的去讀…

學習Vue:slot使用

在Vue.js中&#xff0c;組件高級特性之一是插槽&#xff08;Slots&#xff09;。插槽允許您在父組件中插入內容到子組件的特定位置&#xff0c;從而實現更靈活的組件復用和布局控制。本文將詳細介紹插槽的使用方法和優勢。 什么是插槽&#xff1f; 插槽是一種讓父組件可以向子…

AIF360入門教學

1、AIF360簡介 AI Fairness 360 工具包(AIF360)是一個開源軟件工具包&#xff0c;可以幫助檢測和緩解整個AI應用程序生命周期中機器學習模型中的偏見。在整個機器學習的過程中&#xff0c;偏見可能存在于初始訓練數據、創建分類器的算法或分類器所做的預測中。AI Fairness 360…

OPENCV C++(十一)

鼠標響應函數 //鼠標響應函數 void on_mouse(int EVENT, int x, int y, int flags, void* userdata) {Mat hh;hh *(Mat*)userdata;switch (EVENT){case EVENT_LBUTTONDOWN:{vP.x x;vP.y y;drawMarker(hh, vP, Scalar(255, 255, 255));//circle(hh, vP, 4, cvScalar(255, 255…

人工智能在監控系統中的預測與優化:提升效率和響應能力

引言&#xff1a;人工智能的發展給監控系統帶來了新的可能性&#xff0c;通過分析歷史監控數據和其他相關數據&#xff0c;人工智能可以預測未來可能發生的事件&#xff0c;如交通擁堵、安全隱患等&#xff0c;并幫助優化監控系統的配置和資源分配。這種預測和優化的能力可以提…

2023年國賽數學建模思路 - 復盤:校園消費行為分析

文章目錄 0 賽題思路1 賽題背景2 分析目標3 數據說明4 數據預處理5 數據分析5.1 食堂就餐行為分析5.2 學生消費行為分析 建模資料 0 賽題思路 &#xff08;賽題出來以后第一時間在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 賽題背景 校園一卡通是集…

vue3表格,編輯案例

index.vue <script setup> import { onMounted, ref } from "vue"; import Edit from "./components/Edit.vue"; import axios from "axios";// TODO: 列表渲染 const list ref([]); const getList async () > {const res await ax…

6.2.0在線編輯:GrapeCity Documents for Word (GcWord) Crack

GrapeCity Word 文檔 (GcWord) 支持 Office Math 函數以及轉換為 MathML GcWord 現在支持在 Word 文檔中創建和編輯 Office Math 內容。GcWord 中的 OMath 支持包括完整的 API&#xff0c;可處理科學、數學和通用 Word 文檔中廣泛使用的數學符號、公式和方程。以下是通過 OMa…

無法在 macOS Ventura 上啟動 Multipass

異常信息 ? ~ sudo multipass authenticate Please enter passphrase: authenticate failed: Passphrase is not set. Please multipass set local.passphrase with a trusted client. ? ~ multipass set local.passphrase Please enter passphrase: Please re-enter…

大語言模型LLM的一些點

LLM發展史 GPT模型是一種自然語言處理模型,使用Transformer來預測下一個單詞的概率分布,通過訓練在大型文本語料庫上學習到的語言模式來生成自然語言文本。 GPT-1(117億參數),GPT-1有一定的泛化能力。能夠用于和監督任務無關的任務中。GPT-2(15億參數),在生成方面表現出很…

vue自定義指令--動態參數綁定

在企業微信側邊欄應用中&#xff0c;給dialog添加了拖拽功能&#xff0c;但是因為dialog高度超過了頁面高度&#xff0c;所以高度100%時拖拽有個bug--自動貼到窗口頂部而且企業側邊欄寬高都有限制&#xff0c;拖拽效果并不理想&#xff0c;所以就想縮小dialog再進行拖拽。 拖拽…

IntelliJ IDEA和Android studio怎么去掉usage和作者提示

截止到目前我已經寫了 600多道算法題&#xff0c;其中部分已經整理成了pdf文檔&#xff0c;目前總共有1000多頁&#xff08;并且還會不斷的增加&#xff09;&#xff0c;大家可以免費下載 下載鏈接&#xff1a;https://pan.baidu.com/s/1hjwK0ZeRxYGB8lIkbKuQgQ 提取碼&#xf…