React 完全進階攻略

本課程主要介紹如何設定 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 打包操作方法。