React 和 TypeScript 是用于構(gòu)建可擴(kuò)展、可維護(hù)和安全網(wǎng)站的強(qiáng)大框架。 React 提供了靈活且基于組件的架構(gòu)，而 TypeScript 為 JavaScript 添加了靜態(tài)類型，以實(shí)現(xiàn)干凈且可讀的代碼。本文將指導(dǎo)您使用 React 和 TypeScript 設(shè)置一個(gè)簡(jiǎn)單的網(wǎng)站，涵蓋入門所需的核心概念。

為什么選擇 React 和 TypeScript？

TypeScript 在 JavaScript 開發(fā)人員中很受歡迎，因?yàn)樗梢栽陂_發(fā)過程中捕獲錯(cuò)誤并使代碼更易于理解和重構(gòu)。這兩者非常適合構(gòu)建現(xiàn)代、快速的網(wǎng)站和應(yīng)用程序，并具有可擴(kuò)展的可維護(hù)代碼。

** 在 GitHub 上查看完整代碼：https://github.com/alexiacismaru/techtopia/tree/main/frontend

基本的 React 概念以及如何使用它們來構(gòu)建網(wǎng)站

讓我們?yōu)橐粋€(gè)名為 Techtopia 的虛構(gòu)游樂園建立一個(gè)網(wǎng)站。我們將顯示景點(diǎn)等元素以及它們?cè)诘貓D上的位置、登陸頁(yè)面或加載頁(yè)面。此外，我們還將允許添加/刪除頁(yè)面元素或基于變量搜索它們。

設(shè)置

通過將其復(fù)制到終端來創(chuàng)建一個(gè)空的 React 項(xiàng)目。

npm create vite@latest reactproject --template react-ts

然后運(yùn)行空項(xiàng)目，瀏覽器窗口中將打開一個(gè)新選項(xiàng)卡。

cd reactproject
npm run dev

最終項(xiàng)目結(jié)構(gòu)概述

reactproject/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── model/
│   ├── services/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── vite-env.d.ts
├── .gitignore
├── package.json
└── tsconfig.json

成分

組件是也可以重用的網(wǎng)頁(yè)元素。它們可以是網(wǎng)頁(yè)的一部分，例如頁(yè)眉或頁(yè)腳，也可以是整個(gè)頁(yè)面，例如用戶列表。它就像一個(gè) JavaScript 函數(shù)，但返回一個(gè)渲染的元素。

