Comment créer un site Web à l'aide des API React et Rest (explication des bases de React)

React et TypeScript sont des frameworks puissants pour créer des sites Web évolutifs, maintenables et sécurisés. React fournit une architecture flexible basée sur des composants, tandis que TypeScript ajoute un typage statique à JavaScript, pour un code propre et lisible. Cet article vous guidera dans la création d'un site Web simple avec React et TypeScript, couvrant les concepts de base nécessaires pour commencer.

Pourquoi choisir React avec TypeScript ?

TypeScript est populaire parmi les développeurs JavaScript car il peut détecter les erreurs pendant le développement et rendre le code plus facile à comprendre et à refactoriser. Les deux sont idéaux pour créer des sites Web et des applications modernes et rapides avec un code maintenable et bien évolutif.

** Découvrez l'intégralité du code sur GitHub : https://github.com/alexiacismaru/techtopia/tree/main/frontend

Concepts de base de React et comment les utiliser pour créer un site Web

Créons un site Web pour un parc d'attractions fictif appelé Techtopia. Nous afficherons des éléments tels que les attractions et leur emplacement sur la carte, une page de destination ou une page de chargement. De plus, nous permettra également d'ajouter/supprimer des éléments de la page ou de les rechercher en fonction d'une variable.

Installation

Créez un projet React vide en le copiant dans le terminal.

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

Ensuite, exécutez le projet vide et un nouvel onglet s'ouvrira dans la fenêtre du navigateur.

cd reactproject
npm run dev

Aperçu final de la structure du projet

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

Composants

Les composants sont des éléments d'une page Web qui peuvent également être réutilisés. Ils peuvent faire partie de la page Web, comme l'en-tête ou le pied de page, ou la page entière, comme une liste d'utilisateurs. C'est comme une fonction JavaScript mais renvoie un élément rendu.

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>

Bourse de Toronto

TSX est une extension de fichier pour les fichiers TypeScript qui contient la syntaxe JSX. Avec TSX, vous pouvez écrire du code de type vérifié avec la syntaxe JSX existante.

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

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

Fragments

Les fragments renvoient plusieurs éléments à un composant. Il regroupe la liste des éléments sans créer de nœuds DOM supplémentaires.

Nous pouvons les utiliser pour récupérer les données d'un backend Java (découvrez comment créer l'application Java à partir de cet article : https://medium.com/@alexia.csmr/using-bounded-contexts-to-build -une-application-java-1c7995038d30). Commencez par installer Axios et utilisez l’URL du backend de base de votre application. Ensuite, nous créerons un fragment qui utilise GET pour récupérer toutes les attractions.

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>

Cela peut être étendu pour obtenir des données basées sur des paramètres, POST, DELETE, etc.

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

État

L'état est un objet React qui contient des données ou des informations sur le composant. L'état d'un composant peut changer avec le temps et lorsque c'est le cas, le composant est à nouveau rendu.

Pour obtenir un seul élément d'une liste basée sur un paramètre, vous pouvez utiliser le hook useParams().

cd reactproject
npm run dev

Crochets

Comme vu ci-dessus, j'ai utilisé_ useAttractions() et _useTagsAttractions(). Ce sont des crochets et peuvent être personnalisés pour obtenir toutes les données souhaitées. Dans cet exemple, ils récupèrent les attractions en fonction de leur ID _ou _tags. Les hooks ne peuvent être appelés qu’à l’intérieur des composants de fonction React, ne peuvent être appelés qu’au niveau supérieur d’un composant et ne peuvent pas être conditionnels.

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

Pour une meilleure expérience d'interface utilisateur, il est bon d'informer l'utilisateur de ce qui se passe, c'est-à-dire que les éléments sont en cours de chargement ou qu'une erreur s'est produite lors du chargement. Ils sont d'abord déclarés dans le hook puis introduits dans le composant.

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>

Vous pouvez également créer un composant Loader ou Alert distinct pour un site Web plus personnalisé.

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

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

Maintenant, lorsque la page se charge, l'utilisateur verra une animation spéciale sur l'écran.

Éléments de mappage (listes et clés)

Si vous souhaitez afficher tous les éléments d'une liste, vous devez les cartographier tous.

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>

Plus ici, vous pouvez créer un type pour ajouter ultérieurement plus d'attractions à l'aide d'un formulaire :

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>

Ajout d'éléments

Nous avons déjà créé les fragments et les hooks nécessaires pour cela, nous pouvons donc maintenant créer un formulaire dans lequel l'utilisateur peut écrire les attributs et ajouter une nouvelle attraction à la page Web. Ce formulaire a été créé à l'aide du framework MUI. Je vais d’abord montrer l’intégralité du code et l’expliquer par sections.

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

Si vous souhaitez faire du formulaire une fenêtre contextuelle au lieu d'une page séparée, ajoutez les attributs isOpen() et isClosed(). onSubmit() est obligatoire car cela déclenchera la fonction createPOI() et ajoutera un nouvel objet à la liste.

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>

Pour la validation du formulaire utilisateur, nous installerons et importerons Zod. Déclarez ici le format que doit avoir l'entrée et s'il existe des exigences telles que la longueur minimale ou maximale.

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

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

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

À l'intérieur du composant, nous devons implémenter la soumission et la validation utilisateur.

export default function Loader() {
    return (
        <div>
            <img alt="Comment créer un site Web à laide des API React et Rest (explication des bases de React)" src="https://media0.giphy.com/media/RlqidJHbeL1sPMDlhZ/giphy.gif?cid=6c09b9522vr2magrjgn620u5mfz1ymnqhpvg558dv13sd0g8&ep=v1_stickers_related&rid=giphy.gif&ct=s">
            <h3>Loading...</h3>
        </div>
    )
}

Les erreurs seront implémentées dans le TextField du formulaire avec d'éventuels autres attributs.

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

Assurez-vous que le formulaire peut être fermé et soumis au début.

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

Vous pouvez implémenter cette pop-up dans un autre composant.

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>

Suppression d'éléments

Créez un hook qui utilise DELETE et implémentez-le dans un composant.

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

cd reactproject
npm run dev

Incluez-le lors de la itération dans la liste des éléments.

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

Conclusion

L'utilisation de React avec TypeScript vous permet de créer des sites Web dynamiques et sécurisés, faciles à maintenir et à faire évoluer. La vérification de type de TypeScript évite les erreurs d'exécution, tandis que la structure basée sur les composants de React organise le projet efficacement.