使用react實現九九乘法表的方法

使用React實現九九乘法表的方法

九九乘法表是學習數學的基礎之一，它不僅幫助我們掌握乘法運算，還能培養邏輯思維能力。在現代前端開發中，React 是一個非常流行的 JavaScript 庫，用于構建用戶界面。本文將介紹如何使用 React 來實現一個簡單的九九乘法表。

1. 創建 React 項目

首先，我們需要創建一個新的 React 項目。如果你還沒有安裝 create-react-app，可以通過以下命令進行安裝：

npm install -g create-react-app

然后，使用以下命令創建一個新的 React 項目：

npx create-react-app multiplication-table

進入項目目錄：

cd multiplication-table

2. 編寫九九乘法表組件

在 src 目錄下創建一個新的組件文件 MultiplicationTable.js，并編寫以下代碼：

import React from 'react';

const MultiplicationTable = () => {
  return (
    <div>
      <h1>九九乘法表</h1>
      <table>
        <tbody>
          {Array.from({ length: 9 }, (_, i) => (
            <tr key={i}>
              {Array.from({ length: i + 1 }, (_, j) => (
                <td key={j}>
                  {`${j + 1} x ${i + 1} = ${(j + 1) * (i + 1)}`}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default MultiplicationTable;

3. 在主應用中引入組件

接下來，我們需要在 src/App.js 中引入并使用這個組件。修改 App.js 文件如下：

import React from 'react';
import MultiplicationTable from './MultiplicationTable';

function App() {
  return (
    <div className="App">
      <MultiplicationTable />
    </div>
  );
}

export default App;

4. 運行項目

現在，我們可以運行項目來查看效果。在項目根目錄下運行以下命令：

npm start

打開瀏覽器并訪問 http://localhost:3000，你將看到一個完整的九九乘法表。

5. 樣式優化

為了讓乘法表看起來更美觀，我們可以添加一些簡單的 CSS 樣式。在 src/App.css 中添加以下樣式：

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

然后在 App.js 中引入這個樣式文件：

import './App.css';

6. 總結

通過以上步驟，我們成功地使用 React 實現了一個簡單的九九乘法表。這個例子展示了如何使用 React 的組件化思想和 JSX 語法來構建動態的 UI。希望這篇文章能幫助你更好地理解 React 的基本用法，并為你的前端開發之旅提供一些啟發。