Vic Lin的沙龍

Getting Started with React Hooks

更新於 2024/09/27發佈於 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 追蹤

VK科技閱讀時間

美股定期定額從國泰世華 CUBE App 輕鬆開始

*合作聲明與警語：本文係由國泰世華銀行邀稿。證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科

#國泰世華 #美股 #定期定額

嚕嚕去去去美國

【美國交換日記】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

VK科技閱讀時間

美股定期定額從國泰世華 CUBE App 輕鬆開始

*合作聲明與警語：本文係由國泰世華銀行邀稿。證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科

#國泰世華 #美股 #定期定額

嚕嚕去去去美國

【美國交換日記】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