Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:08 [2021/04/25 21:19] alexandru.hogea [Exercitii] |
pw:laboratoare:08 [2021/04/25 22:35] (current) alexandru.hogea [Exercitii] |
||
|---|---|---|---|
| Line 35: | Line 35: | ||
| * **componentDidUpdate** - metoda care se executa dupa ce state sau props au fost modificate | * **componentDidUpdate** - metoda care se executa dupa ce state sau props au fost modificate | ||
| * **componentWillUnmount** - metoda care se executa inainte de stergerea componentei - adica este scoasa din DOM | * **componentWillUnmount** - metoda care se executa inainte de stergerea componentei - adica este scoasa din DOM | ||
| + | |||
| + | {{ :pw:laboratoare:react_events.png?nolink&700 |}} | ||
| In principal, **efectele** declarate folosind **useEffect** se realizeaza, prin analogie, in **componentDidMount**, **componentDidUpdate** si, daca este declarat un comportament specific si in **componentWillUnmount**. | In principal, **efectele** declarate folosind **useEffect** se realizeaza, prin analogie, in **componentDidMount**, **componentDidUpdate** si, daca este declarat un comportament specific si in **componentWillUnmount**. | ||
| Line 69: | Line 71: | ||
| {{:pw:laboratoare:react_hook_clasa_3.png|}} | {{:pw:laboratoare:react_hook_clasa_3.png|}} | ||
| + | |||
| + | === 1.3 useReducer() === | ||
| + | |||
| + | [[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 |}} | ||
| + | |||
| + | |||
| + | |||
| ==== Exercitii ==== | ==== Exercitii ==== | ||
| Line 76: | 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 129: | 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**. | + | |
| | | ||
