Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:08 [2021/04/25 22:30] alexandru.hogea [Exercitii] |
pw:laboratoare:08 [2021/04/25 22:35] (current) alexandru.hogea [Exercitii] |
||
|---|---|---|---|
| Line 91: | 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 144: | Line 142: | ||
| </note> | </note> | ||
| - | 4. 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). | + | 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.48.png?nolink&700 |}} | ||
| {{ :pw:laboratoare:screenshot_2021-04-25_at_22.29.40.png?nolink&700 |}} | {{ :pw:laboratoare:screenshot_2021-04-25_at_22.29.40.png?nolink&700 |}} | ||
| - | 5. Componenta Layout va trebui sa alcatuiasca toata interfata utilizator, folosind **Header**, children si **Footer**. | + | 4. Componenta Layout va trebui sa alcatuiasca toata interfata utilizator, folosind **Header**, **props.children** si **Footer**. |
| | | ||
