Show page

Differences

This shows you the differences between two versions of the page.

--- pw:laboratoare:04 [2023/02/24 12:49]
ciprian.dobre [Introducere in React.js]
+++ pw:laboratoare:04 [2023/04/24 21:02] (current)
ciprian.dobre [Crearea unui proiect React]
@@ Line 1: / Line 1: @@
-======= Laboratorul 04: React.js =======
+======= Laboratorul 04: Introducere in React.js =======
-===== Ce este React.js? =====
+===== Introducere =====
+==== Ce este React.js? ====
 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ă.
-===== De ce să folosiți React.js? =====
+==== De ce să folosiți React.js? ====
 Există mai multe motive pentru a folosi React.js în dezvoltarea aplicațiilor web. Iată câteva dintre cele mai importante:
@@ Line 14: / Line 16: @@
-===== Ce face React.js diferit față de alte framework-uri? =====
+==== Ce face React.js diferit față de alte framework-uri? ====
 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.
@@ Line 22: / Line 24: @@
   - Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: [[https://nodejs.org/en/download/]]
   - Instalarea unui editor: VS Code [[https://code.visualstudio.com/download]] sau WebStorm [[https://www.jetbrains.com/webstorm/download]] (Recomandăm VS Code)
-  - Rularea comenzii: <code>npx create-react-app my-app</code>
+  - Rularea comenzii: <code>npx create-react-app my-app
+npx create-react-app my-app --template typescript // pentru initializarea cu TypeScript
+</code>
   - Accesarea directorului noului proiect creat cu comanda:<code>cd my-app</code>
   - Pornirea aplicației cu comanda: <code>npm start</code>
   - Accesarea aplicației la [[http://localhost:3000/]]
+<note tip>Ca sa va ajutam pentru proiect aveti [[https://gitlab.com/mobylabwebprogramming/reactfrontend|aici]] un proiect de baza de la care sa plecati ca sa va implementati frontendul pentru proiect.</note>
-===== Ce sunt componente și cum le puteți defini =====
+===== Componente React.js =====
+==== Ce sunt componente și cum le puteți defini? ====
 Î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:
@@ Line 47: / Line 54: @@
 }
 </code>
-===== Routing in React.js =====
+==== Proprietăți (props) și stare (state) în React.js ====
+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ă:
+<code>
+function Welcome(props) {
+  return <h1>Hello, {props.name}!</h1>;
+}
+const element = <Welcome name="John" />;
+ReactDOM.render(element, document.getElementById('root'));
+</code>
+<note>Aici, name este o proprietate transmisă către componenta Welcome. Această proprietate poate fi accesată în componentă prin intermediul obiectului props.</note>
+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ă:
+<code>
+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'));
+</code>
+<note>În acest exemplu, starea este definită în constructorul componentei și reprezintă numărul de apăsări ale butonului. Butonul declanșează metoda setState, care actualizează starea și determină re-renderizarea componentei.</note>
+==== Comunicare între componente ====
 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.
@@ Line 130: / Line 181: @@
 </note>
-===== Ce este Auth0? =====
+===== Routing in React.js =====
-Auth0 este o platforma de gestionare a conturilor de utilizatori care ofera suport pentru autentificare si autorizare.
-Avantajul in utilizarea unui 3rd party pentru gestionarea conturilor, autentificare si autorizare este ca puteti sa faceti foarte usor outsourcing la responsabilitatile ce tin de securitatea conturilor. Deoarece securitatea este foarte importanta, este foarte usor sa gresiti, mai ales la inceput de drum. Si greselile, de obicei, implica litigii pe sume foarte mari de bani. Este de preferat sa folositi un tert pentru a evita orice potentiale probleme.
+==== Ce este routing-ul și cum funcționează în React.js? ====
-Auth0 ofera suport pentru majoritatea tehnologiilor si are un sistem de configurare usor adaptabil.
+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.
-==== Cum se configureaza Auth0? ====
+În React.js, rutarea este definită ca o asociere între un URL și o componentă.
-=== Pasul 1: Crearea unui cont ===
+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:
-Pentru a lucra cu Auth0, trebuie [[https://auth0.com/signup?place=header&type=button&text=sign%20up|sa va creati un cont]]. Este gratuit. Puteti sa va creati un cont de la 0 sau sa folositi conturi deja existente de Google, Microsoft sau GitHub.
+<code>npm install react-router-dom</code>
+==== Utilizarea React Router ====
-=== Pasul 2: Inregistrarea unei aplicatii ===
+După ce a fost instalat React Router, se pot defini rutele în aplicație.
-Aplicatiile reprezinta **clienti** care se vor conecta la sistemul Auth0 pentru operatii de autentificare si autorizare. Din cadrul aplicatiilor veti putea efectua operatii precum //login, register, logout// in Auth0. Mai mult, aplicatiile vor primi **2 tokeni** de la Auth0 inapoi, pentru a valida faptul ca autentificarea s-a realizat cu succes.
-Unul dintre acesti 2 tokeni reprezinta un **ID Token**, si are informatie embedded despre utilizator. Celalalt token reprezinta un **Access Token** si va fi folosit in comunicarea cu API-uri, in procesul de __autorizare__.
-{{:pw:laboratoare:auth0creareaplicatie.png?800|}}
-=== Pasul 3: Configurarea unei aplicatii in cadrul Auth0 ===
-In functie de tehnologia pe care o folositi, Auth0 va ofera un ghid.
-{{:pw:laboratoare:auth0quickstart.png?800|}}
-<note tip>Va recomandam sa urmariti ghidul, deoarece este foarte bine explicat.</note>
-=== Pasul 4: Inregistrarea unui API in cadrul Auth0 ===
-Chiar daca nu lucram inca la backend, este necesar sa inregistram API-ul pe care il vom dezvolta in cadrul Auth0, pentru a putea realiza setarile pentru **roluri si permisiuni**. Setarile acestui API vor fi folosite de noi, atunci cand vom dezvolta backendul, pentru a putea autoriza cererile care vin de la client (frontend) cu **Access Token-ul** primit de la Auth0.
-Inregistrarea unui API este si ea foarte simpla.
-{{:pw:laboratoare:auth0creareapi.png?800|}}
-<note tip>Nu conteaza ce url puneti in cadrul **Identifier**, pentru ca el nu va fi nicidoata apelat. Este utilizat doar pentru identificare si pentru crearea de token.</note>
-=== Pasul 5: Configurare permisiuni ===
-Pentru a putea folosi permisiunile in cadrul API-urilor pe care le vom crea, este necesar sa activam doua optiuni care permit injectarea permisiunilor in **Access Token**.
-{{:pw:laboratoare:rbacactivatauth0.png?800|}}
-Dupa ce ati facut acest lucru, trebuie sa adaugam o serie de permisiuni. Pentru cazul nostru, ne intereseaza sa filtram utilizatorii dupa capabilitati de admin. Asadar, avem nevoie doar de o permisiune, si anume, cea de **administrator**.
-Adaugarea unei permisiuni este si ea, foarte simpla:
-{{:pw:laboratoare:auth0setarepermisiuni.png?800|}}
-<note tip>Permisiunile vor fi vizibile in **Access Token** si vor fi citite de catre backend. Pe baza lor, backendul va sti sa restrictioneze sau nu accesul la anumite resurse. </note>
-=== Pasul 6: Configurare roluri pentru utilizatori ===
-Dupa ce avem permisiunile de accesare a API-ului create, putem sa le asignam unor roluri de utilizatori. Nu este obligatoriu sa facem asta, insa rolurile ajuta pentru agregarea mai multor permisiuni sub aceeasi umbrela.
-In primul rand, trebuie sa cream un rol:
-{{:pw:laboratoare:auth0crearerol.png?800|}}
-Dupa ce avem rolul creat, trebuie sa ii asignam permisiunile. Dati click pe rol, si apoi asignati-i permisiunea creata anterior:
-{{:pw:laboratoare:auth0asignarepermisiunirol.png?800|}}
-<note tip>Rolurile sunt folosite de Auth0 ca sa agrege mai multe permisiuni impreuna. In plus, rolurile pot fi incluse in **ID Token** si frontendul poate vedea rolul, pentru a randa pagini diferite, in functie de rol. Noi avem nevoie de aceasta functionalitate.</note>
-=== Pasul 7: Injectarea rolului in ID Token ===
-Asa cum am spus anterior, frontendul trebuie sa stie cine este admin si cine nu, pentru a putea afisa diferit informatiile. De asemenea, nu este indicat ca frontendul sa acceseze **Access Token**-ul, deoarece acela este destinat pentru backend.
-Pentru a putea adauga informatii in **ID Token**, Auth0 ofera **Actions**. Actions reprezinta niste middlewares care sunt injectate in procesele de autentificare si autorizare si sunt complet customizabile.
-Pentru a injecta rolul in ID Token, este necesar sa adaugam un middleware in procesul de login:
-{{:pw:laboratoare:auth0injectareuserrole.png?800|}}
-<note important>Atentie la proprietatea pe care o setati in cadrul **ID Token**-ului. Trebuie **obligatoriu** sa fie in format de url, si sa inceapa cu http sau https. Altfel va fi ignorata de catre Auth0. Acest lucru face parte din standardul OpenID Connect de includere a properitatilor custom in token-uri.</note>
-=== Pasul 8: Asignare rol la utilizator (viitor) ===
-Felicitari! Daca ati ajuns aici, inseamna ca aveti sistemul pregatit pentru operatiile de autentificare si autorizare. Ultimul pas este acela de a asigna roluri utilizatorilor. In cadrul proiectului nostru, a librariei online, avem nevoie de **un administrator**.
-Asadar, va trebui creat un cont in platforma, folosind functionalitatea oferita de Auth0, integrata in frontendul nostru si apoi, din dashboardul Auth0, va trebui sa ii asignam acestui cont, rolul creat anterior.
-{{:pw:laboratoare:auth0asignareroluser.png?800|}}
-<note tip>Odata cu asignarea rolului, s-a asignat automat si permisiunea creata anterior. </note>
-<note tip>Doar utilizatorii care vor avea rolul de admin asignat (si deci permisiunea de admin asignata) vor putea efectua operatii pe backend disponibile doar adminilor.</note>
-===== Integrare Auth0 cu React =====
-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:
-=== Pasul 1: Instalarea pachetului Auth0 ===
-Instalarea pachetului respectiv pentru React in proiectul nostru de React <code>npm install @auth0/auth0-react</code>
-=== Pasul 2: Configurare ===
-Completarea unui fisier de configurare in care vom tine datele statice
 <code>
-const authSettings = {
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-  rolesKey: "******************",
+import PaginaPrincipala from './PaginaPrincipala';
-  domain: '********************',
+import PaginaDespre from './PaginaDespre';
-  clientId: "**********************",
+import PaginaContact from './PaginaContact';
-  audience: "********************"
-};
-export { authSettings };
+function App() {
-</code>{{:pw:laboratoare:auth0_audience.png?700|}}
+  return (
-<note important>Valorile cu stelute trebuie completate cu valorile voastre proprii!!!</note>
+    <Router>
-<note tip>RolesKey reprezinta numele proprietatatii custom pe care voi ati setat-o in **Actions** la pasul 7</note>
+      <div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Pagina principală</Link>
+            </li>
+            <li>
+              <Link to="/despre">Despre noi</Link>
+            </li>
+            <li>
+              <Link to="/contact">Contact</Link>
+            </li>
+          </ul>
+        </nav>
-<note tip>Domain si ClientId sunt informatii care tin de contul vostru de Auth0 si aplicatia inregistrata la pasul 1. </note>
+        <Route path="/" exact component={PaginaPrincipala} />
+        <Route path="/despre" component={PaginaDespre} />
-<note tip>Audienta reprezinta API-ul catre care frontendul va putea face call-uri autorizate de catre Auth0. Nu uitati ca la inceput am configurat si un API in Auth0.</note>
+        <Route path="/contact" component={PaginaContact} />
+      </div>
-=== Pasul 3: Configurarea providerului ===
+    </Router>
-Configurarea componentei de tip provider, practic un wrapper peste aplicatia noastra
+  );
-<code>
+}
-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")
-);
 </code>
-=== Pasul 4: Login ===
+<note>În acest exemplu, am definit trei rute diferite, fiecare asociată cu o componentă. Prima rută, definită cu exact path="/", este asociată cu componenta PaginaPrincipala și va fi afișată atunci când utilizatorul navighează la URL-ul rădăcină al aplicației. A doua rută, definită cu path="/despre", este asociată cu componenta PaginaDespre și va fi afișată atunci când utilizatorul navighează la URL-ul "/despre". A treia rută, definită cu path="/contact", este asociată cu componenta PaginaContact și va fi afișată atunci când utilizatorul navighează la URL-ul "/contact".</note>
-Redirectarea catre login daca utilizatorul nu este autentificat in componenta noastra de Routing <code>import React, { useEffect } from "react";
+O altă caracteristică puternică a React Router este capacitatea de a utiliza parametri în rute. Aceasta poate fi utilă, de exemplu, pentru a afișa detaliile unui anumit element dintr-o listă.
-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 = () => {
+<code>
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import ListaProduse from './ListaProduse';
+import DetaliiProdus from './DetaliiProdus';
-  useEffect(() => {
+function App() {
-    if (!isAuthenticated) {
-      loginWithRedirect();
-    }
-  }, [isAuthenticated, loginWithRedirect]);
   return (
-    isAuthenticated && (
+    <Router>
-      <BrowserRouter>
+      <div>
-        <Routes>
+        <nav>
-          <Route exact path="/" element={<UserBooks />} />
+          <ul>
-          <Route exact path="/profile" element={<Account />} />
+            <li>
-          <Route exact path="books" element={<Books />} />
+              <Link to="/">Pagina principală</Link>
-          <Route exact path="books/:id" element={<Book />} />
+            </li>
-          <Route exact path="analytics" element={<Analytics />} />
+            <li>
-        </Routes>
+              <Link to="/produse">Produse</Link>
-      </BrowserRouter>
+            </li>
-    )
+          </ul>
+        </nav>
+        <Route exact path="/" component={PaginaPrincipala} />
+        <Route exact path="/produse" component={ListaProduse} />
+        <Route path="/produse/:id" component={DetaliiProdus} />
+      </div>
+    </Router>
   );
-};
+}
-export default Router;
 </code>
-=== Pasul 5: Logout ===
-Adaugarea actiunii de Logout pe butoane
-<code> onClick={() => {
-              logout({ returnTo: window.location.origin });
-            }}</code>
-=== Pasul 6: Protejarea rutelor in functie de rol ===
-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. <code>useEffect(() => {
-    if (user && user[authSettings.rolesKey].length === 0) {
-      navigate("/");
-    }
-  }, [user]);
-</code>
-==== Testarea integrarii =====
-Dupa ce ati integrat frontendul cu Auth0, testarea este foarte simpla:
-  - deschideti **Network Tab** in Browser Dev Tools
-  - faceti un login
-  - investigati call-ul prin care se intoarce tokenul, in sectiunea **Preview**
-{{:pw:laboratoare:auth0tokens.png?800|}}
-O sa vedeti 2 tokeni, **Access Token** si **Id Token**.
+<note>În exemplul de mai sus, ruta /produse/:id include un parametru id care poate fi utilizat pentru a afișa detaliile produsului cu id-ul specificat. Acest parametru poate fi accesat în componenta DetaliiProdus folosind obiectul match.params din React Router.</note>
-  * Access token va fi trimis catre backend, pentru **autorizare**
+===== Sarcini de laborator =====
-  * ID token este folosit de frontend, pentru extragerea datelor de profil
-=== Investigarea tokenilor ===
+Instalați-vă uneltele necesare pentru laborator și cereți ajutorul daca întâmpinați dificultăți.
-Pe [[http://www.jwt.io|JWT.io]] puteti investiga continutul tokenilor.
+Creați un nou proiect și porniți-l. Daca aveți întrebări, întrebați asistentul/a, mai multe informații o să fie furnizate la următoarele laboaratoare.
-**ID Tokenul** ar trebui sa contina informatii de profil si **rolul injectat** la pasul 7 (daca este token pentru admin):
-{{:pw:laboratoare:auth0idtoken.png?800|}}
+===== Linkuri Utile =====
-**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:
+  * GitLab Schelet Frontend: [[https://gitlab.com/mobylabwebprogramming/reactfrontend]]
+  * Node.js: [[https://nodejs.org/en/download/]]
+  * VS Code [[https://code.visualstudio.com/download]]
+  * WebStorm [[https://www.jetbrains.com/webstorm/download/]]
+  * Tutorial React.js: [[https://reactjs.org/tutorial/tutorial.html]]
-{{:pw:laboratoare:auth0accesstoken.png?800|}}

Cursuri

Link UPB Cursuri

Laboratoare

Proiect

Guidline Proiect

pw/laboratoare/04.1677235758.txt.gz · Last modified: 2023/02/24 12:49 by ciprian.dobre

Show page Old revisions

Media Manager Back to top