Vic Lin的沙龍

Getting Started with React Hooks

2021/09/28閱讀時間約 1 分鐘

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

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

$ npx create-react-app my-app

3. 啟動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

為什麼會看到廣告

Vic Lin的沙龍

21會員

161內容數

留言0

查看全部

發表第一個留言支持創作者！

Vic Lin的沙龍的其他內容

JavaScript async/await

上篇介紹的promise chain的寫法，是已經比原本好維護了沒錯，但是可讀性似乎還是有點不足，其實還可以改成用async/await的寫法，如下: E 其中，async是非同步的意思，等於是把getData()這個function定義為非同步，因此從console可以看到，test是最先被pri

#JavaScript #async #await

PHP Null Coalesce Assignment Operator

在PHP 7 版本之前，?: 這種寫法稱為，「Ternary Operator」: $data = isset($data) ? $data : 'hello'; PHP 7 之後，??這種寫法稱為「Null Coalescing Operator」: $data = $data ?? 'hell

#PHP #NullCoalesce #TernaryOperator

Wamp Server Mariadb import

1. $ C:\wamp64\bin\mariadb\mariadb10.6.3\bin\mysql.exe -u username -p --default-character-set=utf8 2. 選擇db: $ use dbname; 3. 匯入資料: $ source c:\xxx.sq

#MySQL #Mariadb

Allowed memory size of xxx bytes exhausted

小弟在寫Laravel cronjob分析資料的時候，發現select某個table的data，dd()都沒任何反應，但如果資料量比較小就可以，後來去看php_error.log才發現下面這段錯誤訊息: PHP Fatal error: Allowed memory size of 1342177

Laravel collection group by sum, concat

Laravel的collection提供了好用的groupby功能，可以做到像在sql中的group by sum, count等等: E 若要做到類似group by concat的功能，可使用$group->pluck('col_name')。本筆記參考: 1. https://stackov

JavaScript async/await

上篇介紹的promise chain的寫法，是已經比原本好維護了沒錯，但是可讀性似乎還是有點不足，其實還可以改成用async/await的寫法，如下: E 其中，async是非同步的意思，等於是把getData()這個function定義為非同步，因此從console可以看到，test是最先被pri

#JavaScript #async #await

PHP Null Coalesce Assignment Operator

在PHP 7 版本之前，?: 這種寫法稱為，「Ternary Operator」: $data = isset($data) ? $data : 'hello'; PHP 7 之後，??這種寫法稱為「Null Coalescing Operator」: $data = $data ?? 'hell

#PHP #NullCoalesce #TernaryOperator

Wamp Server Mariadb import

1. $ C:\wamp64\bin\mariadb\mariadb10.6.3\bin\mysql.exe -u username -p --default-character-set=utf8 2. 選擇db: $ use dbname; 3. 匯入資料: $ source c:\xxx.sq

#MySQL #Mariadb

Allowed memory size of xxx bytes exhausted

小弟在寫Laravel cronjob分析資料的時候，發現select某個table的data，dd()都沒任何反應，但如果資料量比較小就可以，後來去看php_error.log才發現下面這段錯誤訊息: PHP Fatal error: Allowed memory size of 1342177

Laravel collection group by sum, concat

Laravel的collection提供了好用的groupby功能，可以做到像在sql中的group by sum, count等等: E 若要做到類似group by concat的功能，可使用$group->pluck('col_name')。本筆記參考: 1. https://stackov

你可能也想看

Google News 追蹤

方格子 vocus 官方沙龍

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

11/20 NVDA財報前Preview, 財報前股價波動走勢觀察

11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從

#美股 #美股投資 #投資理財

維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比

Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。曾經，我的保養程序簡單到只包括清潔和隨意上乳液

#保養 #產品 #分享

嚕嚕去去去美國

【美國交換日記】Getting Jet Lag

2023/08/24 時差轟炸遺失行李、跟新朋友呷奔

#美國 #美國大學 #交換

每日英語 #083: Getting More Tips

Getting More Tips

#ESLPOD #用英語

陳子楹✦／愛書人的閱讀室／

樂讀｜衝突歸零．Getting to Zero

人際之間的衝突對我來說是一件讓頭皮非常發麻的事情，尤其是高衝突，我肯定先逃再說。（關於高衝突的解釋可見《修復關係的正向衝突》的讀後心得）

#陳子楹 #樂讀 #閱讀

易漢倫的沙龍

《為婚姻做準備》 (Getting Ready For Marriage) 翻譯：第一章 I

那些認為「墜入愛河」是婚姻唯一根基的夫妻，常常會在感覺消退的時候選擇離婚。他們認為他們失去婚姻是因為他們失去了對彼此的感覺。以感覺作為根基的婚姻，注定以離婚收場。

#情感 #婚姻

Blue工程師，上班不寫方格子

英文練習-Getting a Good Night's Sleep 如何擁有好睡眠?

如何擁有好睡眠

Duolala的沙龍

First priority after getting away the work

First priority after getting away the work

方格子 vocus 官方沙龍

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

11/20 NVDA財報前Preview, 財報前股價波動走勢觀察

11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從

#美股 #美股投資 #投資理財

維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比

Hi 大家好，我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。曾經，我的保養程序簡單到只包括清潔和隨意上乳液

#保養 #產品 #分享

嚕嚕去去去美國

【美國交換日記】Getting Jet Lag

2023/08/24 時差轟炸遺失行李、跟新朋友呷奔

#美國 #美國大學 #交換

每日英語 #083: Getting More Tips

Getting More Tips

#ESLPOD #用英語

陳子楹✦／愛書人的閱讀室／

樂讀｜衝突歸零．Getting to Zero

人際之間的衝突對我來說是一件讓頭皮非常發麻的事情，尤其是高衝突，我肯定先逃再說。（關於高衝突的解釋可見《修復關係的正向衝突》的讀後心得）

#陳子楹 #樂讀 #閱讀

易漢倫的沙龍

《為婚姻做準備》 (Getting Ready For Marriage) 翻譯：第一章 I

那些認為「墜入愛河」是婚姻唯一根基的夫妻，常常會在感覺消退的時候選擇離婚。他們認為他們失去婚姻是因為他們失去了對彼此的感覺。以感覺作為根基的婚姻，注定以離婚收場。

#情感 #婚姻

Blue工程師，上班不寫方格子

英文練習-Getting a Good Night's Sleep 如何擁有好睡眠?

如何擁有好睡眠

Duolala的沙龍

First priority after getting away the work

First priority after getting away the work