19、使用组件架构构建和编译前端应用

使用组件架构构建和编译前端应用

1. 组件架构构建应用

在前端开发中，组织文件是一项挑战，尤其是 HTML、CSS 和 JavaScript 代码，因为它们由不同语言和文件类型组成。传统上，开发者按文件类型分离文件，根目录包含 css、js、img 等目录。这种方式虽有良好意图，将不同关注点分离，但实际上各部分并非真正独立。例如，除全局样式外，CSS 是为特定标记设计的，若标记移除，相关 CSS 可能仍存在，占用空间。

随着开发工具的改进，组件架构模式应运而生。组件架构将相关代码组合到单个目录，通过逐个添加组件构建网页或应用。

组件架构并非特定于 React，可应用于多种框架。以下通过构建版权声明组件和带图标按钮组件来展示组件架构的工作方式。

1.1 版权声明组件

版权声明组件包含当前年份、版权声明和样式。以下是示例代码：

// architecture/component/simplifying-js-component/src/components/Copyright/Copyright.js
import React from 'react';
import './Copyright.css';
export default function CopyrightStatement() {
  const year = new Date().getFullYear();
  return (
    <div className="copyright">
      Copyright {year}
    </div>