Table of Contents

Laboratorul 09: React Router & Request-uri HTTP

Premisa

In cadrul acestui laborator, vom accesa backend-ul creat la Laboratorul 5. Cel mai recomandat este sa il clonati din nou si sa dati docker-compose up. Atat serverul cat si baza de date ruleaza amandoua in Docker.

1. React Router

React Router DOM este un API creat pentru React pentru a “simula” un browser history pentru aplicatia noastra. Deoarece aplicatia noastra este un Single Page Application (SPA), browser-ul nostru nu navigheaza prin fisiere html.

1.1. Instalare React Router

Pentru a instala react-router-dom trebuie sa executam urmatoarea comanda: 

npm install react-router-dom

1.2. Utilizarea React Router

Utilizarea React Router-ului se realizeaza in 3 pasi:

Schimbarea continutului dinamic se realizeaza prin folosirea componentei <Link> din react-router-dom

2. Axios si Request-uri HTTP

Axios este o biblioteca JavaScript folosita pentru a face Request-uri HTTP din Node.Js sau XMLHttpRequest din browser, cerinta principala fiind compatibilitatea cu ES6 Promise API.

2.1. Caracteristici principale

2.2. Instalare axios

npm install axios

2.3. HTTP Get

2.4. HTTP Post

2.5. HTTP Put

2.6. HTTP Delete

2.7. HTTP Request cu Headers

Pe langa HOST (localhost in cazurile de mai sus), trebuie mentionat si portul si protocolul. Pentru acest laborator o sa fie http://localhost:3000

Exercitii

Pentru vizualizarea detaliilor, puteti intra pe acest link si alegand optiunea </> din meniul vertical aflat in dreapta.

Pentru ilustratie puteti folosi Undraw. Ilustratia folosita in design poate fi gasita cautand 'Tree swing'.

1. Creati o componenta Autentificare care sa contina un formular cu doua campuri text si un buton de Submit respectiv Register.

Componenta Autentificare va fi responsabila de a trimite un request de tip POST catre API, avand in body datele necesare autentificarii respectiv inregistrarii utilizatorului. 

{
   username: "admin",
   password: "admin"
}

Raspunsul primit de la server, in cazul login, va contine token-ul JWT. Stocarea token-ului se face in browser, folosind localStorage.

Stocare token in localStorage 

localStorage.setItem("token", jwt_token);

Citirea token-ului din localStorage 

localStorage.getItem("token")

2. Creati doua componente, Book si Author, care sa afiseze detaliile despre fiecare carte, respectiv autor. Stilizarea poate sa urmeze design-ul de mai sus. Nu este obligatorie copierea exacta a design-ului, importanta este afisarea datelor.

3. Creati o componenta BooksList care sa contina o lista cu toate cartile existente, respectiv AuthorsList care sa contina o lista cu toti autorii existenti in baza de date. Pentru afisarea tuturor cartilor, respectiv autorilor, se vor folosi componentele create anterior, Book si Author. Aceste componente pot fi reprezentate de paginile Books si Authors din design. Din nou, nu este obligatorie respectarea design-ului.

4. Componentele BooksList si AuthorsList trebuie sa trimita cate un request de HTTP Get pentru a aduce toate intrarile din baza de date.

Cererile catre server pot fi date fie la apasarea pe un buton, fie atunci cand se incarca componenta (hint, useEffect)