Getting Started with React Hooks

Create React App 提供了快速建立React App環境的方法:

1. 安裝node.js
2. 建立React project:

$ npx create-react-app my-app

$ cd my-app
$ npm start

npm start之後即打開http://localhost:3000/網頁，每次修改都會直接refresh網頁.若是用VSCode開發, 直接從NPM Scripts用按的也很方便。
上線時使用npm run build，然後把build資料夾下的所有檔案丟到server即可。

App.js:

App.css:

最後build出來的class name如下:

將App.css改成App.module.css:

好處是在不同檔案的css class name可以取成一樣，不用擔心會有衝突，因為最後build出來的class name會編譯成不重複的名稱。

Note:

• 這是用React Hook的寫法(function component)，比class component的寫法簡潔許多。
• 若是從git上剛clone下來，記得下npm install安裝相關的dependencies。

本筆記參考:
1. https://zh-hant.reactjs.org/docs/create-a-new-react-app.html
2. https://michaelceber.medium.com/how-to-setup-and-use-css-modules-in-react-with-webpack-7f512b946ae0