This shows you the differences between two versions of the page.
pw:laboratoare:05 [2023/02/24 14:53] ciprian.dobre [Teams] |
pw:laboratoare:05 [2023/04/24 22:36] (current) ciprian.dobre [React Query] |
||
---|---|---|---|
Line 146: | Line 146: | ||
=== Uilizare React Query === | === Uilizare React Query === | ||
- | - Pentru a începe să utilizați React Query, trebuie să îl instalați mai întâi. Puteți face acest lucru utilizând comanda de instalare npm: <code>npm install react-query</code> | + | - Pentru a începe să utilizați React Query, trebuie să îl instalați mai întâi. Puteți face acest lucru utilizând comanda de instalare npm: <code>npm install @tanstack/react-query</code> |
- După ce ați instalat React Query, trebuie să îl importați și să îl configurați în aplicația voastră. React.js. În mod tipic, acest lucru se face în fișierul App.js. Iată un exemplu simplu: <code>import React from 'react'; | - După ce ați instalat React Query, trebuie să îl importați și să îl configurați în aplicația voastră. React.js. În mod tipic, acest lucru se face în fișierul App.js. Iată un exemplu simplu: <code>import React from 'react'; | ||
import { QueryClient, QueryClientProvider } from 'react-query'; | import { QueryClient, QueryClientProvider } from 'react-query'; | ||
Line 198: | Line 198: | ||
===== Sarcini de laborator ===== | ===== Sarcini de laborator ===== | ||
- | - Creati un nou proiect de BE, asa cum a fost prezentat in Laboratorul 1 | + | - Creați un nou proiect de BE, așa cum a fost prezentat în Laboratorul 1 |
- | - Extindeti functionalitatea din WeatherForecastController adaugand o metoda care intoarce prognoza pentru o data primita ca parametru. Trebuie sa intoarca prognoza doar pentru urmatoarele 7 zile. In cazul in care este ceruta o data mai indepartata, trebuie intors un cod de eroare. | + | - Extindeți funcționalitatea din WeatherForecastController adăugând o metoda care întoarce prognoza pentru o data primita că parametru. Trebuie să întoarcă prognoza doar pentru următoarele 7 zile. În cazul în care este ceruta o data mai îndepărtată, trebuie întors un cod de eroare. |
- | - Creati un nou proiect de FE, asa cum a fost prezentat in Laboratorul 4 | + | - Creați un nou proiect de FE, așa cum a fost prezentat în Laboratorul 4 |
- | - Instalati Material UI si React Query in proiectul nou creat | + | - Instalați Material UI și React Query în proiectul nou creat |
- Mapati endpointurile din BE folosind OpenAPI Generator | - Mapati endpointurile din BE folosind OpenAPI Generator | ||
- | - Accesati endpointurile folosind componente de Material UI, React Query si metodele generate de OpenAPI Generator | + | - Accesați endpointurile folosind componente de Material UI, React Query și metodele generate de OpenAPI Generator |
+ | ===== Linkuri Utile ===== | ||
+ | |||
+ | * Documentație Materia UI: [[https://mui.com/material-ui/getting-started/overview/]] | ||
+ | * OpenAPI Generator [[https://openapi-generator.tech/]] | ||
+ | * React Query [[https://react-query-v3.tanstack.com/]] | ||