Labo 2

Voor dit labo moet je de volgende theorie bekeken hebben:

Componenten
Props
Folder structuur
Styling

1. Simpele componenten

📂 Naam project: lab-components-basics
🔗 Basis project: n/a

Maak een nieuwe React applicatie aan en noem deze lab-components-basics.

Maak de volgende componenten aan:

Header met als props title en subtitle
List met als props items (array van strings).
- Elke string wordt getoond in een apart component ListItem met als props text.
- Gebruik hiervoor de map functie.
- Gebruik een ongeordende lijst (<ul>) om de items te tonen.
Footer met als props copy en year

Gebruik deze componenten in de App component om de volgende pagina te maken:

Labo 2

Basic components

item 1
item 2
item 3

Oplossingsvideo

2. Facebook cards

📂 Naam project: lab-components-facebook-card
🔗 Basis project: n/a

Maak een nieuw project aan en noem deze lab-components-facebook-card.

Neem de volgende code over.

Teken eerst op papier hoe je deze facebook card zou opdelen in componenten. Splits deze componenten op in aparte componenten. Zorg dat alle content aanpasbaar is via props.

Let er op dat componenten ook kunnen bestaan uit andere componenten.

Oplossingsvideo

3. Penguins

📂 Naam project: lab-components-penguin-gallery
🔗 Basis project: n/a

Maak een nieuw project aan en noem deze lab-components-penguin-gallery Penguins.json in je src folder.

importeer dit bestand in je project aan de hand van import penguins from './penguins.json';
Maak een component PenguinCard dat een penguin toont. Dit component aanvaard een property penguin met het type van een penguin uit het json bestand.
Filter de pinguïns zodat je enkel de vrouwelijke pinguïns toont (property gender is "Female").
Toon alle vrouwelijke pinguïns in een grid met 3 kolommen. Gebruik hiervoor css modules.

Female Penguins

Pip

Species ID: 1

Description: A playful young penguin fond of swimming.

Island: Macquarie Island

Waddle

Species ID: 1

Description: Leader of the rookery, very energetic.

Island: Macquarie Island

Pebble

Species ID: 4

Description: Collects colorful pebbles, gentle disposition.

Island: Antipodes Island

Splash

Species ID: 1

Description: Loves water sports, always active.

Island: Macquarie Island

Chilly

Species ID: 2

Description: Enjoys sliding on ice with friends.

Island: South Georgia

4. Slotmachine

📂 Naam project: lab-components-slot-machine
🔗 Basis project: lab-basics-slot-machine

Kopieer de slotmachine code van labo 1 en noem deze nieuwe applicatie lab-components-slot-machine en zorg voor de volgende dingen:

SlotMachine: aanvaard een property slots die het aantal slots aangeeft. Deze component bevat de logica om de slots te genereren en te tonen. Je kan deze component ook gebruiken om de logica te schrijven om te bepalen of de speler gewonnen heeft of verloren heeft.
```
<SlotMachine slots={5} />
```
Slot: deze component bevat de logica om een slot te tonen. De waarde van de slot wordt doorgegeven via een property value.
```
<Slot value={1} />
```
Zorg ervoor dat je meerdere slotmachines kan tonen op een pagina. Toon bijvoorbeeld een SlotMachine met 5 slots, een SlotMachine met 4 slots en een SlotMachine met 3 slots.
Gebruik css modules om de stijl van de slotmachine te bepalen. Je bent vrij om de stijl te kiezen.

De applicatie moet ongeveer er als volgt uitzien:

Labo 2: Slots

Je hebt verloren

Oplossingsvideo

5. Maaltafels component

📂 Naam project: lab-components-maaltafels
🔗 Basis project: lab-basics-multiplication-tables

Kopieer de maaltafels code van labo 1 naar een nieuw project en noem deze lab-components-maaltafels en zorg voor de volgende componenten:

MultiplicationTable: deze component bevat de logica om de tabel te tonen. Deze component bevat een property max die het maximum getal aangeeft dat getoond moet worden.
```
<MultiplicationTable max={5} />
```
MultiplicationRow: deze component bevat de logica om 1 rij van de tabel te tonen. Deze component bevat een property factor die het getal aangeeft waarvan de tafel getoond moet worden. Deze component bevat ook een property max die het maximum getal aangeeft dat getoond moet worden.
```
<MultiplicationRow factor={2} max={5} />
```
Header: deze component bevat de logica om de header van de tabel te tonen. Deze component bevat een property max die het maximum getal aangeeft dat getoond moet worden.
```
<Header max={5} />
```

