React组件开发：从基础到页面集成

### React 组件开发：从基础到页面集成 #### 1. 项目配置与目标 首先，我们需要对项目进行配置，以下是 `.eslintrc.js` 文件的配置内容： ```javascript module.exports = { parser: "@typescript-eslint/parser", extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended", ], env: { browser: true, es6: true, amd: true, }, parserOptions: { ecmaVersion: 2018, sourceType: "module", }, } ``` 我们的目标是使用 React 来控制音乐会展示页面中的座位网格部分。当前该页面是一个 HTML 表格，包含座位网格和一个下拉菜单用于选择票数。 以下是 HTML 表格的代码： ```erb <table class="table"> <tbody> <% @concert.venue.rows.times do |row| %> <tr> <% @concert.venue.seats_per_row.times do |seat| %> <% ticket = @concert.find_ticket_at( row: row + 1, number: seat + 1 ) %> <td> <%= link_to(ticket_path(ticket.id), method: :patch) do %> <div class="<%= ticket.color_for(current_user) %> p-4 m-2 border-black border-4 button hover:bg-blue-300 text-lg"> <%= seat + 1 %> </div> <% end %> </td> <% end %> </tr> <% end %> </tbody> </table> ``` #### 2. 创建第一个组件 - Seat 组件 我们将从最内层的组件开始，即 Seat 组件。所有的 React 组件都放在 `app/packs/components` 目录下。以下是 Seat 组件的代码： ```typescript import * as React from "react" interface SeatProps { seatNumber: number } const Seat = (props: SeatProps): React.ReactElement => { return ( <td> <span className="p-4 m-2 border-black border-4 button hover:bg-blue-300 text-lg"> {props.seatNumber + 1} </span> </td> ) } export default Seat ``` 这里使用了 JSX 语法，它是 JavaScript 的扩展，允许在 JavaScript 或 TypeScript 代码中包含类似 HT