编写组件

在第一个应用中我们已经运行了一个简单的应用，当然一个应用不可能只有一个App组件。在本章我们就尝试来增加几个组件，做一个相对更漂亮的应用出来。

在这一章，你会了解到如何编写一个纯JavaScript的组件，并了解到reSKRipt在引入模块时的特殊配置和行为。

引入组件库

我们把antd安装上，这可以帮助我们快速地搭建出页面。并且我们把styled-components也给装上，让我们能够快速地写一些样式：

npm install antd styled-components
npm install --save-dev @types/styled-components

把组件从入口移出来

在上一个版本中，我们将App实现在了src/entries/index.tsx中。但这种方式并不是最佳的，入口应该保持精简，避免逻辑的膨胀。所以我们现在打算把App组件移出来作为一个独立的模块。

先建立一个src/components/App/index.tsx文件，当然中间需要创建的目录请自动搞定。在这之后你的目录结构应该类似于（隐去了配置文件们）：

/src
    /components
        /App
            index.tsx # 组件
    /entries
        index.tsx # 主入口文件

然后我们将其中的实现移到App/index.tsx中去：

export default function App() {
    return <h1>Hello World</h1>;
}

之后entries/index.ts只要引入组件就行了：

import {render} from 'react-dom';
import App from '@/components/App';

render(
    <App />,
    document.body.appendChild(document.createElement('div'))
);

你应该注意到引用App组件的路径是@/components/App，你也应该已经理解了，@/是src/的别名，所有src/下的模块都可以用这种形式访问到。这也是reSKRipt唯一的别名。

再加几个组件

我们在App组件的基础上，再来增加几个自定义组件，我们相应创建头部、描述、底部：

/src
    /components
        /App
            index.tsx
        /Header
            index.tsx
        /Description
            index.tsx
        /Footer
            index.tsx

可以随便写一些内容，比如我们这样实现一个Footer组件：

import styled from 'styled-components';
import {Typography} from 'antd';

const Layout = styled`
    position: sticky;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 80px;
    align-items: center;
`;

function Footer() {
    const now = new Date();

    return (
        <Layout>
            <Typography.Text>Copyright {now.getFullYear()} all rights reserved.</Typography.Text>
        </Layout>
    );
}

在上面的代码中，我们使用了styled-components和antd。事实上reSKRipt在这两个第三方库上都有相应的优化，其中styled-components生成的组件会有自动的displayName用于更好地调试，而antd的引用则会被优化精简，不会引入完整的antd代码，可以有效地控制产出的体积。

我们也可以在App中重新引入这些组件组成一个完整的页面：

import Header from '@/components/Header';
import Content from '@/components/Content';
import Footer from '@/components/Footer';

export default function App() {
    return (
        <>
            <Header />
            <Content />
            <Footer />
        </>
    );
}

我们推荐对于src/下第一层的目录内的模块，比如src/components/*，都使用@/的形式引用。这样你在代码位置发生变化的时候，可以尽可能地不需要调整import的相对路径。

调试观察

将应用通过npm start重新运行起来，并打开React的开发者工具，观察在组件树中的组件。

你会发现虽然代码会经过babel转义甚至压缩（当然在开发模式下并不压缩），但在React开发者工具中，依然能看到组件的名称：

▾ App
    ▸ Header
    ▸ Content
    ▸ Footer

这是因为reSKRipt会在编译代码的时候，自动识别出React组件，并为它们加上displayName属性。我们会尽可能地适应不同的组件编写方式，除了高阶组件（HOC）以外，你可以放心地将displayName的声明交给reSKRipt处理，都将给你一个优秀的运行时调试体验。

总结

在本章节中，我们了解到在编写一个组件在reSKRipt的支持下十分容易，不需要关注具体的构建等配置，同时工具提供了以下的能力：

可以使用@/来指代src/作为别名。
推荐最顶层的组件各自有独立的目录，并以src/components/SomeComponent/index.tsx的形式存在。
可以直接使用styled-components，在构建过程中有相应的插件等提供帮助。
引用antd时有相应的优化，会只引入对应的组件，控制包的大小。
reSKRipt会自动声明组件的displayName提升调试体验。

引入组件库​

把组件从入口移出来​

再加几个组件​

调试观察​

总结​

引入组件库

把组件从入口移出来

再加几个组件

调试观察

总结