react - 3. 添加第一个页面

添加 pages 目录并在其中创建 home 文件夹，并实现 index.tsx 的简单内容，按照以下步骤进行操作：

步骤 1：创建目录和文件

在项目的 src 目录下创建 pages 目录，并在其中创建 home 文件夹。然后，在 home 文件夹中创建 index.tsx 文件。

src/
├── pages/
│   └── home/
│       └── index.tsx
├── App.tsx
├── main.tsx
└── ...

步骤 2：实现简单内容

打开 src/pages/home/index.tsx 文件，并添加以下内容：

function Home() {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
      <p>This is a simple content.</p>
    </div>
  )
}
​
export default Home

这个简单的组件会显示一个标题和一个段落。

步骤 3：在 App.tsx 中引入 Home

打开 src/App.tsx 文件，并按照以下方式引入 Home 组件：

import React from 'react';
import Home from './pages/home';
​
const App: React.FC = () => {
  return (
    <div>
      <Home />
    </div>
  );
};
​
export default App;

总结

通过以上步骤，你已经成功地创建了 pages 目录，并在其中添加了 home 文件夹和 index.tsx 文件。在 index.tsx 文件中，你实现了一个简单的内容。然后，在 App.tsx 文件中引入了 HomePage 组件。现在，当你运行应用时，HomePage 组件将会被渲染并显示在页面上。你可以根据需要继续在 HomePage 组件中添加更多内容和功能。