export function Header() {
    return (
        <header>



<h3>
  
  
  JSX
</h3>

<p>JSX is JavaScript XML, allowing the user to write HTML-like code in .jsx files.<br>
</p>

<pre class="brush:php;toolbar:false"><button sx="{{padding:" color: onclick="{onClose}">X</button>

多倫多證券交易所

TSX 是包含 JSX 語(yǔ)法的 TypeScript 文件的文件擴(kuò)展名。借助 TSX，您可以使用現(xiàn)有的 JSX 語(yǔ)法編寫經(jīng)過類型檢查的代碼。

interface RefreshmentStand {
    id: string;
    name: string;
    isOpen: boolean;
}

const Reshfresment = (props: RefreshmentStand) => {
  return (
    <div>
        <h1>{props.name}</h1>
        <p>{props.isOpen}</p>
    </div>
  );
};

碎片

片段將多個(gè)元素返回給組件。它對(duì)元素列表進(jìn)行分組，而不創(chuàng)建額外的 DOM 節(jié)點(diǎn)。

我們可以使用它們從 Java 后端獲取數(shù)據(jù)（查看如何從本文構(gòu)建 Java 應(yīng)用程序：https://medium.com/@alexia.csmr/using-bounded-contexts-to-build -a-java-application-1c7995038d30)。首先安裝 Axios 并使用應(yīng)用程序中的基本后端 URL。然后，我們將創(chuàng)建一個(gè)使用 GET 獲取所有景點(diǎn)的片段。

import axios from 'axios'
import { POI } from '../model/POI'

const BACKEND_URL = 'http://localhost:8093/api'

export const getAttractions = async () => {
    const url = BACKEND_URL + '/attractions'
    const response = await axios.get<poi>(url)
    return response.data
}
</poi>

可以擴(kuò)展到根據(jù)參數(shù)獲取數(shù)據(jù)，POST，DELETE等

npm create vite@latest reactproject --template react-ts

狀態(tài)

狀態(tài)是一個(gè) React 對(duì)象，包含有關(guān)組件的數(shù)據(jù)或信息。組件的狀態(tài)可能會(huì)隨著時(shí)間的推移而發(fā)生變化，當(dāng)發(fā)生變化時(shí)，組件會(huì)重新渲染。

要根據(jù)參數(shù)從列表中獲取單個(gè)元素，您可以使用 useParams() 掛鉤。

cd reactproject
npm run dev

掛鉤

如上所示，我使用了_useAttractions()和_useTagsAttractions()。它們是鉤子，可以進(jìn)行個(gè)性化以獲得您想要的任何數(shù)據(jù)。在此示例中，他們根據(jù) ID _或 _tags 獲取景點(diǎn)。 Hooks 只能在 React 函數(shù)組件內(nèi)部調(diào)用，只能在組件的頂層調(diào)用，并且不能是有條件的。

reactproject/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── model/
│   ├── services/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── vite-env.d.ts
├── .gitignore
├── package.json
└── tsconfig.json

isLoading 和 isError

為了獲得更好的 UI 體驗(yàn)，最好讓用戶知道發(fā)生了什么，即元素正在加載，或者執(zhí)行此操作時(shí)出現(xiàn)錯(cuò)誤。它們首先在鉤子中聲明，然后在組件中引入。

export function Header() {
    return (
        <header>



<h3>
  
  
  JSX
</h3>

<p>JSX is JavaScript XML, allowing the user to write HTML-like code in .jsx files.<br>
</p>

<pre class="brush:php;toolbar:false"><button sx="{{padding:" color: onclick="{onClose}">X</button>

您還可以為更加自定義的網(wǎng)站創(chuàng)建單獨(dú)的加載器或警報(bào)組件。

interface RefreshmentStand {
    id: string;
    name: string;
    isOpen: boolean;
}

const Reshfresment = (props: RefreshmentStand) => {
  return (
    <div>
        <h1>{props.name}</h1>
        <p>{props.isOpen}</p>
    </div>
  );
};

現(xiàn)在，當(dāng)頁(yè)面加載時(shí)，用戶將在屏幕上看到特殊的動(dòng)畫。

映射項(xiàng)（列表和鍵）

如果你想顯示列表中的所有元素，那么你需要映射所有元素。

import axios from 'axios'
import { POI } from '../model/POI'

const BACKEND_URL = 'http://localhost:8093/api'

export const getAttractions = async () => {
    const url = BACKEND_URL + '/attractions'
    const response = await axios.get<poi>(url)
    return response.data
}
</poi>

您可以在此處創(chuàng)建一個(gè)類型，以便稍后使用表單添加更多景點(diǎn)：

export const addAttraction = async (attractionData: Omit<poi>) => {
    const url = BACKEND_URL + '/addAttraction'
    const response = await axios.post(url, attractionData)
    return response.data
}

export const getAttraction = async (attractionId: string) => {
    const url = BACKEND_URL + '/attractions'
    const response = await axios.get<poi>(`${url}/${attractionId}`)
    return response.data
}

export const getAttractionByTags = async (tags: string) => {
    const url = BACKEND_URL + '/attractions'
    const response = await axios.get<poi>(`${url}/tags/${tags}`)
    return response.data
}
</poi></poi></poi>

添加項(xiàng)目

我們已經(jīng)創(chuàng)建了所需的片段和掛鉤，因此現(xiàn)在我們可以制作一個(gè)表單，用戶可以在其中寫入屬性并向網(wǎng)頁(yè)添加新的吸引力。該表單是使用 MUI 框架創(chuàng)建的。首先我將展示整個(gè)代碼并分段解釋。

const { id } = useParams()
const { isLoading, isError, attraction } = useAttraction(id!)
const { tag } = useParams()
const { isLoadingTag, isErrorTag, attractions } = useTagsAttractions(tag!)

如果您想讓表單成為彈出窗口而不是單獨(dú)的頁(yè)面，請(qǐng)?zhí)砑?isOpen() 和 isClosed() 屬性。 onSubmit() 是強(qiáng)制性的，因?yàn)檫@將觸發(fā) createPOI() 函數(shù)并將新對(duì)象添加到列表中。

import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import {POI} from "../model/./POI.ts";
import { addAttraction, getAttractions } from '../services/API.ts'
import { useContext } from 'react'

export function useAttractions() {
    const queryClient = useQueryClient()
    const {
        isLoading: isDoingGet,
        isError: isErrorGet,
        data: attractions,
    } = useQuery({
        queryKey: ['attractions'],
        queryFn: () => getAttractions(),
    })

    const {
        mutate,
        isLoading: isDoingPost,
        isError: isErrorPost,
    } = useMutation((item: Omit<poi>) => addAttraction(item), {
        onSuccess: () => {
            queryClient.invalidateQueries(['attractions'])
        },
    });

    return {
        isLoading: isDoingGet || isDoingPost,
        isError: isErrorGet || isErrorPost,
        attractions: attractions || [],
        addAttraction: mutate
    }
}
</poi>

為了進(jìn)行用戶表單驗(yàn)證，我們將安裝并導(dǎo)入 Zod。在這里聲明輸入需要什么格式以及是否有最小或最大長(zhǎng)度等要求。

const navigate = useNavigate()
const { isLoading, isError, attractions, addAttraction } = useAttractions()

if (isLoading) {
    return <loader></loader>
}

if (isError) {
    return <alert severity="error">Error</alert>
}

在組件內(nèi)部，我們需要實(shí)現(xiàn)提交和用戶驗(yàn)證。

export default function Loader() {
    return (
        <div>
            <img src="/static/imghw/default1.png" data-src="https://media0.giphy.com/media/RlqidJHbeL1sPMDlhZ/giphy.gif?cid=6c09b9522vr2magrjgn620u5mfz1ymnqhpvg558dv13sd0g8&ep=v1_stickers_related&rid=giphy.gif&ct=s" class="lazy" alt="如何使用 React 和 Rest API 構(gòu)建網(wǎng)站（React 基礎(chǔ)知識(shí)解釋）">
            <h3>Loading...</h3>
        </div>
    )
}

錯(cuò)誤將在表單的 TextField 中與任何其他屬性一起實(shí)現(xiàn)。

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAttractions } from '../hooks/usePOI.ts'
import { POI } from '../model/./POI.ts'

export default function Attractions() {
    const navigate = useNavigate()
    const { isLoading, isError, attractions, addAttraction } = useAttractions()

    return (
      <div>



<p>Create a separate file where you declare the Attraction element and its variables.<br>
</p>

<pre class="brush:php;toolbar:false">// ../model/POI.ts

export interface POI {
    id: string;
    name: string;
    description: string;
    tags: string;
    ageGroup: string;
    image: string;
}

確保表單可以在開始時(shí)關(guān)閉并提交。

export type CreatePOI = Omit<poi>; # id is automatically generated so we don't need to manually add it
</poi>

您可以在另一個(gè)組件中實(shí)現(xiàn)此彈出窗口。

import {CreatePOI} from "../model/./POI.ts";
import {z} from 'zod';
import {zodResolver} from "@hookform/resolvers/zod";
import {Controller, useForm} from "react-hook-form";
import {
    Box,
    Button,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    TextField,
} from '@mui/material'

interface AttractionDialogProps {
    isOpen: boolean;
    onSubmit: (attraction: CreatePOI) => void;
    onClose: () => void;
}

const itemSchema: z.ZodType<createpoi> = z.object({
    name: z.string().min(2, 'Name must be at least 2 characters'),
    description: z.string(),
    tags: z.string(),
    ageGroup: z.string(),
    image: z.string().url(),
})

export function AddAttractionDialog({isOpen, onSubmit, onClose}: AttractionDialogProps) {
    const {
        handleSubmit,
        control,
        formState: {errors},
    } = useForm<createpoi>({
        resolver: zodResolver(itemSchema),
        defaultValues: {
            name: '',
            description: '',
            tags: '',
            ageGroup: '',
            image: '',
        },
    });

    return (
        <dialog open="{isOpen}" onclose="{onClose}">
            <form onsubmit="{handleSubmit((data)"> {
                    onSubmit(data)
                    onClose()
                })} 
            >
                <div>
                    <dialogtitle>Add attraction</dialogtitle>
                    <button onclick="{onClose}">
                        X
                    </button>
                </div>
                <dialogcontent>
                    <box>
                        <controller name="name" control="{control}" render="{({field})"> (
                                <textfield label="Name" error="{!!errors.name}" helpertext="{errors.name?.message}" required></textfield>
                            )}
                        />
                        <controller name="description" control="{control}" render="{({field})"> (
                                <textfield label="Description" error="{!!errors.description}" helpertext="{errors.description?.message}"></textfield>
                            )}
                        />
                        <controller name="tags" control="{control}" render="{({field})"> (
                                <textfield label="Tags" error="{!!errors.tags}" helpertext="{errors.tags?.message}" required></textfield>
                            )}
                        />
                        <controller name="ageGroup" control="{control}" render="{({field})"> (
                                <textfield label="Age group" error="{!!errors.ageGroup}" helpertext="{errors.ageGroup?.message}" required></textfield>
                            )}
                        />
                        <controller name="image" control="{control}" render="{({field})"> (
                                <textfield label="Image" error="{!!errors.image}" helpertext="{errors.image?.message}" required></textfield>
                            )}
                        />
                    </controller></controller></controller></controller></controller></box>
                </dialogcontent>
                <dialogactions>
                    <button type="submit" variant="contained">
                        Add
                    </button>
                </dialogactions>
            </form>
        </dialog>
    )
}
</createpoi></createpoi>

刪除項(xiàng)目

創(chuàng)建一個(gè)使用 DELETE 的鉤子并在組件中實(shí)現(xiàn)它。

npm create vite@latest reactproject --template react-ts

cd reactproject
npm run dev

在迭代項(xiàng)目列表時(shí)包含它。

reactproject/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── model/
│   ├── services/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── vite-env.d.ts
├── .gitignore
├── package.json
└── tsconfig.json

結(jié)論

將 React 與 TypeScript 結(jié)合使用使您能夠構(gòu)建易于維護(hù)和擴(kuò)展的動(dòng)態(tài)、安全的網(wǎng)站。 TypeScript 的類型檢查可以防止運(yùn)行時(shí)錯(cuò)誤，而 React 基于組件的結(jié)構(gòu)可以有效地組織項(xiàng)目。