• 作者序 - 陳泓毓
• 前言 - 如何學好前端

推薦書籍 - Zet: React思維進化：一次打破常見的觀念誤解，躍升專業前端開發者 (寫得非常詳細非常好，這是我看過全台灣最讚的關於react的書了)

<aside> ❓

• 什麼是npm?
• 什麼是Node.js/Next.js? </aside>

React 的運作原理

換檔

<aside> 🍔

目錄 - 重點摘錄

</aside>

前人智慧

⚛️前端開發

前端開發

npm install react react-dom //安裝 React 的核心套件

下面為各大章節重點節錄

npm install next //安裝 **Next.js 框架**

第一章 - npm start !

建立自己的React專案!

// 在終端機
cd 要將專案建在哪個資料夾 // 只能在c槽
npx create-next-app 專案名稱 // 不能大寫
//前端專案命名通常會在最後加上-frontend
// 全部按Enter 

// app 檔要刪掉

// 在專案裡面的終端機
npm i sass // 一定要有
npm install
// 下面視情況
npm install react-icons
npm install axios
npm install react-hook-form

• 刪掉app資料夾
• 建立資料夾『pages』
• 建立資料夾『components』
  • 在components中建立資料夾『Hello』
  • 在Hello資料夾中建立index.tsx
    • 匿名函式(補充)

// 具名函式宣告
export default function Hello() {
    return (
        <>
            Hello! React!
        </>
    );
  }

在pages資料夾中建立index.tsx

import Hello from '@/components/Hello/index'

export default function Home() {
    return (
      <Hello />
    );
  }

• 在終端機輸入npm run dev
  • pages 資料夾是做啥的？

在繼續往下之前建議先去學一下JS

JavaScript - Basic

第二章 - React.tsx

export default function 名稱() {
	return (
		<div> content </div> //要寫的東西放在一個標籤內
	)
}

• html 中的 class= 變成 className={styles.XXX}
• scss ‣

<aside> 💡

用{}表示**”變數”**

</aside>

const number = 100;

function handleButtonClick() (
	alert ("clicked!") ;
);

return(
 // **指定屬性值**
	<button onClick={handleButtonClick}> // 點擊觸發handleButtonClick中的事情
		數字變数:{number},表達式:{number*99} //**指定子元素**
	</button>
)

因為html是標籤語言，我們沒辦法對其做互動，所以要透過JS，將該標籤所對應到的事件做連結。