React.js este o bibliotecă JavaScript utilizată pentru crearea interfețelor utilizator web dinamice și interactive. A fost dezvoltată de Facebook și este folosită pentru construirea de aplicații web moderne. React.js este construită în jurul unui concept numit “componente”, care reprezintă bucăți de cod reutilizabile și independent gestionate, ceea ce face ca dezvoltarea aplicațiilor web să fie mai ușoară și mai eficientă.

Există mai multe motive pentru a folosi React.js în dezvoltarea aplicațiilor web. Iată câteva dintre cele mai importante:

• Reutilizarea codului: React.js încurajează dezvoltatorii să creeze componente reutilizabile, ceea ce poate reduce semnificativ timpul de dezvoltare și poate duce la cod mai curat și mai ușor de întreținut.
• Performanța: React.js are o performanță excelentă datorită faptului că utilizează Virtual DOM, o tehnică care optimizează modul în care sunt actualizate paginile web, fără a necesita o reîncărcare completă a paginii.
• Comunitatea mare: React.js are o comunitate mare și activă de dezvoltatori, care împărtășesc cunoștințe și dezvoltă instrumente și biblioteci suplimentare care pot fi utilizate împreună cu React.js.

React.js diferă față de alte framework-uri prin abordarea sa modulară și component-based. În timp ce alte framework-uri web se concentrează pe construirea de pagini web întregi, React.js se concentrează pe construirea de componente reutilizabile. Această abordare modulară face ca dezvoltarea să fie mai ușoară și mai eficientă, deoarece dezvoltatorii pot construi și testa componente independent, apoi le pot folosi în diferite aplicații web fără a fi nevoie să le rescrie. De asemenea, React.js utilizează Virtual DOM pentru a gestiona actualizările paginii, ceea ce face ca aplicațiile să fie mai rapide și mai eficiente decât cele construite folosind alte framework-uri.

1. Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: https://nodejs.org/en/download/
2. Instalarea unui editor: VS Code https://code.visualstudio.com/download sau WebStorm https://www.jetbrains.com/webstorm/download (Recomandăm VS Code)
3. Rularea comenzii:

   npx create-react-app my-app

4. Accesarea directorului noului proiect creat cu comanda:

   cd my-app

5. Pornirea aplicației cu comanda:

   npm start

6. Accesarea aplicației la http://localhost:3000/

În React.js, componentele sunt blocuri de construcție fundamentale ale interfeței utilizatorului. Acestea sunt reutilizabile și pot fi combinate pentru a crea interfețe complexe. Există două tipuri de componente în React.js:

• Componente funcționale: Acestea sunt componente care sunt scrise sub formă de funcții și returnează JSX (JavaScript XML) care descrie cum ar trebui să arate componenta.

Exemplu de componentă funcțională:

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

• - Componente bazate pe clasă: Acestea sunt componente care sunt scrise sub formă de clase și extind clasa React.Component. Aceste componente au acces la proprietățile (props) și starea (state) componentei, precum și la diferite metode ale ciclului de viață(lifecycle) al React.

Exemplu de componentă bazată pe clasă: :

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Proprietățile (props) sunt argumente pe care le puteți transmite în componente. Acestea sunt folosite pentru a personaliza comportamentul unei componente și pot fi accesate prin intermediul obiectului props.

Exemplu de utilizare a proprietăților într-o componentă funcțională:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
const element = <Welcome name="John" />;
ReactDOM.render(element, document.getElementById('root'));

Starea (state) este o altă caracteristică importantă a componentelor React. Starea este utilizată pentru a gestiona datele componentelor care se pot schimba în timp. Starea este definită în constructorul componentei și poate fi actualizată prin apelarea metodei setState.

Exemplu de utilizare a stării într-o componentă bazată pe clasă:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

Comunicarea între componente este importantă pentru a construi aplicații complexe. În React.js, comunicarea între componente poate fi realizată prin transmiterea de proprietăți de la o componentă părinte la o componentă copil sau prin utilizarea unei funcții callback pentru transmiterea datelor dinspre copil spre părinte.

Componentele pot transmite date către componente copil prin intermediul proprietăților, iar acestea pot fi modificate în funcție de nevoile componente copil. Astfel, orice modificare a proprietăților din componenta părinte va fi reflectată automat în componenta copil.

Iată un exemplu de utilizare a acestui mod de comunicare:

import React from 'react';

function Parinte() {
  const data = { nume: 'Ion', prenume: 'Popescu' };

  return (
    <div>
      <h1>Bun venit, {data.nume} {data.prenume}!</h1>
      <Copil data={data} />
    </div>
  );
}

function Copil(props) {
  const { nume, prenume } = props.data;

  return (
    <div>
      <p>Nume: {nume}</p>
      <p>Prenume: {prenume}</p>
    </div>
  );
}

Pentru a comunica dintr-o componentă copil către o componentă părinte în React.js, se poate folosi o funcție callback. Această metodă constă în definirea unei funcții în componenta părinte, pe care o transmitem apoi către componenta copil ca proprietate. Componenta copil poate apela funcția atunci când are nevoie să transmită informații înapoi către componenta părinte.

