Laboratorul 10: React Router & Request-uri HTTP
Premisa
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:
- Adaugarea dependintelor din react-router-dom (HashRouter, Switch si Route)
- Inglobarea tuturor componentelor din cadrul aplicatiei in <HashRouter> si <Switch>
- Definirea rutelor folosind <Route>
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
- XMLHttpRequests din browser
- Request-uri HTTP din Node.JS
- Suporta Promise API
- Interceptare request-uri si responses
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
Exercitii
1. Creati o componenta Autentificare care sa contina un formular cu doua campuri text si un buton de Submit respectiv Register.
{
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 nu este momentan importanta, ne vom concentra pe acest aspect in laboratorul urmator. Este destul sa afiseze chiar si un simplu JSON.
3. Creati o componenta BooksList care sa contina o lista cu toate cartile existente, respectiv AuthorsList care sa contina o lista cu toati autorii existenti in baza de date. Pentru afisarea tuturor cartilor, respectiv autorilor, se vor folosi componentele create anterior, Book si Author. Din nou, stilizarea nu reprezinta o prioritate.
4. Componentele BooksList si AuthorsList trebuie sa trimita cate un request de HTTP Get pentru a aduce toate intrarile din baza de date.
<Route path="/:id" component={Author} />
