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. 基本結構

  1. 函數式元件(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 解構的屬性，這些屬性將會被傳入元件
  1. 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
  1. 引入 React 和 useState Hook:
import React, { useState } from 'react'
  • 從 React 包中引入 useState Hook，用於函數式元件中添加狀態。
  1. 使用 useState Hook 定義狀態
const [count, setCount] = useState<number>(0);
  • 定義一個名為 count 的狀態變量，初始值為 0。
  • setCount 是用來更新 count 的函數。
  • useState<number>(0) 指定 count 的類型為 number。
  1. 定義 onClick 事件處理函數:
const onClick = (e: any) => {
    setCount(count + 1);
    console.log(e);
}
  • onClick 是一個事件處理函數，接受一個事件參數 e。
  • 每當按鈕被點擊時， count 會加 1，並且會在控制台輸出事件 e。
  • any 也可被寫成 MounthEvent 或 SyntheticEvent。