Iată un exemplu de utilizare a acestei metode:

import React, { useState } from 'react';

function Parinte() {
  const [mesaj, setMesaj] = useState('');

  // Definim o funcție care primește un mesaj
  // și îl setează ca stare în componenta părinte
  const handleMesajSchimbat = (noulMesaj) => {
    setMesaj(noulMesaj);
  }

  return (
    <div>
      <p>Mesajul primit: {mesaj}</p>
      <Copil onMesajSchimbat={handleMesajSchimbat} />
    </div>
  );
}

function Copil(props) {
  const [mesaj, setMesaj] = useState('');

  // Funcție care apelează funcția de la părinte pentru a trimite mesajul
  // din copil înapoi către părinte
  const handleClick = () => {
    props.onMesajSchimbat(mesaj);
  }

  return (
    <div>
      <input type="text" value={mesaj} onChange={(event) => setMesaj(event.target.value)} />
      <button onClick={handleClick}>Trimite mesaj</button>
    </div>
  );
}

Routing-ul este procesul de gestionare a navigării între diferite pagini sau secțiuni ale unei aplicații web. În React.js, routing-ul este gestionat prin intermediul unei biblioteci numite React Router. React Router oferă un mecanism simplu de definire a rutelor în aplicație și de afișare a componentelor corespunzătoare acestor rute.

În React.js, rutarea este definită ca o asociere între un URL și o componentă.

Pentru a gestiona rutele în React.js, trebuie mai întâi instalată biblioteca React Router folosind un manager de pachete, cum ar fi npm sau Yarn:

npm install react-router-dom

Asa cum am prezentat anterior, auth0 are un tutorial foarte bun si usor de parcurs pentru integrarea cu frontendul nostru. In continuare, aveti cateva puncte care, mai mult sau mai putin, sunt prezentate si in tutorial:

Instalarea pachetului respectiv pentru React in proiectul nostru de React

npm install @auth0/auth0-react

Completarea unui fisier de configurare in care vom tine datele statice

const authSettings = {
  rolesKey: "******************",
  domain: '********************',
  clientId: "**********************",
  audience: "********************"
};

export { authSettings };

Configurarea componentei de tip provider, practic un wrapper peste aplicatia noastra

import React from "react";
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Auth0Provider } from "@auth0/auth0-react";
import { authSettings } from "./AuthSettings";

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={authSettings.domain}
      clientId={authSettings.clientId}
      redirectUri={window.location.origin}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

Redirectarea catre login daca utilizatorul nu este autentificat in componenta noastra de Routing

import React, { useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Analytics from "../pages/Admin/Analytics";
import Book from "../pages/Admin/Book";
import UserBooks from "../pages/User/Books";
import Books from "../pages/Admin/Books";
import Account from "../pages/User/Account";
import { useAuth0 } from "@auth0/auth0-react";

const Router = () => {
  const { isAuthenticated, loginWithRedirect } = useAuth0();

  useEffect(() => {
    if (!isAuthenticated) {
      loginWithRedirect();
    }
  }, [isAuthenticated, loginWithRedirect]);
  return (
    isAuthenticated && (
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<UserBooks />} />
          <Route exact path="/profile" element={<Account />} />
          <Route exact path="books" element={<Books />} />
          <Route exact path="books/:id" element={<Book />} />
          <Route exact path="analytics" element={<Analytics />} />
        </Routes>
      </BrowserRouter>
    )
  );
};

export default Router;

Adaugarea actiunii de Logout pe butoane

 onClick={() => {
              logout({ returnTo: window.location.origin });
            }}

Protejarea rutelor in functie de tipul de utilizator (admin/utilizator normal). De exemplu, ca si utilizator autentificat nu am niciun rol asignat (admin) inseamna ca nu voi avea dreptul sa vad paginile dedicate admin-ului, deci il voi redirectiona catre pagina lui principala in care vede cartile pe care le poate imprumuta.

useEffect(() => {
    if (user && user[authSettings.rolesKey].length === 0) {
      navigate("/");
    }
  }, [user]);

Dupa ce ati integrat frontendul cu Auth0, testarea este foarte simpla:

1. deschideti Network Tab in Browser Dev Tools
2. faceti un login
3. investigati call-ul prin care se intoarce tokenul, in sectiunea Preview

O sa vedeti 2 tokeni, Access Token si Id Token.

• Access token va fi trimis catre backend, pentru autorizare
• ID token este folosit de frontend, pentru extragerea datelor de profil

Pe JWT.io puteti investiga continutul tokenilor.

ID Tokenul ar trebui sa contina informatii de profil si rolul injectat la pasul 7 (daca este token pentru admin):

Access Tokenul ar trebui sa contina informatii legate de audienta pentru care poate fi folosit si permisiuni injectate la pasul 5, prin optiunea de RBAC: