用 React 和 TypeScript 重塑 Angular 英雄之旅：一步步指南

Angular 英雄之旅的 React 重塑

Angular 的英雄之旅教程是一个广受欢迎的资源，它向开发人员展示了如何使用 Angular 构建一个基本的 CRUD（创建、读取、更新和删除）应用程序。在这个教程中，我们将使用 React 和 TypeScript 重建英雄之旅应用程序，展示如何使用这两种强大的技术来创建动态且交互性强的 web 应用程序。

入门

首先，让我们设置一个新的 React 应用程序。我们可以使用 create-react-app 工具来完成此操作：

npx create-react-app hero-tour

这将在当前目录中创建一个名为 hero-tour 的新文件夹，其中包含一个基本的 React 应用程序。

接下来，我们需要安装 TypeScript：

npm install typescript --save-dev

并且创建 tsconfig.json 文件来配置 TypeScript 编译器：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  },
  "include": [
    "./src"
  ]
}

现在我们可以将我们的 React 应用程序转换为 TypeScript。为此，我们将使用 Babel：

npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev

并在 .babelrc 文件中添加以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

构建组件

让我们从构建英雄列表组件开始。在 src/components 目录下创建一个名为 HeroList.tsx 的文件，并添加以下内容：

import React from 'react';

interface Hero {
  id: number;
  name: string;
}

const HeroList: React.FC<{ heroes: Hero[] }> = ({ heroes }) => {
  return (
    <ul>
      {heroes.map((hero) => (
        <li key={hero.id}>{hero.name}</li>
      ))}
    </ul>
  );
};

export default HeroList;

这个组件接受一个 heroes 道具，它是一个英雄数组。它渲染一个无序列表，其中包含每个英雄的名称。

添加路由

接下来，让我们设置路由，以便当用户单击英雄时，我们可以导航到英雄详情页。在 src 目录下创建一个名为 App.tsx 的文件，并添加以下内容：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import HeroList from './components/HeroList';
import HeroDetail from './components/HeroDetail';

const App: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HeroList} />
        <Route path="/hero/:id" component={HeroDetail} />
      </Switch>
    </Router>
  );
};

export default App;

此组件使用 react-router-dom 设置路由。它定义了两个路由：一个用于英雄列表页，另一个用于英雄详情页。

管理数据

现在让我们添加数据管理。在 src 目录下创建一个名为 heroService.ts 的文件，并添加以下内容：

import { Hero } from './components/HeroList';

const heroes: Hero[] = [
  { id: 1, name: 'Windstorm' },
  { id: 2, name: 'Bombasto' },
  { id: 3, name: 'Magneta' },
];

export const getHeroes = () => heroes;
export const getHeroById = (id: number) => heroes.find((hero) => hero.id === id);

此服务充当我们的数据存储，它提供获取所有英雄和根据其 ID 获取单个英雄的方法。

使用数据

在 HeroList 组件中，让我们使用 heroService 获取英雄数据：

import { useEffect, useState } from 'react';
import { getHeroes } from '../heroService';

const HeroList: React.FC = () => {
  const [heroes, setHeroes] = useState<Hero[]>([]);

  useEffect(() => {
    const heroes = getHeroes();
    setHeroes(heroes);
  }, []);

  return (
    // ...
  );
};

此组件使用 useEffect 钩子在组件挂载时获取英雄数据。

在 HeroDetail 组件中，让我们使用 heroService 根据路由参数获取英雄数据：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getHeroById } from '../heroService';

const HeroDetail: React.FC = () => {
  const { id } = useParams();
  const [hero, setHero] = useState<Hero | null>(null);

  useEffect(() => {
    const hero = getHeroById(parseInt(id));
    setHero(hero);
  }, [id]);

  return (
    // ...
  );
};

此组件使用 useParams 钩子获取路由参数，并使用 useEffect 钩子根据路由参数获取英雄数据。

结论

我们已经使用 React 和 TypeScript 重建了 Angular 的英雄之旅教程。我们从设置 React 应用程序开始，然后添加了组件、路由和数据管理，以创建一个动态且交互性强的 web 应用程序。开发人员可以从本教程中学到 React 和 TypeScript 的核心概念和最佳实践，以及如何应用它们来构建现代且高效的 web 应用程序。