React+Express+TS+Docker：零到一的全栈项目

好的，请看这篇博文：

1. 项目初始化

首先，使用 create-react-app 创建一个 React 项目：

npx create-react-app my-app

然后，安装 Express 和 TypeScript：

npm install express typescript --save

接下来，创建一个 tsconfig.json 文件，并添加如下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

最后，将项目中的所有 .js 文件重命名为 .tsx 文件。

2. 本地开发

在项目根目录下，创建一个 server.ts 文件，并添加如下内容：

import express from 'express';

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

在项目根目录下，创建一个 package.json 文件，并添加如下内容：

{
  "scripts": {
    "start": "concurrently \"npm run start:client\" \"npm run start:server\"",
    "start:client": "react-scripts start",
    "start:server": "ts-node server.ts"
  }
}

然后，运行以下命令启动项目：

npm run start

现在，你就可以在浏览器中访问 http://localhost:3000 来查看项目了。

3. 测试

在项目根目录下，创建一个 test 文件夹，并在其中创建一个 App.test.tsx 文件，并添加如下内容：

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

然后，运行以下命令来运行测试：

npm test

4. Docker 部署

在项目根目录下，创建一个 Dockerfile 文件，并添加如下内容：

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD npm run start

然后，运行以下命令来构建 Docker 镜像：

docker build -t my-app .

最后，运行以下命令来运行 Docker 容器：

docker run -p 3000:3000 my-app

现在，你就可以在浏览器中访问 http://localhost:3000 来查看项目了。