React dan TypeScript ialah rangka kerja yang berkuasa untuk membina tapak web yang boleh skala, boleh diselenggara dan selamat. React menyediakan seni bina yang fleksibel dan berasaskan komponen, manakala TypeScript menambah penaipan statik pada JavaScript, untuk kod yang bersih dan boleh dibaca. Artikel ini akan membimbing anda melalui penyediaan tapak web ringkas dengan React dan TypeScript, merangkumi konsep teras yang diperlukan untuk bermula.

Mengapa Pilih React dengan TypeScript?

TypeScript popular dalam kalangan pembangun JavaScript kerana ia boleh menangkap ralat semasa pembangunan dan menjadikan kod lebih mudah difahami dan difaktorkan semula. Kedua-duanya sesuai untuk membina tapak web dan aplikasi yang moden dan pantas dengan kod yang boleh diselenggara yang berskala dengan baik.

** Lihat keseluruhan kod di GitHub: https://github.com/alexiacismaru/techtopia/tree/main/frontend

Konsep Asas React dan cara menggunakannya untuk membina tapak web

Mari bina tapak web untuk taman hiburan fiksyen bernama Techtopia. Kami akan menunjukkan elemen seperti tarikan dan tempat ia berada pada peta, halaman pendaratan atau halaman pemuatan. Selain itu, kami juga akan membolehkan untuk menambah/memadam elemen halaman atau mencarinya berdasarkan pembolehubah.

Persediaan

Buat projek React kosong dengan menyalin ini ke dalam terminal.

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

Kemudian jalankan projek kosong dan tab baharu akan dibuka dalam tetingkap penyemak imbas.

cd reactproject
npm run dev

Gambaran keseluruhan struktur projek akhir

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

Komponen

Komponen ialah elemen halaman web yang juga boleh digunakan semula. Mereka boleh menjadi sebahagian daripada halaman web, seperti pengepala atau pengaki, atau keseluruhan halaman, seperti senarai pengguna. Ia sama seperti fungsi JavaScript tetapi mengembalikan elemen yang diberikan.

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 ialah sambungan fail untuk fail TypeScript yang mengandungi sintaks JSX. Dengan TSX anda boleh menulis kod yang disemak jenis dengan sintaks JSX sedia ada.

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

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

Serpihan

Fragmen mengembalikan berbilang elemen kepada komponen. Ia mengumpulkan senarai elemen tanpa membuat nod DOM tambahan.

Kami boleh menggunakannya untuk mengambil data daripada bahagian belakang Java (lihat cara membina aplikasi Java daripada artikel ini: https://medium.com/@alexia.csmr/using-bounded-contexts-to-build -a-java-application-1c7995038d30). Mulakan dengan memasang Axios dan menggunakan URL hujung belakang asas daripada aplikasi anda. Kemudian, kami akan mencipta serpihan yang menggunakan GET untuk mengambil semua tarikan.

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>

Ini boleh dikembangkan untuk mendapatkan data berdasarkan parameter, POST, DELETE, dll.

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

negeri

Keadaan ialah objek React yang mengandungi data atau maklumat tentang komponen tersebut. Keadaan komponen boleh berubah dari semasa ke semasa dan apabila ia berlaku, komponen itu dipaparkan semula.

Untuk mendapatkan satu elemen daripada senarai berdasarkan parameter, anda boleh menggunakan cangkuk useParams().

cd reactproject
npm run dev

cangkuk

Seperti yang dilihat di atas, saya telah menggunakan_ useAttractions() dan _useTagsAttractions(). Ia adalah cangkuk dan boleh diperibadikan untuk mendapatkan sebarang data yang anda inginkan. Dalam contoh ini, mereka mengambil tarikan berdasarkan ID _atau _tag mereka. Cangkuk hanya boleh dipanggil di dalam komponen fungsi React, hanya boleh dipanggil di peringkat teratas komponen dan tidak boleh bersyarat.

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 dan isError

Untuk pengalaman UI yang lebih baik, adalah baik untuk memberitahu pengguna perkara yang berlaku iaitu elemen sedang dimuatkan atau terdapat ralat semasa berbuat demikian. Ia mula-mula diisytiharkan dalam cangkuk dan kemudian diperkenalkan dalam komponen.

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>

Anda juga boleh membuat komponen Pemuat atau Makluman yang berasingan untuk tapak web yang lebih tersuai.

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

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

Kini, apabila halaman dimuatkan pengguna akan melihat animasi khas pada skrin.

Item pemetaan (Senarai dan Kunci)

Jika anda ingin memaparkan semua elemen dalam senarai maka anda perlu memetakan kesemuanya.

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>

Lebih banyak lagi di sini anda boleh mencipta jenis untuk menambah lebih banyak tarikan kemudian menggunakan borang:

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>

Menambah item

Kami telah mencipta serpihan dan cangkuk yang diperlukan untuk ini, jadi kini kami boleh membuat borang di mana pengguna boleh menulis atribut dan menambah tarikan baharu pada halaman web. Borang ini dibuat menggunakan MUIframework. Mula-mula saya akan menunjukkan keseluruhan kod dan menerangkannya dalam bahagian.

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

Jika anda ingin menjadikan borang timbul dan bukannya halaman yang berasingan, tambahkan atribut isOpen() dan isClosed(). onSubmit() adalah wajib kerana ini akan mencetuskan fungsi createPOI() dan menambah objek baharu pada senarai.

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>

Untuk pengesahan borang pengguna kami akan memasang dan mengimport Zod. Di sini isytiharkan format input yang diperlukan dan jika terdapat sebarang keperluan seperti panjang minimum atau maksimum.

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

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

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

Di dalam komponen, kami perlu melaksanakan penyerahan dan pengesahan pengguna.

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="Cara membina tapak web menggunakan API React and Rest (asas React dijelaskan)">
            <h3>Loading...</h3>
        </div>
    )
}

Ralat akan dilaksanakan dalam TextField borang dengan mana-mana atribut lain.

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

Pastikan borang boleh ditutup dan diserahkan pada mulanya.

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

Anda boleh melaksanakan pop timbul ini dalam komponen lain.

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>

Memadam item

Buat cangkuk yang menggunakan DELETE dan laksanakannya dalam komponen.

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

cd reactproject
npm run dev

Sertakannya semasa melelakan senarai item.

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

Kesimpulan

Menggunakan React dengan TypeScript membolehkan anda membina tapak web yang dinamik dan selamat yang mudah diselenggara dan berskala. Semakan jenis TypeScript menghalang ralat masa jalan, manakala struktur berasaskan komponen React mengatur projek dengan cekap.