npm install --save react@next react-dom@next
npm install --save-dev typescript @types/react @types/react-dom

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "experimentalDecorators": true,
    "useDefineForClassFields": true
  }
}

npx create-react-app react18-ts-edu --template typescript
cd react18-ts-edu
npm start

npm install graphql @apollo/client @material-ui/core @material-ui/icons

import { ApolloClient, InMemoryCache } from "@apollo/client";
// 創(chuàng)立一個(gè)Apollo Client實(shí)例
const client = new ApolloClient({
  // 指定后端的GraphQL接口地址
  uri: "http://localhost:3000/graphql",
  // 創(chuàng)立一個(gè)內(nèi)存緩存對(duì)象
  cache: new InMemoryCache(),
});
// 導(dǎo)出client對(duì)象
export default client;

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "@apollo/client";
import client from "./apollo";
import App from "./App";
import "./index.css";
ReactDOM.render(
  <React.StrictMode>
    // 運(yùn)用ApolloProvider組件包裹App組件
  ,
  document.getElementById("root")
);

import React, { useState } from "react";
import { useQuery, gql } from "@apollo/client";
import {
  Grid,
  Card,
  CardActionArea,
  CardMedia,
  CardContent,
  Typography,
  CardActions,
  Button,
} from "@material-ui/core";
// 定義一個(gè)GraphQL查詢語(yǔ)句，用于獲取課程列表
const COURSES_QUERY = gql`
  query {
    courses {
      id
      title
      cover
      price
      rating
    }
  }
`;
// 定義一個(gè)課程類型的接口，用于描繪課程的屬性
interface Course {
  id: string;
  title: string;
  cover: string;
  price: number;
  rating: number;
}
// 定義一個(gè)CourseList組件的函數(shù)，接納一個(gè)onSelect屬性，用于傳送選中的課程ID
const CourseList: React.FC<{ onSelect: (id: string) => void }> = ({
  onSelect,
}) => {
  // 運(yùn)用useQuery鉤子函數(shù)，傳入查詢語(yǔ)句，獲取查詢結(jié)果
  const { loading, error, data } = useQuery(COURSES_QUERY);
  // 假如查詢正在加載中，返回一個(gè)提示信息
  if (loading) return
Loading...
;
  // 假如查詢出錯(cuò)了，返回一個(gè)錯(cuò)誤信息
  if (error) return
Error :(
;
  // 假如查詢勝利了，返回一個(gè)網(wǎng)格規(guī)劃的課程列表
  return (
      {data.courses.map((course: Course) => (
            <CardActionArea onClick={() => onSelect(course.id)}>
              <CardMedia
                component="img"
                alt={course.title}
                height="140"
                image={course.cover}
                title={course.title}
              />
                  {course.title}
                  {`價(jià)錢：${course.price}元`}
                  {`評(píng)分：${course.rating}`}
              </CardContent