• 1 React 實作
• 2 需求
• 3 做法既考慮因素
• 4 介面設計
• 5 動手寫
  • 5.1 用 Create-React-App 建立 project
  • 5.2 寫 React code
    • 5.2.1 Calculator
    • 5.2.2 CalculatorButton
    • 5.2.3 令 Calculator 使用 CalculatorButton
    • 5.2.4 修改算式
    • 5.2.5 運算答案
  • 5.3 為 IE 瀏覽器 polyfill
• 6 成果
• 7 心得
  • 7.1 JSX 語法、Babel、Webpack
  • 7.2 Can I use

• 如果用 Java 寫
  • 一係就 command line，用 Scanner 讀取 user input，冇介面既 calculator 就有啲怪
  • 一係就用 Swing、JavaFX 等等既 GUI framework 黎寫，有埋介面
    • 我以前寫過唔少 JavaFX 既程式
    • 但係鑑於 JavaFX 要 customize 得個介面靚係唔會比 HTML+CSS 易寫
• 如果用 web 寫
  • 介面容易寫，CSS customize layout 又唔難
  • React
    • 有 one-way binding
    • 用 Create-React-App 生成一個 React template 出黎改，好方便
    • 如果有需要，可以裝 npm packages
    • 而家寫 React app 有曬 hot reloading，就算手動 refresh 都快過 Java
• 做法
  • 最 basic 既 calulator 係冇算式，每次只係將兩個數用一個 operator（加減乘除）運算出結果
  • 好啲既做法係用戶 append 數字同 operators 落一條 equation 度，個 equation 支援好幾個數，中間有好幾個 operators（加減乘除，甚至括號）
    • 時間有限，唔想寫 algorithm（queue、FIFO）
    • 最簡單就係 pass 成條 calculator 算式既 string 畀個 programming language 自己計
    • 舊版 Java 有 Nashorn JavaScript engine，不過 Java 15 移除左，所以如果將來用新版 Java，呢啲 code 可能會用唔到。雖然我用 Java 8，但最好都係唔寫比較好
    • JavaScript 有 eval() function，我地 calculator 限制數字同幾個 operators，所以唔會有其他人所講既 security risk
  • 用邊個 programming language 以及方法，都一樣會有浮點問題（0.1 + 0.2 唔等於 0.3 而係等於 0.30000000000000004），所以最後都係考慮返易唔易寫、UX、功能數量

1       3
2     1+2
3AC ( ) ⌫
4 7 8 9 ÷
5 4 5 6 ×
6 1 2 3 −
7  0  . +

create-react-app calculator

npm start

• src
  • /components
    • /Calculator
      • index.css
      • index.js
    • /CalculatorButton
      • index.css
      • index.js
  • App.css
  • App.js
  • index.css
  • index.js

1function Calculator(props) {
2    return <></>;
3}
4
5export default Calculator;
6export { Calculator };

1<table>
2    <thead>
3        <tr>
4            <th colSpan={4}>Output</th>
5        </tr>
6    </thead>
7    <tbody>
8        <tr>
9            <td colSpan={4}>Equation</td>
10        </tr>
11        <tr>
12            <td>AC</td>
13            <td>(</td>
14            <td>)</td>
15            <td>⌫</td>
16        </tr>
17        <tr>
18            <td>7</td>
19            <td>8</td>
20            <td>9</td>
21            <td>÷</td>
22        </tr>
23        <!-- 等等 -->
24    </tbody>
25</table>

1table {
2    border-collapse: collapse;
3    border: 1px solid gray;
4}
5
6th,
7td {
8    padding: 8px;
9    text-align: center;
10    width: 2em;
11    line-height: 1.75em;
12    border: 1px solid gray;
13}

1function CalculatorButton(props) {
2    const { children, ...rest } = props;
3
4    return (
5        <td className="calculator-button" {...rest}>
6            {children}
7        </td>
8    );
9}
10
11export default CalculatorButton;
12export { CalculatorButton };

import { CalculatorButton } from "../CalculatorButton";

const handleClick = (e) => {
    console.log(e);
};

<td>1</td>

<CalculatorButton onClick={(e) => handleClick("1")}>1</CalculatorButton>

import { useState } from "react";

const [equation, setEquation] = useState("0");

setEquation(equation + e);

<CalculatorButton onClick={() => handleClickAC()}>AC</CalculatorButton>

const handleClickAC = () => {
    console.log("AC is clicked!");
    setEquation("0");
};

<CalculatorButton onClick={() => handleClickBackspace()}>⌫</CalculatorButton>

const handleClickBackspace = () => {
    console.log("Backspace is clicked!");
    setEquation(equation.substring(0, equation.length - 1));
};

const [output, setOutput] = useState("0");

import { useState, useEffect } from "react";

1useEffect(() => {
2    try {
3        setOutput(eval(equation.replace(/−/g, "-")
4                               .replace(/×/g, "*")
5                               .replace(/÷/g, "/")));
6    } catch (err) {
7        // do nothing
8    }
9}, [equation]);

npm i react-app-polyfill

1"browserslist": {
2    "production": [
3        ">0.2%",
4        "not dead",
5        "not op_mini all",
6        "ie 11"
7    ],
8    "development": [
9        "last 1 chrome version",
10        "last 1 firefox version",
11        "last 1 safari version",
12        "ie 11"
13    ]
14}

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

Browsers don't understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood.

• blockquote（HTML tag）
• draggable（HTML attribute）
• user-select（CSS property）
• ::before（CSS selector）
• Array.filter（JavaScript API）