React + .Net 一、環境設置 Setup 1. 行前準備 Prerequisites 安裝 Node.js 和 npm node -v npm -v 安裝 .NET SDK dotnet --version 用 vs code 下載 ES7+ React/Redux/React-Native snippets 因為 rafce 很好用, 相當於, typescript 則是 tsrafce import React from 'react' const index = () => { return ( <div>index</div> ) } export default index 2. 創建 React 安裝 react npm install create-react-app 創建新的 react app (typescript) --template typescript 可指定使用 typescript npx create-react-app {project} --template typescript cd {project} 必要時可能要初始化一個新的 react 項目，確保版本是匹配的。 yarnpkg add --exact react-dom react-scripts 3. 基本結構 函數式元件(Functional Component): const Card: React.FC<Props> = ({ companyName, ticker, price }: Props): JSX.Element => { ... } Card 是一個函數式元件，使用 TypeScript 和 React。 React.FC<Props> 指定這個元件是接受 Props 作為參數的 React 函數式元件 ({ companyName, ticker, price }) 是從 Props 解構的屬性，這些屬性將會被傳入元件 JSX 標籤: return ( <div className='card'>...</div> ) 這是元件返回的 JSX，它描述了元件應該如何渲染。 4. State import React, { useState } from 'react' type Props = {} const Button: React.FC<Props> = (props: Props): JSX.Element => { const [count, setCount] = useState<number>(0); const onClick = (e: any) => { setCount(count + 1); console.log(e); } return ( <div> <button onClick={(e) => onClick(e)}>Click me</button> <p>You clicked {count} times</p> </div> ) } export default Button 引入 React 和 useState Hook: import React, { useState } from 'react' 從 React 包中引入 useState Hook，用於函數式元件中添加狀態。 使用 useState Hook 定義狀態 const [count, setCount] = useState<number>(0); 定義一個名為 count 的狀態變量，初始值為 0。 setCount 是用來更新 count 的函數。 useState<number>(0) 指定 count 的類型為 number。 定義 onClick 事件處理函數: const onClick = (e: any) => { setCount(count + 1); console.log(e); } onClick 是一個事件處理函數，接受一個事件參數 e。 每當按鈕被點擊時， count 會加 1，並且會在控制台輸出事件 e。 any 也可被寫成 MounthEvent 或 SyntheticEvent。