咨询：在Reaction Commerce中创建「关于我们」静态页面的完整步骤

Got it, let's break down the exact steps to add a simple static "About Us" page in Reaction Commerce—no extra fluff, just the bare essentials you need beyond what the tutorial mentioned:

Reaction Commerce loads custom pages via plugins, so start by making a minimal plugin folder under your project's imports/plugins/custom/ directory. Name it something like about-us:

imports/plugins/custom/about-us/
├── client/
│   └── components/
│       └── AboutUs.jsx  # Your static page component
├── registry.js           # Route & component registration file
└── package.json          # Plugin identity file (required)

This tiny file tells Reaction your plugin exists. Add just the basics:

{
  "name": "reaction-about-us",
  "version": "1.0.0",
  "description": "Static About Us page",
  "main": "registry.js"
}

Here's where you register the route and link it to your component. I've added an optional (but useful) navigation menu entry:

import { Reaction } from "/server/api";

export default async function register(app) {
  app.registerPlugin({
    label: "About Us",
    name: "reaction-about-us",
    icon: "fa fa-info-circle",
    // Register the route: maps /about-us to your component
    routes: [
      {
        path: "/about-us",
        name: "aboutUs",
        component: "@reactioncommerce/plugin-about-us/client/components/AboutUs.jsx"
      }
    ],
    // Optional: Add "About Us" to the store's main navigation menu
    layout: [{
      layout: "coreLayout",
      workflow: "coreWorkflow",
      collection: "Navigation",
      structure: {
        template: "aboutUs",
        label: "About Us",
        priority: 20, // Lower numbers = appears earlier in the menu
        parent: "main"
      }
    }]
  });
}

This is your actual "About Us" content—simple React component with static text:

import React from "react";
import { Container, Header } from "semantic-ui-react";

const AboutUs = () => (
  <Container className="about-us-page" style={{ padding: "2rem 0" }}>
    <Header as="h1">About Our Store</Header>
    <p>Add your brand story, team details, contact info, or whatever you need here.</p>
    <p>Feel free to add more paragraphs, images, or custom styling—treat it like any regular React component.</p>
  </Container>
);

export default AboutUs;

1. Open your project's root settings.json, and add your plugin to the plugins array:

{
  "plugins": [
    // ...other existing plugins
    {
      "name": "reaction-about-us",
      "enabled": true
    }
  ]
}

2. Restart your Reaction server. Now visit http://localhost:3000/about-us—your static page will load! If you added the navigation config, you'll also see "About Us" in the store's main menu.

Quick Tips #

• Skip the layout section in registry.js if you don't want the page in the navigation menu.
• Customize styling by importing a CSS file into your component or using inline styles—same as any React project.
• Double-check the component path in registry.js: @reactioncommerce/plugin-about-us matches the name field in your package.json, which Reaction uses to resolve the file path.

内容的提问来源于stack exchange，提问作者Wade73