React 完全進階攻略

React.js 是近年來非常熱門的技術，許多知名公司如 Disney+ 和 Netflix 也在使用它。React.js 的 Virtual DOM 技術可以提升網站效能，並統一開發框架，讓前端專注於 JavaScript、HTML 與 CSS，而後端則負責資料處理和透過 API 與前端溝通。然而，在開發時需要注意過度使用虛擬 DOM 可能會導致效能問題。本課程旨在幫助學生深入了解 JavaScript 和 React.js 相關技術，以滿足市場上的需求並掌握相關技能。

本章節將教你如何在本機開發 React 專案。首先，需確認已安裝 Node.js，並輸入 node -v 確認版本是否正確。接著，安裝 React 官方推出的 command line 工具 create-react-app，可輸入 npx create-react-app myapp 建立專案（其中 myapp 為專案名稱）。完成後，在終端機中輸入 npm start 啟動專案，在瀏覽器中打開 localhost:3000 即可查看。 通常我們把原始碼放在 src 資料夾底下，而 public 資料夾則是所有公開的資源。在前端開發中，start 這個 script 名稱用來啟動程式碼；build 則用來做打包的動作。除此之外還有一些不常用的指令如 task 和 eject。 最後提到了 node_modules 資料夾：它存放本機開發所需 module 不需要上傳到正式站上面。另外也會學習到使用 npm run build 命令編譯原始碼、包含 JavaScript 和 CSS 檔案等相關知識。

本課程主要介紹如何設定 VS Code。 在本課程中，我們會提供範例檔案。example 資料夾包含完成的程式碼，而 study 資料夾則是讓學生自行練習的地方。在開始開發之前，我們需要安裝幾個必要的 VS Code Extension，包括 ESLint、TodoTree、JavaScript ES6 Code Snippet 以及針對 React 的 snippets。這些 Extension 可以統一 Coding Style 並提供快速鍵。安裝完 Extension 後，便可根據範例檔案進行練習。如果遇到缺少 node_modules 資料夾的情況，在 VS Code 中啟動終端機後輸入 npm install 即可安裝相關套件。 此外，在本課程中還會教授如何驗證 ESLint 是否已成功安裝並設定 VS Code 在存檔時自動修正程式碼等技巧。最後，我們也會介紹其他有用的 Extension ，使得開發更加便利。

在本課程中，我將教授 JavaScript和React.js。在開始之前，我想介紹一個方便的工具 — HTML Emmet。它可以幫助我們更輕鬆地開發HTML。例如，在VSCode中輸入 “div.foo”，然後按Tab鍵，就會自動生成該 div 和 class name。同樣地，使用“#myid”可以生成ID，“span.react”則可生成自定義類別。 對於React.js，啟用此功能需要進行額外的設置。完成設置後，在React.js頁面上也能使用此功能。我認為這是一項非常方便的開發工具，希望大家都能善加利用。

本課程主要介紹 JavaScript 的 import/export 模組和 React.js 的打包方式。在 ES6 module 中，我們可以使用 import 和 export 將共用的模組封裝起來，並可供其他人使用。此外，export default 關鍵字可預設一個變數或函式作為輸出。透過 export 關鍵字，在 JS 檔案中將變數或函式輸出後，其他檔案即可透過 import 取用它們。當使用 import 時，若需取用 export default 變數則無需加上大括號；而若需要取用 export 變數時則必須加上大括號。 React.js 也支援 import/export 模組並能透過 Webpack 做打包動作。在前一章節中已完成環境設定及安裝 VS Code Extension 。本章節將介紹如何使用 JavaScript ES6 Module 模組以及基礎的 Webpack 打包操作方法。