简介
在前端开发中，使用 React 已经成为基本技能，而 TypeScript 也越来越受到欢迎。同时，在后端开发中，Node.js 也是一种非常流行的技术。如果想要结合这些技术进行全栈开发，那么一个好用的框架是必不可少的。
express-tsx 就是一个基于 Node.js 和 React 的框架，它可以方便地进行全栈开发。并且支持开箱即用的 TypeScript 和 hot reload 等功能。在本文中，我们将详细介绍如何使用 express-tsx 进行开发。
安装
使用 npm 安装 express-tsx：
npm install express-tsx
创建项目
使用 express-tsx-cli 可以快速创建 express-tsx 项目。首先，需要安装 express-tsx-cli：
npm install -g express-tsx-cli
然后，可以使用以下命令创建项目：
express-tsx create <project-name>
这将创建一个新的项目，并安装所有必需的依赖。安装完成后，可以使用以下命令启动服务器：
npm start
访问 http://localhost:3000 即可看到项目的默认页面。
路由
express-tsx 支持使用 express 的路由功能，我们可以在 src/server/routes 目录下创建一个路由文件，如 home.tsx，来进行路由配置：
-- -------------------- ---- ------- ------ - ------- -------- -------- - ---- ---------- ----- ---------- - --------- ------------------- ----- -------- ---- --------- -- - ------------------ - ------ ------ --- --- ------ ------- -----------
如上，我们创建了一个 HomeRouter，并为 / 路径设置了一个 GET 请求的处理函数，并使用 res.render 方法渲染了 home 模板。
同时，在 src/server/app.tsx 文件中，需要引入 home 路由：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - ---- - ---- ------- ------ ------ ---- --------------------- ------ ---------- ---- ---------------- ----- --- - ---------- -- --------- ------------ ------------
如上，我们将 HomeRouter 设置为 / 路径的处理函数。现在访问 http://localhost:3000/ 即可看到渲染的 home 模板。
模板
express-tsx 默认使用 handlebars 作为模板引擎，并且支持使用 React 进行模板渲染。可以使用以下命令安装 React 和 react-dom：
npm install react react-dom
在 views 目录下，我们可以创建一个 home.handlebars 文件，并使用以下代码渲染 React 组件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
---- -------------------------
------- ---------------------------------
-------
-------如上，我们在 body 中加入了 div 元素，并设置了 id 为 app，用于渲染 React 组件。同时，在 body 的末尾引入了客户端代码，用于在浏览器中渲染 React 组件。
现在，我们可以在 views 目录下创建一个 home.tsx 文件，并编写一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
---------- ------------
--
--
------ ------- -----在 home.tsx 文件中，我们定义了一个 Home 组件，并将 Hello World! 作为该组件的内容返回。现在，我们需要将该组件渲染到 home.handlebars 文件中。修改 home.tsx 文件如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
---------- ------------
--
--
------ ------- ------- ---- -- -
------ -
------
------
----- --------------- --
----------------------------
-------
------
---- -------------- --------
------- ---------------------------------
-------
-------
--
--如上，我们修改了 home.tsx，将 Home 组件包含在 div 元素中，以 app 为 id。同时，将 props.title 替换 title 元素中的内容。
现在访问 http://localhost:3000/，即可看到页面上显示了 Hello World!。
数据流
express-tsx 支持使用 Redux 进行数据流管理，可以使用以下命令安装 redux 和 react-redux：
npm install redux react-redux
在 src/client 目录下，可以创建一个 store 文件夹，用于存放 Redux 相关的代码。我们可以创建一个 store.ts 文件来定义 Redux 的 store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------- - ------ - --- ------- ---- -- -
------ ------------- -
--------
------ ------
-
--
----- ----- - ---------------------
------ ------- ------如上，我们使用 createStore 方法创建了一个 Redux 的 store，并定义了一个默认的 reducer。接下来，在客户端的代码中，我们可以使用 react-redux 提供的 Provider 组件将 store 应用到整个应用中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- -----------------
-------
--------- --------------
---- --
------------
-------------------------------
--如上，在 index.tsx 文件中，我们使用 Provider 组件包装了 App 组件，并传入了 store。这样，我们就可以在 App 组件中使用 Redux 的状态管理功能。
结语
本文中，我们介绍了 express-tsx 的基本开发方法，包括路由、模板和数据流等方面。通过本文的学习，读者可以更好地掌握 express-tsx 的使用方法，并用它进行全栈开发。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567ef81e8991b448e4164