参考之前的react页面代码和sys_dye表构建一个新react页面

好的，首先我们需要先创建一个新的React项目。可以使用create-react-app工具快速创建一个新项目，具体步骤如下：

1. 打开终端，进入到你想要创建项目的目录中。
2. 运行以下命令安装create-react-app工具：

npm install -g create-react-app

3. 运行以下命令创建新项目：

create-react-app my-app

4. 进入新创建的my-app目录：

cd my-app

5. 运行以下命令启动React应用：

npm start

现在我们已经成功创建了一个新的React项目。

下面我们来参考之前的react页面代码和sys_dye表构建一个新的React页面。我们需要完成以下步骤：

1. 创建一个新的组件，比如叫做SysDyePage。
2. 在SysDyePage组件中使用React的生命周期函数，在组件挂载时从后端获取sys_dye表的数据。
3. 在组件中渲染表格，并将sys_dye表的数据填充到表格中。

下面是具体的代码实现：

1. 创建SysDyePage组件，可以在src目录下新建一个SysDyePage.js文件，代码如下：

import React, { Component } from 'react';

class SysDyePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dyes: [],
    };
  }

  componentDidMount() {
    fetch('/api/sys_dye')
      .then(response => response.json())
      .then(data => {
        this.setState({ dyes: data });
      });
  }

  render() {
    return (
      <div>
        <h1>Sys Dye Table</h1>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Color</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {this.state.dyes.map(dye => (
              <tr key={dye.id}>
                <td>{dye.id}</td>
                <td>{dye.name}</td>
                <td style={{ backgroundColor: dye.color }}>{dye.color}</td>
                <td>{dye.description}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default SysDyePage;

2. 在App.js中引入SysDyePage组件，并将其放置在路由中。可以在App.js中添加以下代码：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import SysDyePage from './SysDyePage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/sys_dye">Sys Dye</Link>
            </li>
          </ul>
        </nav>

        <Route path="/sys_dye" component={SysDyePage} />
      </div>
    </Router>
  );
}

export default App;

3. 启动React应用，在浏览器中访问http://localhost:3000/sys_dye即可看到sys_dye表的数据已经被渲染到页面中了。

以上就是参考之前的react页面代码和sys_dye表构建一个新react页面的具体步骤。