De applicatie moet ongeveer er als volgt uitzien:

	1	2	3	4	5
1	1	2	3	4	5
2	2	4	6	8	10
3	3	6	9	12	15
4	4	8	12	16	20
5	5	10	15	20	25

	1	2	3	4	5	6	7
1	1	2	3	4	5	6	7
2	2	4	6	8	10	12	14
3	3	6	9	12	15	18	21
4	4	8	12	16	20	24	28
5	5	10	15	20	25	30	35
6	6	12	18	24	30	36	42
7	7	14	21	28	35	42	49

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100

6. Who's that pokemon?

📂 Naam project: n/a
🔗 Basis project: lab-basics-whos-that-pokemon

Kopieer het lab-basics-whos-that-pokemon project van labo 1 naar een nieuw project.

Maak een nieuw component PokemonImage dat de afbeelding van een pokemon toont. Deze component aanvaardt de volgende properties:

id: het id van de pokemon (1 = Bulbasaur, 2 = Ivysaur, ...)
visible: boolean die aangeeft of de pokemon zichtbaar is of niet. Indien deze false is, moet de afbeelding zwart gemaakt worden (gebruik hiervoor de CSS filter brightness(0))
size: de grootte van de afbeelding in pixels (standaard 200)

Toon in de App component twee keer de PokemonImage component. Eén keer met visible op false en één keer met visible op true.

7. Rainbow Props

📂 Naam project: lab-components-rainbow-props
🔗 Basis project: lab-basics-rainbow

Maak een kopie van de lab-basics-rainbow applicatie van labo 1 naar een nieuw project en noem deze lab-components-rainbow-props. En zorg voor de volgende componenten:

Rainbow: Heeft een property amount die het aantal kleuren aangeeft. Heeft ook een property direction die de richting van de kleuren aangeeft. Deze kan ofwel "horizontal" ofwel "vertical" zijn. Je kan de richting van de regenboog bepalen door de flexDirection van de container aan te passen.
RainbowLine: Heeft een property color die de kleur van de lijn aangeeft. Heeft ook een property direction die de richting van de lijn aangeeft. Deze kan ofwel "horizontal" ofwel "vertical" zijn. De hoogte van de lijn is 4px indien de richting "horizontal" is, anders is de hoogte 100px.

Je kan dus bijvoorbeeld de volgende code gebruiken om een horizontale en een verticale regenboog te tonen:

<Rainbow amount={10} direction="horizontal"/>
<Rainbow amount={20} direction="vertical"/>

Dit zal de volgende output geven:

	1	2	3	4	5	6	7
1	1	2	3	4	5	6	7
2	2	4	6	8	10	12	14
3	3	6	9	12	15	18	21
4	4	8	12	16	20	24	28
5	5	10	15	20	25	30	35
6	6	12	18	24	30	36	42
7	7	14	21	28	35	42	49

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100

	1	2	3	4	5	6	7
1	1	2	3	4	5	6	7
2	2	4	6	8	10	12	14
3	3	6	9	12	15	18	21
4	4	8	12	16	20	24	28
5	5	10	15	20	25	30	35
6	6	12	18	24	30	36	42
7	7	14	21	28	35	42	49

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100

1. Simpele componenten​

Oplossingsvideo​

2. Facebook cards​

Oplossingsvideo​

3. Penguins​

Female Penguins

Pip

Waddle

Pebble

Splash

Chilly

4. Slotmachine​

Labo 2: Slots

Oplossingsvideo​

5. Maaltafels component​

6. Who's that pokemon?​

7. Rainbow Props​

1. Simpele componenten

Oplossingsvideo

2. Facebook cards

Oplossingsvideo

3. Penguins

4. Slotmachine

Oplossingsvideo

5. Maaltafels component

6. Who's that pokemon?

7. Rainbow Props

	1	2	3	4	5	6	7
1	1	2	3	4	5	6	7
2	2	4	6	8	10	12	14
3	3	6	9	12	15	18	21
4	4	8	12	16	20	24	28
5	5	10	15	20	25	30	35
6	6	12	18	24	30	36	42
7	7	14	21	28	35	42	49

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100