Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:08 [2021/04/25 21:42] alexandru.hogea |
pw:laboratoare:08 [2021/04/25 22:35] (current) alexandru.hogea [Exercitii] |
||
|---|---|---|---|
| Line 74: | Line 74: | ||
| === 1.3 useReducer() === | === 1.3 useReducer() === | ||
| - | [[https://reactjs.org/docs/hooks-reference.html#usecallback|useReducer]], este o alternativa pentru useState(). Accepta un reducer de tip <code>(state, action) => newState</code> si returneaza state-ul curent si o metoda dispatch. Este recomandat sa fie folosit daca logica state-ului este mai complexa. | + | [[https://reactjs.org/docs/hooks-reference.html#usereducer |useReducer]], este o alternativa pentru useState(). Accepta un reducer de tip <code>(state, action) => newState</code> si returneaza state-ul curent si functia dispatch. Dispatch, care primeste o actiune ca argument, declanseaza actualizarea state-ului in functie de actiunea folosita. |
| + | |||
| + | Un reducer este o functie care primeste state-ul curent si o actiune si returneaza state-ul modificat, actiunea fiind modalitatea prin care se precizeaza cum se va modifica state-ul. O actiune este un obiect care trebuie obligatoriu sa aiba un tip (**type**). | ||
| + | |||
| + | Este recomandat sa fie folosit daca logica state-ului este mai complexa. | ||
| {{ :pw:laboratoare:screenshot_2021-04-25_at_21.39.15.png?nolink&700 |}} | {{ :pw:laboratoare:screenshot_2021-04-25_at_21.39.15.png?nolink&700 |}} | ||
| Line 87: | Line 91: | ||
| <note important>Componenta **Count** si **App** trebuie sa fie componente functionale. Pentru afisarea alertei va trebui sa folositi **useEffect()**. Valoarea lui count va fi definita drept state in App, la fel si functiile de incrementare, decrementare si reset.</note> | <note important>Componenta **Count** si **App** trebuie sa fie componente functionale. Pentru afisarea alertei va trebui sa folositi **useEffect()**. Valoarea lui count va fi definita drept state in App, la fel si functiile de incrementare, decrementare si reset.</note> | ||
| - | 2. Instalati biblioteca **node-sass**. hint: **npm** | + | 2. Modificati fisierele de css din extensia **.css** in **.scss**, daca nu ati folosit Sass in laboratorul trecut. |
| - | + | ||
| - | 3. Modificati fisierele de css din extensia **.css** in **.scss**, daca nu ati folosit Sass in laboratorul trecut. | + | |
| <note important> | <note important> | ||
| De asemenea, React permite modularizarea fisierelor SCSS prin denumirea acestora in **numeFisier.module.scss**. | De asemenea, React permite modularizarea fisierelor SCSS prin denumirea acestora in **numeFisier.module.scss**. | ||
| Line 140: | Line 142: | ||
| </note> | </note> | ||
| - | 4. Stilizarea **Header**, **Nav** si **Footer**. | + | 3. Modificati counter-ul astfel incat sa nu mai afiseze un numar, ci sa afiseze o imagine de **counter** ori. Stilizarea interfetei poate urma design-ul de mai jos, folosind culorile alese si fontul, dar tematica poate fi schimbata dupa propriile idei (Puteti sa faceti o tema inspirata dintr-un film sau natura). |
| + | |||
| + | {{ :pw:laboratoare:screenshot_2021-04-25_at_22.34.34.png?nolink&700 |}} | ||
| + | |||
| + | |||
| + | {{ :pw:laboratoare:screenshot_2021-04-25_at_22.29.40.png?nolink&700 |}} | ||
| - | * Nav: va prezenta in partea din stanga un logo si 3 meniuri (**Home, Books, Authors**) iar in partea din dreapta, un meniu de tip Dropdown cu un buton de **Logout** | + | 4. Componenta Layout va trebui sa alcatuiasca toata interfata utilizator, folosind **Header**, **props.children** si **Footer**. |
| - | * Header: va afisa ca background o imagine (la libera alegere) | + | |
| - | * Footer: poate avea orice culoare, iar in Footer se va afisa Prenumle si Numele studentului, facultatea si anul absolvirii. | + | |
| - | 5. Componenta Layout va trebui sa alcatuiasca toata interfata utilizator, folosind **Header**, **Nav** si **Footer**. | + | |
| | | ||
