在这个章节中，我们将一步步地创建并运行第一个 Preact 应用程序。我们将会从安装必要的依赖开始，然后通过几个简单的步骤来构建我们的应用程序。
创建项目
首先，我们需要创建一个新的项目文件夹。你可以选择使用命令行工具来创建这个文件夹，也可以直接在你的开发环境中创建它。这里，我们假设你已经熟悉了基本的命令行操作。
mkdir my-preact-app cd my-preact-app
接下来，初始化一个新的 npm 项目：
npm init -y
这会生成一个 package.json 文件，用来记录项目的依赖和其他配置信息。
安装 Preact 和其他依赖
为了使用 Preact，我们需要安装 Preact 以及它的配套库。这里我们还会安装 preact-cli 来帮助我们更方便地设置开发环境。
npm install preact npm install --save-dev preact-cli
初始化 Preact 应用
现在我们可以利用 preact-cli 来初始化我们的 Preact 应用。在项目根目录下运行以下命令：
npx preact create default .
这条命令会创建一些基础文件和文件夹，包括 public、src 等，同时也会在 package.json 中添加一些脚本命令，比如 start 和 build。
编写第一个组件
在 src 文件夹中，你会找到一个名为 index.js 的文件。这是我们的入口文件。在这个文件中，我们可以看到一个简单的组件定义和渲染逻辑。
让我们来修改这个文件，创建一个自定义组件。打开 src/index.js 并替换其内容如下：
import { h, render } from 'preact';
import HelloWorld from './HelloWorld';
render(<HelloWorld />, document.body);然后，在同一个目录下创建一个新文件 HelloWorld.js，并在其中编写如下代码：
-- -------------------- ---- -------
------ - - - ---- ---------
----- ---------- - -- -- -
-----
---------- ------------
------
--
------ ------- -----------这段代码定义了一个名为 HelloWorld 的组件，它会渲染一个包含欢迎消息的 <div> 元素。
运行应用
最后一步是运行我们的应用。回到命令行，确保你在项目根目录下，然后执行：
npm start
这将启动一个本地服务器，并自动打开浏览器窗口显示你的应用。你应该能看到一个显示“Hello, Preact!”的消息的页面。
恭喜！你刚刚完成了第一个 Preact 应用的创建。接下来，我们可以进一步探索更多关于 Preact 的特性和功能，如状态管理、生命周期方法等。