Vite + React + TS 构建应用程序：从入门到实践

2024-01-02 20:05:41

好的，以下是博文内容，希望您喜欢：

在第一部分中，我们学习了如何配置一个 Vite + React + TS 的项目。在本部分中，我们将开始编写一些代码来构建一个简单的应用程序。

首先，让我们创建一个新的 React 组件。在 src 目录下创建一个名为 MyComponent.tsx 的文件，并在其中输入以下代码：

import React from "react";

const MyComponent = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
};

export default MyComponent;

然后，让我们在 App.tsx 文件中导入这个组件并将其渲染到页面上：

import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;

现在，我们可以运行 Vite 来启动开发服务器，并访问 http://localhost:3000 来查看我们的应用程序。您应该会看到一个页面，其中包含一个带有 "Hello World!" 文本的 <div> 元素。

接下来，让我们添加一些交互性。在 MyComponent.tsx 文件中，让我们创建一个名为 count 的状态变量，并使用 useState 钩子来初始化它：

import React, { useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello World!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;