React ? TypeScript? ?? ???? ?? ??? ???? ??? ????? ???? ?? ??? ????????. React? ??? ?? ?? ?? ????? ???? ?? TypeScript? ???? ?? ?? ??? ?? JavaScript? ?? ???? ?????. ? ????? React ? TypeScript? ???? ??? ????? ???? ??? ???? ???? ? ??? ?? ??? ????.

TypeScript? React? ???? ??? ??????

TypeScript? ?? ?? ??? ???? ??? ? ?? ???? ????? ? ?? ??? JavaScript ???? ???? ??? ????. ? ?? ?? ???? ???? ?? ??? ??? ??? ????? ?? ????? ??????? ???? ? ??????.

** GitHub?? ?? ??? ?????: https://github.com/alexiacismaru/techtopia/tree/main/frontend

?? React ??? ?? ???? ? ???? ???? ??

Techtopia?? ??? ???? ????? ??? ?????. ????? ??, ?? ???, ?? ??? ?? ??? ?????. ??, ???? ??? ??/????? ??? ???? ???? ?? ???? ? ?????.

??

?? ???? ???? ? 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

????

????? ???? ?? ?? ????? ?????. ??? ???? ?? ????? ??? ?? ?? ??? ??? ?? ?? ???? ?? ????. 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>{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 _?? _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>

?? ???? ????? ?? ??? ?? ?? ?? ????? ??? ?? ????.

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

const Reshfresment = (props: RefreshmentStand) => {
  return (
    <div>
        <h1>{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>

?? ??

?? ??? ?????? ??? ?????? ?? ???? ??? ???? ????? ??? ??? ??? ? ?? ??? ?? ? ????. ? ??? 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/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? ???? ????? ???? ??(React ?? ??)">
            <h3>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

??

React? TypeScript? ?? ???? ?? ?? ? ??? ???? ???? ??? ????? ??? ? ????. TypeScript? ?? ??? ??? ??? ???? ?? React? ?? ?? ?? ??? ????? ????? ?????.