Skip to content

javascript

nodejs

react

concept

  • JSX: html in js
  • Class Component(早期寫法): 使用 ES6 的 Class 語法來建立
  • Function Component(after Class Component): 比 Class Component 簡潔許多
  • React Hooks: React 16.8 新增的功能，而它主打的就是你不用再寫 class 就可以直接使用 React 相關功能
    • Hooks API Reference – React
    • 使用規則
      • 只能在函式頂層使用
      • 只能用於 Function Component
        • 基於 Function Component 所設計的，因此就只能在 Function Component 中使用，是不能在 Class Components 中使用的
    • React State
      • State Hook
      • useState 函式會回傳一個陣列
        • 使用 陣列解構 取出兩個變數，第一個變數會作為渲染顯示用、單純的資料，第二個則是告知 React 資料有變化，所以要重新 re-render
        • 觸發畫面重新渲染的關鍵 Hook
        • 可以傳入各式各樣的型別
          • 陣列跟物件
    • Side Effect
      • useEffect
        • 主要大多用途都是在於我們畫面 render 之後要做某些事情
          • ex. AJAX 行為、修改 DOM 操作
        • 行為
          • After Ever Render
          • Once
          • On State
        • cleanup function
          • 時機只有在你觸發重新渲染畫面時才會被呼叫一次
          • 適合用於初始化狀態或者清除特定的事件綁定 -使用 Props 將資料往下傳遞, 傳遞太深
      • useContext
        • 主要大多用於跨元件溝通的技巧
        • 只能接受 Context Object
  • 事件處理
    • React 事件處理寫法與與 「Inline events」 有高度的 87% 神似
    • on+[事件名稱]={ 函式 }
  • Component
    • 模組化的概念
    • 巢狀結構
    • Props: Component之間的資料交換
      • 單向數據流
        • OnlyRead (唯讀)

Redux

docker with mui

Dockerfile 

FROM node:latest

RUN npx create-react-app main

WORKDIR /main

RUN yarn add @mui/material @emotion/react @emotion/styled && yarn add @fontsource/roboto && yarn add @mui/icons-material

EXPOSE 3000

ENTRYPOINT ["npm", "start"]

docker-compose.yml ``` yml= version: '3'

services: react-mui: container_name: react-mui build: context: . image: react-mui working_dir: /main ports: - "3000:3000" 

``` bash=
docker build -t react-mui .
docker compose up -d

src/APP.js ``` javascript= import logo from './logo.svg'; import './App.css'; import Board from './Board'; import Notification from './Notification';

function App() { return (

{/
logo

Edit src/App.js and save to reload.

Learn React
/}
); }

export default App; 

src/Board.js
``` javascript=
import React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';

class Board extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        rows: [
          this.createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
          this.createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
          this.createData('Eclair', 262, 16.0, 24, 6.0),
          this.createData('Cupcake', 305, 3.7, 67, 4.3),
          this.createData('Gingerbread', 356, 16.0, 49, 3.9),
        ],
      };
    }

    createData(name, calories, fat, carbs, protein) {
      return { name, calories, fat, carbs, protein };
    }

    handleClick() {
      const rows = this.state.rows.slice();
      rows.push(this.createData('Test', 356, 16.0, 49, 3.9))
      this.setState({rows: rows});
    }

    render() {
        return (
            <TableContainer component={Paper}>
            <Table sx={{ minWidth: 650 }} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Dessert (100g serving)</TableCell>
                  <TableCell align="right">Calories</TableCell>
                  <TableCell align="right">Fat&nbsp;(g)</TableCell>
                  <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                  <TableCell align="right">Protein&nbsp;(g)</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {this.state.rows.map((row) => (
                  <TableRow
                    key={row.name}
                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                  >
                    <TableCell component="th" scope="row">
                      {row.name}
                    </TableCell>
                    <TableCell align="right">{row.calories}</TableCell>
                    <TableCell align="right">{row.fat}</TableCell>
                    <TableCell align="right">{row.carbs}</TableCell>
                    <TableCell align="right">{row.protein}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Button variant="contained" onClick={() => this.handleClick()} >Submit</Button>
          </TableContainer>
        );
      }
}

export default Board;

src/Notification.js ``` javascript= import * as React from 'react'; import Badge from '@mui/material/Badge'; import MailIcon from '@mui/icons-material/Mail';

export default function SimpleBadge() { return ( ); } ```