React JS 實作(wallpappers-layout)學習筆記

開發時有些混淆的觀念及一些查詢的資料

2023.09.21

## React 結合 Tailwind

官方說明上建議不適合使用 CRA 開發，因為會無法使用 postCSS，如果是 React 的話建議使用 Next.js

## React 結合 Fontawesome

• 安裝文件
• 對應的 icon 會需要從不同的 Icon Packages 取出，我目前是使用 Indivisual Import

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faImages } from '@fortawesome/free-solid-svg-icons'
import { faFacebookF, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons'
...

<FontAwesomeIcon icon={faInstagram} 

## css text 90 degree rotate

• 參考文件
• 使用 Tailwind 的 rotate

## react import google fonts

• How to use Google fonts in React.js?

2023.09.22

## react font awesome hover

• How to make React <FontAwesomeIcon/> color changed on button hover?
• 文章中有很多方法，但評估過後還是決定單純寫 css 處理

## css br height

• Change <br> height using CSS

## css object-fit

• 用於有明確的高和寬的時候(flex 也可使用)
• mdn object-fit

## react-router-dom link target _blank

• React-Router open Link in new tab

<Link to="route" target="_blank" rel="noopener noreferrer" />

## tailwind decoration underline animation

• Tailwind underline hover animation
• Link Underline Animation

## Outlet context

• useoutletcontext
• 透過 useContext 讓狀態可以被每個元件存取

## useCallback

## Tailwind CSS Spinner — Flowbite

## react cra memo

• [react] 透過 React.memo 避免重新轉譯
• memo
• Day7 — 在認識 useMemo 前，先認識 React.memo