React 的初心者起手式

原文發表於 Medium。

在剛導入React的初期，很多前輩會建議使用像create-react-app這樣的build tools，簡單地在terminal輸入npx create-react-app，一切事情就像魔法一樣自動發生，它就好了！接著進入到剛建立的資料夾中，再次從terminal輸入npm start，那模板網頁中可愛的React Logo就會在瀏覽器中自顧自地旋轉起來。

npx create-react-app my-new-react-app
cd my-new-react-app
npm start

幫create-react-app專案資料夾瘦身

上面的建構方案是很便利。但仔細觀察src這個重要的子資料夾，裏頭卻充滿許多在初期用不上，或者根本就是需要被取代掉的模板文件，這麼多檔案看著眼花花，稍微動一下console又對著我跳出一堆警告。我該要怎麼處理呢？

create-react-app初始設定的資料夾狀態

其實去蕪存菁還滿簡單的，首先下面這些文件你可能用不到：

src/App.test.js //這是測試檔，若後續有需要測試的話可以留著src/logo.svg //這是React的Logo，99.9%用不到，刪吧。src/reportWebVitals.js //WebVitals是Google的網站使用體驗核心指標，這個檔案就是為了回報該指標，如果你不知道那是啥，刪掉應該是正解。src/setupTests.js //test設定檔。

但要注意的是，由於目前支撐整個React運作的主軸index.js與App.js兩個檔案內部依賴上述的幾個檔案運行，所以我們必須將兩個檔案改掉。

首先是index.js修改

將import reportWebVitals以及render以下的部分刪除，若用不上StrictMode的話，也把<React.StrictMode>給刪了。

//index.jsimport React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<App />);

看！就成了一個簡單的檔案，清爽多了吧！

接著修改App.js

將import logo 以及component中所有return內的程式碼都刪除，然後在return後方加入一組<div>

import './App.css';
function App() {
return (
<div >
</div>
);
}
export default App;

若要使用module.css的話，也可以考慮把import ‘./App.css’給刪了，再加上module.css就行了。

大功告成

接下來我們存好修改的檔案後，再次從terminal輸入npm start，你會發現那個在頁面中間旋轉的大東西不見了，整個畫面變得白白的…接下來就靠你把這些空白填滿囉！我們開始創作使用的畫布已經準備好了！

如果您喜歡這篇文章的話，還請跟隨我，我打算從今天開始寫作。

如果您喜歡這篇文章的話，還請跟隨我，我打算從今天開始寫作。