【实战】从零开始打造一个低代码平台——3、应用布局2

---

对这个系列感兴趣的可以关注订阅专栏：从零开始打造一个低代码平台

前言

前面我们通过改造App.tsx设计了应用的布局，但总不能把整个应用的代码都塞进App.tsx里。这章开始，我们要通过组件的方式重新组织代码，让代码可读性更好，也更方便扩展。

---

一、新的代码结构

先在src下新建一个目录components，这里放置各个组件，然后再把这些组件拼凑成应用。
前面布局的时候我们提到，会有Menu SideBar ToolBar Footer Content这几个部分。我们再进一步将Content分为画布区（Canvas）和属性区（Attrs），再挂上一个WidgetBar。现在我们就为分别为它们创建对应的组件（和文件）并放在components下。以下就是新的代码结构：

├── App.tsx
├── assets
│   └── react.svg
├── components
│   ├── attrs.tsx
│   ├── canvas.tsx
│   ├── content.tsx
│   ├── footer.tsx
│   ├── layout.tsx
│   ├── menu.tsx
│   ├── sidebar.tsx
│   ├── toolbar.tsx
│   └── widgetbar.tsx
├── main.tsx
├── styles
│   └── index.scss
├── styles.css
└── vite-env.d.ts

二、组件化应用

接下来，我们依次创建对应的组件。

2.1 Menu

interface MenuProps {
   
  className?: string;
}

export const Menu: React.FC<MenuProps> = ({
    className }) => {
   
  return <div className={
   `h-10 ${
     className ?? ""}`}></div>;
};

2.2 SideBar

interface SideBarProps {
   
  className?: string;
}

export const SideBar: React.FC<SideBarProps> = ({
    className }) => {
   
  return <div className={
   className ?? ""}></div>;
};

2.3 ToolBar

interface ToolBarProps {
   
  className?: string;
}

export const ToolBar: React.FC<ToolBarProps> = ({
    className }) => {
   
  return <