Laboratorul 05: Asincronicitate. Tooluri utile

Asincronicitate

Ce este asincronitatea și de ce este importantă în React.js?

Asincronicitatea este capacitatea unei aplicații de a rula multiple procese în paralel, fără să fie blocată de procesele care durează mai mult sau care necesită așteptare. În React.js, asincronicitatea este importantă pentru că aplicațiile sunt construite în mare parte în jurul evenimentelor și a datelor care se schimbă în timp real. Prin urmare, este important să putem rula procese asincrone în timp ce aplicația rămâne responsive.

De exemplu, atunci când facem o cerere către o bază de date pentru a obține informații pentru a afișa pe o pagină, aceasta poate dura ceva timp. În acest timp, aplicația nu ar trebui să fie blocată sau să înceteze să funcționeze. În schimb, React.js poate utiliza asincronicitatea pentru a rula procesul în fundal, fără să blocheze restul aplicației.

În plus, asincronicitatea este importantă în React.js pentru a gestiona evenimente și animații în timp real. De exemplu, atunci când utilizatorul face clic pe un buton pentru a efectua o acțiune, aplicația trebuie să răspundă rapid pentru a da utilizatorului feedback. Prin utilizarea asincronicității, aplicația poate rula procesul în fundal fără a bloca restul aplicației și fără a încetini răspunsul.

În concluzie, asincronicitatea este importantă pentru a asigura o performanță bună și o experiență de utilizare plăcută. Prin rularea proceselor asincrone, aplicația poate rămâne responsive și poate gestiona evenimente și date în timp real.

Utilizarea de API-uri asincrone în React.js

În React.js, putem utiliza API-uri asincrone pentru a obține și a procesa date de la servere externe. Acest lucru poate fi făcut folosind funcții precum fetch(), axios sau XMLHttpRequest pentru a efectua cereri HTTP către un server. API-urile asincrone sunt esențiale în dezvoltarea aplicațiilor moderne, deoarece permit obținerea de date în timp real fără a fi nevoie de încărcarea unei întregi pagini.

