React API と Rest API を使用して Web サイトを構築する方法 (React の基本について説明)

React と TypeScript は、スケーラブルで保守性が高く、安全な Web サイトを構築するための強力なフレームワークです。 React は柔軟なコンポーネントベースのアーキテクチャを提供し、TypeScript は JavaScript に静的型付けを追加して、クリーンで読みやすいコードを実現します。この記事では、React と TypeScript を使用して簡単な Web サイトをセットアップする手順を説明し、開始するために必要な中心的な概念を説明します。

React with TypeScript を選択する理由

TypeScript は、開発中にエラーを検出し、コードを理解しやすくリファクタリングしやすくするため、JavaScript 開発者の間で人気があります。この 2 つは、拡張性に優れた保守可能なコードを備えた最新の高速 Web サイトとアプリケーションを構築するのに最適です。

** GitHub でコード全体を確認してください: https://github.com/alexiacismaru/techtopia/tree/main/frontend

React の基本的な概念とそれを使用して Web サイトを構築する方法

テクトピアという架空の遊園地のウェブサイトを構築しましょう。アトラクションや地図上の場所、ランディング ページ、読み込みページなどの要素を表示します。また、ページの要素の追加・削除や変数による検索も可能とさせていただきます。

設定

これをターミナルにコピーして、空の React プロジェクトを作成します。

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

次に、空のプロジェクトを実行すると、ブラウザ ウィンドウに新しいタブが開きます。

cd reactproject
npm run dev

最終的なプロジェクト構造の概要

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

コンポーネント

コンポーネントは、再利用できる Web ページの要素です。これらは、ヘッダーやフッターなどの Web ページの一部である場合もあれば、ユーザーのリストなどのページ全体である場合もあります。これは JavaScript 関数に似ていますが、レンダリングされた要素を返します。

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

TSX は、JSX 構文を含む TypeScript ファイルのファイル拡張子です。 TSX を使用すると、既存の JSX 構文を使用して型チェックされたコードを作成できます。

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

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

断片

フラグメントは複数の要素をコンポーネントに返します。追加の DOM ノードを作成せずに要素のリストをグループ化します。

これらを使用して、Java バックエンドからデータをフェッチできます (この記事から Java アプリケーションのビルド方法を確認してください: https://medium.com/@alexia.csmr/using-bounded-contexts-to-build -a-java-application-1c7995038d30)。まず、Axios をインストールし、アプリケーションのベース バックエンド URL を使用します。次に、GET を使用してすべてのアトラクションを取得するフラグメントを作成します。

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>

これは、パラメータ、POST、DELETE などに基づいたデータの取得に拡張できます。

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

州

状態は、コンポーネントに関するデータまたは情報を含む React オブジェクトです。コンポーネントの状態は時間の経過とともに変化する可能性があり、変化するとコンポーネントは再レンダリングされます。

パラメータに基づいてリストから単一の要素を取得するには、useParams() フックを使用できます。

cd reactproject
npm run dev

フック

上で見たように、useAttractions() と _useTagsAttractions() を使用しました。これらはフックであり、必要なデータを取得するためにカスタマイズできます。この例では、ID _or _tags に基づいてアトラクションを取得します。フックは React 関数コンポーネント内でのみ呼び出すことができ、コンポーネントのトップレベルでのみ呼び出すことができ、条件付きにすることはできません。

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 エクスペリエンスを向上させるには、何が起こっているのか、つまり要素が読み込まれているのか、読み込み中にエラーが発生したのかをユーザーに知らせることをお勧めします。これらは最初にフックで宣言され、次にコンポーネントに導入されます。

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>

よりカスタマイズされた Web サイト用に別のローダー コンポーネントまたはアラート コンポーネントを作成することもできます。

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

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

これで、ページの読み込み中に、ユーザーの画面に特別なアニメーションが表示されます。

マッピング項目 (リストとキー)

リスト内のすべての要素を表示したい場合は、すべての要素をマッピングする必要があります。

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>

ここでタイプを作成し、後でフォームを使用してアトラクションを追加できます:

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>

アイテムの追加

これに必要なフラグメントとフックはすでに作成済みなので、ユーザーが属性を記述して Web ページに新しい魅力を追加できるフォームを作成できます。このフォームは MUIframework を使用して作成されました。まずコード全体を示し、セクションに分けて説明します。

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

フォームを別のページではなくポップアップにしたい場合は、isOpen() 属性と isClosed() 属性を追加します。 onSubmit() は、createPOI() 関数をトリガーし、リストに新しいオブジェクトを追加するため、必須です。

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>

ユーザーフォームを検証するために、Zod をインストールしてインポートします。ここで、入力に必要な形式と、最小長または最大長などの要件があるかどうかを宣言します。

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

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

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

コンポーネント内で、送信とユーザー検証を実装する必要があります。

export default function Loader() {
    return (
        <div>
            <img src="/static/imghwm/default1.png" data-src="https://media0.giphy.com/media/RlqidJHbeL1sPMDlhZ/giphy.gif?cid=6c09b9522vr2magrjgn620u5mfz1ymnqhpvg558dv13sd0g8&ep=v1_stickers_related&rid=giphy.gif&ct=s?x-oss-process=image/resize,p_40" class="lazy" alt="React API と Rest API を使用して Web サイトを構築する方法 (React の基本について説明)">
            <h3 id="Loading">Loading...</h3>
        </div>
    )
}

エラーは、他の属性を使用してフォームの TextField に実装されます。

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;
}

最初にフォームを閉じて送信できることを確認してください。

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

このポップアップは別のコンポーネントに実装できます。

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>

項目の削除

DELETE を使用するフックを作成し、コンポーネントに実装します。

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

cd reactproject
npm run dev

項目のリストを反復処理するときにこれを含めます。

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

結論

TypeScript で React を使用すると、保守と拡張が簡単な動的で安全な Web サイトを構築できます。 TypeScript の型チェックは実行時エラーを防ぎ、React のコンポーネントベースの構造はプロジェクトを効率的に編成します。