react项目如何使用nest详解

React和Nest可以一起使用，以构建完整的Web应用程序。在这种情况下，React通常用作客户端框架，Nest用作服务器端框架。

使用React和Nest的步骤如下：

1. 创建Nest应用程序
   首先，需要创建一个Nest应用程序。可以使用Nest CLI来创建一个新的Nest应用程序。在命令行中运行以下命令：

npm i -g @nestjs/cli
nest new my-app

这将创建一个名为my-app的新Nest应用程序，并为应用程序设置所有必要的依赖项。

2. 创建React应用程序
   接下来，需要创建一个React应用程序。可以使用create-react-app工具来创建一个新的React应用程序。在命令行中运行以下命令：

npx create-react-app my-app
cd my-app
npm start

这将创建一个名为my-app的新React应用程序，并在http://localhost:3000上启动开发服务器。

3. 创建API端点
   接下来，需要在Nest应用程序中创建API端点，以便React应用程序可以从API中获取数据。在Nest应用程序中，可以使用控制器和服务来创建API端点。例如，可以创建一个名为CatController的控制器，用于获取所有Cat的列表：

import { Controller, Get } from '@nestjs/common';
import { CatService } from './cat.service';

@Controller('cats')
export class CatController {
  constructor(private readonly catService: CatService) {}

  @Get()
  findAll(): string[] {
    return this.catService.findAll();
  }
}

在上面的代码中，CatController使用findAll方法从CatService中获取所有Cat的列表，并将其返回给客户端。

4. 创建React组件
   接下来，需要在React应用程序中创建React组件，以显示从API中获取的数据。例如，可以创建一个名为CatList的组件，用于显示所有Cat的列表：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CatList() {
  const [cats, setCats] = useState([]);

  useEffect(() => {
    axios.get('/cats')
      .then(response => setCats(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <ul>
      {cats.map(cat => (
        <li key={cat}>{cat}</li>
      ))}
    </ul>
  );
}

export default CatList;

在上面的代码中，CatList使用useState hook和useEffect hook从API中获取Cat的列表，并将其呈现在列表中。

5. 将React应用程序部署到Nest应用程序中
   最后，需要将React应用程序部署到Nest应用程序中。可以将React应用程序的生产构建放置在Nest应用程序的public目录中。例如，可以将React应用程序的生产构建放置在Nest应用程序的public/react-app目录中。

在Nest应用程序中，可以使用Express框架的静态文件中间件来为React应用程序提供服务。在app.module.ts文件中，可以添加以下代码：

import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
import { ServeStaticMiddleware } from '@nestjs/serve-static';
import { join } from 'path';
import { CatController } from './cat.controller';
import { CatService } from './cat.service';

@Module({
  imports: [],
  controllers: [CatController],
  providers: [CatService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(ServeStaticMiddleware)
      .forRoutes({ path: 'react-app', method: RequestMethod.GET })
      .apply(ServeStaticMiddleware)
      .forRoutes({ path: '**', method: RequestMethod.GET });
  }
}

在上面的代码中，使用ServeStaticMiddleware中间件为React应用程序提供服务。第一个apply方法用于为/public/react-app路径提供服务，第二个apply方法用于为所有其他路径提供服务。

在完成上述步骤后，可以运行Nest应用程序，并访问http://localhost:3000/react-app来查看React应用程序。补充说明一下，在第4步中，需要在React应用程序中通过axios或fetch等工具从Nest应用程序中获取数据。可以使用Nest中的控制器和服务来创建API端点，以供React应用程序使用。例如，在Nest中创建名为CatController的控制器，用于获取所有Cat的列表：

import { Controller, Get } from '@nestjs/common';
import { CatService } from './cat.service';

@Controller('cats')
export class CatController {
  constructor(private readonly catService: CatService) {}

  @Get()
  findAll(): string[] {
    return this.catService.findAll();
  }
}

在上面的代码中，CatController使用findAll方法从CatService中获取所有Cat的列表，并将其返回给客户端。然后，在React应用程序中可以使用axios或fetch等工具从/api/cats路径获取Cat的列表：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CatList() {
  const [cats, setCats] = useState([]);

  useEffect(() => {
    axios.get('/api/cats')
      .then(response => setCats(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <ul>
      {cats.map(cat => (
        <li key={cat}>{cat}</li>
      ))}
    </ul>
  );
}

export default CatList;

在上面的代码中，使用axios.get方法从/api/cats路径获取Cat的列表，并使用useState hook和useEffect hook管理组件状态。最后，将Cat的列表呈现在列表中。