Pentru a utiliza API-uri asincrone în React.js, trebuie să creăm o componentă care să utilizeze o astfel de funcție. O abordare comună este de a utiliza fetch() pentru a efectua o cerere GET către server pentru a obține datele. În momentul în care datele sunt primite, putem folosi metoda setState() pentru a actualiza starea componentei cu noile date.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true,
      error: null,
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(data => this.setState({ data: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    const { data, isLoading, error } = this.state;

    if (error) {
      return <p>{error.message}</p>;
    }

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div>
        <h1>Lista de sarcini:</h1>
        <ul>
          {data.map(task => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default MyComponent;

În acest exemplu, am utilizat fetch() pentru a obține o listă de sarcini de pe serverul JSONPlaceholder. Am actualizat starea componentei cu datele obținute din server utilizând metoda setState(). Dacă întâmpinăm o eroare în timpul procesului de obținere a datelor, afișăm un mesaj de eroare. În cele din urmă, am afișat lista de sarcini printr-o mapare a datelor primite într-o listă.

În concluzie, utilizarea API-urilor asincrone în React.js este esențială pentru a obține date din servere externe și pentru a actualiza componentele în timp real fără a fi nevoie de încărcarea unei întregi pagini.

Tooluri si biblioteci utile

Material UI

Material UI este o bibliotecă de componente pentru React.js, care oferă o colecție de componente UI pre-stilizate pentru a ajuta la crearea de interfețe utilizator moderne și atractive. Aceste componente sunt bazate pe stilurile și principiile de design ale Google Material Design, care au fost dezvoltate pentru a oferi un aspect coerent și familiar aplicațiilor web și mobile.

Material UI oferă o varietate de componente, inclusiv butoane, casete de selectare, câmpuri de text, tab-uri, bare de navigare, bare laterale, ferestre modale, diagrame și multe altele. Aceste componente sunt ușor de utilizat și oferă o varietate de opțiuni de personalizare pentru a se potrivi cu designul și aspectul dorit.

Material UI oferă, de asemenea, o varietate de teme predefinite și opțiuni de personalizare, care permit utilizatorilor să își personalizeze aspectul aplicației în funcție de nevoile și preferințele lor. De exemplu, puteți schimba culorile de accent, fonturile, dimensiunile și multe altele.

În plus, Material UI este bine documentată și oferă o comunitate activă de utilizatori care contribuie la dezvoltarea și îmbunătățirea acesteia. De asemenea, este compatibilă cu multe alte biblioteci și cadre de lucru populare, cum ar fi Redux, Next.js, TypeScript și multe altele. Pentru a utiliza Material UI într-un proiect React.js, trebuie să instalați mai întâi biblioteca utilizând un manager de pachete, cum ar fi npm sau yarn. După aceea, puteți importa componentele dorite în componentele React și le puteți utiliza așa cum doriți.

De exemplu, pentru a utiliza un buton Material UI, puteți importa componenta Buton din biblioteca Material UI și o puteți utiliza în componenta React în felul următor:

import { Button } from '@material-ui/core';

function MyButton() {
  return (
    <Button variant="contained" color="primary">
      Apasă-mă
    </Button>
  );
}

Aici, componenta Button este utilizată pentru a crea un buton cu aspect Material UI, care are un text “Apasă-mă” și un fundal de culoare primară. Utilizând opțiunile de personalizare oferite de Material UI, puteți schimba culoarea de accent, dimensiunile și multe altele pentru a se potrivi cu designul aplicației voastre.

OpenAPI Generator

Ce este OpenAPI?

OpenAPI, anterior cunoscut sub numele de Swagger, este un set de specificații și instrumente open source care permit dezvoltatorilor să definească, să documenteze și să utilizeze servicii web RESTful.

OpenAPI definește o formă standardizată de descriere a interfeței API-urilor, inclusiv informații despre rutele API, parametri, tipurile de date și răspunsurile pe care le returnează serviciul.

Prin utilizarea OpenAPI, dezvoltatorii pot crea documentații clare și ușor de înțeles pentru serviciile lor web, ceea ce face mai ușor pentru utilizatorii acestor servicii să le utilizeze și să le integreze în propriile aplicații. De asemenea, OpenAPI permite dezvoltatorilor să genereze automat codul clientului pentru interacțiunea cu un API, ceea ce poate reduce timpul și efortul necesar pentru a crea clientul API-ului.

OpenAPI este utilizat de multe companii mari, inclusiv Amazon, Google și Microsoft, și este susținut de comunitatea open source.

Ce este OpenAPI Generator?

OpenAPI Generator este un instrument open source care permite generarea automată a codului clientului și al serverului pentru interacțiunea cu un API web, pe baza unei specificații OpenAPI. Acesta poate fi utilizat cu o varietate de limbaje de programare și platforme, inclusiv Java, JavaScript, Python, Ruby, C # și multe altele.

OpenAPI Generator poate fi folosit pentru a genera codul clientului API, care poate fi inclus în aplicația dvs. React.js. Acest lucru vă permite să interacționați cu API-ul utilizând metodele și tipurile de date definite în specificația OpenAPI, fără a fi necesară scrierea manuală a codului clientului.

În plus, OpenAPI Generator poate fi utilizat și pentru a genera codul serverului API, care poate fi folosit pentru a crea propriul dvs. API, bazat pe specificația OpenAPI. Acest lucru poate fi util dacă doriți să oferiți un API personalizat pentru propriile aplicații sau pentru a permite altor dezvoltatori să utilizeze serviciile dvs. web prin intermediul unui API.

OpenAPI Generator este disponibil ca o bibliotecă Java și poate fi instalat și utilizat ca o unealtă de linie de comandă. De asemenea, există și integrări disponibile pentru diferite platforme de dezvoltare, cum ar fi Maven, Gradle, Node.js și altele.

Pentru a putea utiliza OpenAPI Generator trebuie sa aveți Java instalat pe PC.

Utilizare OpenAPI Generator

Pentru a utiliza OpenAPI Generator într-un proiect React.js, urmați acești pași:

  1. Instalați OpenAPI Generator utilizând un manager de pachete precum npm sau yarn. De exemplu, pentru a instala OpenAPI Generator folosind npm, rulați următoarea comandă:
    npm install @openapitools/openapi-generator-cli -g
  2. Generați codul clientului din specificația OpenAPI folosind OpenAPI Generator. De exemplu, pentru a genera codul clientului dintr-un fișier swagger.yaml și a-l salva într-un director numit client, rulați următoarea comandă:
    openapi-generator generate -i swagger.yaml -g javascript -o client

    Alternativ, pentru scheletul de laborator, porniți BE-ul si folosiți comanda:

    openapi-generator-cli generate -i http://localhost:5000/swagger/v1/swagger.json -g typescript-fetch -o .\src\Api\ --additional-properties=supportsES6=true
  3. În interiorul componentelor React.js, importați funcțiile generate și utilizați-le în mod corespunzător.

React Query

Ce este React Query?

React Query este o bibliotecă pentru React.js care oferă o modalitate simplă de a gestiona starea și datele asincrone dintr-o aplicație React. Această librărie folosește un concept numit “queries” pentru a face apeluri la server și pentru a gestiona datele returnate. React Query utilizează cache-ul local pentru a reduce numărul de cereri la server și pentru a oferi o experiență mai rapidă utilizatorilor.

React Query oferă, de asemenea, o serie de caracteristici utile, cum ar fi stale-while-revalidate (SWR), care permite afișarea imediată a datelor din cache, chiar și înainte de a fi actualizate cu datele din server, și focus pe performanță, care permite amânarea încărcării datelor până când componenta respectivă este încărcată.

În esență, React Query face mai ușor pentru dezvoltatori să gestioneze datele și starea în aplicații React, permițându-le să se concentreze mai mult pe construirea interfeței și mai puțin pe gestionarea datelor.

Uilizare React Query

  1. 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:
    npm install @tanstack/react-query
  2. 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:
    import React from 'react';
    import { QueryClient, QueryClientProvider } from 'react-query';
    
    const queryClient = new QueryClient();
    
    function App() {
      return (
        <QueryClientProvider client={queryClient}>
          <div className="App">
            {/* Restul componentelor tale */}
          </div>
        </QueryClientProvider>
      );
    }
    
    export default App;
  3. După ce ați configurat React Query, puteți începe să utilizați useQuery și useMutation hooks pentru a obține și a actualiza datele. Iată un exemplu de utilizare a useQuery:
    import React from 'react';
    import { useQuery } from 'react-query';
    
    function App() {
      const { isLoading, error, data } = useQuery('todos', () =>
        fetch('https://jsonplaceholder.typicode.com/todos').then((res) =>
          res.json()
        )
      );
    
      if (isLoading) return 'Loading...';
    
      if (error) return `An error has occurred: ${error.message}`;
    
      return (
        <div>
          <h1>Todos</h1>
          <ul>
            {data.map((todo) => (
              <li key={todo.id}>{todo.title}</li>
            ))}
          </ul>
        </div>
      );
    }
    
    export default App;

În acest exemplu, am utilizat useQuery pentru a obține o listă de to-do-uri de la un API extern. useQuery primește un identificator pentru query ('todos' în acest caz) și o funcție de interogare care va fi apelată pentru a obține datele. Dacă query-ul este încărcat (isLoading), va fi afișat un mesaj “Loading…”, dacă apare o eroare (error), va fi afișat un mesaj de eroare, altfel vor fi afișate datele.

Sarcini de laborator

  1. Creați un nou proiect de BE, așa cum a fost prezentat în Laboratorul 1
  2. 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.
  3. Creați un nou proiect de FE, așa cum a fost prezentat în Laboratorul 4
  4. Instalați Material UI și React Query în proiectul nou creat
  5. Mapati endpointurile din BE folosind OpenAPI Generator
  6. Accesați endpointurile folosind componente de Material UI, React Query și metodele generate de OpenAPI Generator

Linkuri Utile

pw/laboratoare/05.txt · Last modified: 2023/04/24 22:36 by ciprian.dobre
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0