# Exercices: Les composants
### Before we start
- **Javascript ES6 Syntax:** https://devhints.io/es6
- **React Native component:** https://reactnative.dev/docs/components-and-apis
- <div style="display: flex; align-items: center; gap: 30px">
<strong>
Application d'exemple expo:
</strong>
<img src="https://hackmd.io/_uploads/rJw9GpR1T.png" style="width: 20%;height: auto;"/>
</div>
### Exercice 1: "Hello you"
::: warning
Les exercices **1.1** à **1.4** doivent utiliser la méthode d'écriture de composants fonctionnel !
:::
#### 1.1 ---
Ecrire un composant qui affiche `Hello 'name'`, `name` étant votre nom donné en paramètre du composant, en props. Ce nom doit pouvoir être dynamique et ne doit pas être écrit en dur dans le composant. Ce composant doit donc pouvoir être utilisé plusieurs fois pour afficher différent `Hello`.
```jsx
<Hello name="Vincent" /> // Doit afficher "Hello Vincent"
<Hello name="José" /> // Doit afficher "Hello José"
```
---
#### 1.2 ---
Utilisez le composant précédent pour afficher “Hello 'name'”, `name` étant toujours votre nom donné en paramètre, ainsi qu'un text passé dans le composant. Pour cela cherchez et servez vous de la propriété `children`
###### `Exemple:`
``` jsx
<Hello name="Vincent"> Je suis développeur React-Native </Hello>
// Doit afficher "Hello Vincent, Je suis développeur React-Native"
```
---
#### 1.3 ---
En utilisant le composant précédent affichez votre nom, âge et ville de naissance. Ainsi qu'une brève description de vous. Cette description ne doit pas faire partie des props du composant comme le reste mais être imbriqué entre les deux "balises".. :wink::wink:
::: info
Ecrivez ce composant en utilisant la destructuration des propriété.
[Object destructuring](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#d%C3%A9composer_un_objet)
:::
###### `Exemple:`
```
Je suis Vincent, j'ai 52 ans et je suis né à Roanne.
Ce paragraphe est ma description mais n'a pas été passé par les props.
```
---
#### 1.4 ---
Créez un composant `<MyButton />` auquel vous pouvez passez une action sous forme de callback (`onPress`) et un titre (`label`). Servez vous du composant `TouchableOpacity` de React-Native.
###### `Exemple:`
``` jsx
<Button
label="Dire bonsoir"
onPress={() => Alert.alert('Bonsoir')}
/>
```
#### 1.5 ---
Refaire chaque exercice précédent en utilisant la méthode d'écriture de composant en class (cf le prof et les vidéos).
GL HF ! :innocent:
> **PS:** Si vraiment vous avez galéré et/ou pas assez avancé à votre goût. Vous pouvez passer cette partie. Cependant c'est bon de connaitre les deux approches. Beaucoup de projet reposent encore sur les classe aujourd'hui.
<br/>
### Exercice 2: Styles
::: info
Des liens vers la doc des flexboxs et des styles sont disponibles ici:
* [Styler ses composants](https://reactnative.dev/docs/style)
* [Flexbox](https://reactnative.dev/docs/flexbox)
et l'internet mondial connecté, du monde des images et des objets.
:::
::: warning
Continuez désormais avec l'écriture de composants fonctionnel !
:::
#### 2.1 ---
| Ennoncé | Style |
| -------- | -------- |
| En reprenant votre composant "Hello" créé sur l'exercice 1, appliqué des styles "internalisés" pour reproduire cet aspect: |  |
:::spoiler
Les styles internalisés sont des styles passés en propriété aux composants. Un peu comme les style "inline" en HTML sur les éléments. Je ne vais pas vous donner toute les réponses quand même !
:::
#### 2.2 ---
Faites de même en utilisant les styles externalisé avec `StyleSheet`.
###### `Exemple:`
``` javascript
const styles = StyleSheet.create({
....
})
```
:::spoiler
**JeBaited**: https://linguaholic.com/linguablog/the-meaning-of-jebaited/
:::
#### 2.3 ---
| Ennoncé | Style |
| -------- | -------- |
| En utilisant les flexBox faite en sorte que votre composant suive l'affichage suivant: |  |
#### 2.4 ---
| Ennoncé | Style |
| -------- | -------- |
| Toujours à l'aide des flexBox et de leur proriétés, modifier votre affichage comme suit: |  |
<br/>
### Exercice 3: State
:::danger
Cet exercice doit être réalisé avec un composant **class**. Le state est géré différement avec les composant fonctionnels. Nous le verrons dans la partie sur les Hooks
:::
#### 3.1 ---
Faire une simple application **React Native** avec une page pour selectionner plusieurs élément d'une liste.
1. Afficher 5 checkboxes
2. La première doit selectionner/déselectionner tout les checkboxs
3. Les autres se selectionnent elles même
4. Sélectionner toutes les checkbox selectionnera la checkbox "select all" automatiquement
Le composant `Checkbox.js` vous est fourni dans le partage.
###### `Exemples:`
|  |  |  |
| -------- | -------- | -------- |
Voici comment utiliser le composant `Checkbox`:
``` hml
<CheckBox key={"..."} label={"..."} checked={...} handleClick={() => ...} />
```
* `key` est la clé unique donnée si l'élément se trouve dans une liste. Cet prop est optionnel si l'élément est utilisé seul. (Elle n'est util que à React afin qu'il identifie l'élément dans la liste)
* `label` est le titre que vous voulez donner à votre checkbox
* `checked` est un boolean qui permet de savoir si votre checkbox est coché ou non.
* `handleClick` est une fonction qui permet de toggle la checkBox
:::warning
**Attention**, vous n'êtes en aucun cas obligé d'utiliser mon composant et la manière dont je l'ai implémenté. S'il ne vous plait pas libre à vous de créer le votre et penser votre propre code. Il est là si vous voulez l'utiliser pour vous aider ou simplement ici à titre indicatif.
:::
---
### Exercice 4: Lifecycle
:::danger
Cet exercice doit être réalisé avec un compoosant **class**. Le cycle de vie est géré différement avec les composant fonctionnels. Nous le verrons dans la partie sur les Hooks
:::
#### 4.1 ---
En utilisant les méthodes du [cycle de vie des composants](https://fr.reactjs.org/docs/react-component.html) classes, affichez un texte dont la bordure du bas augmente toute les secondes de n fois (n sera votre compteur).
Le bouton "Stop" devra démonter le composant, puis se changer en bouton "Start" pour monter le composant de nouveau
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
:::info
**Indice**: setInterval, clearInterval
:::
###### `Example:`
---
### Bonus:
#### Morpion ---
En utilisant les notions de tout les exercices précédents (composant, flexBox, styling, state & props) effectuer un jeu de morpion.
1. Affichez une grille de morpion
2. Gérer le tour de chaque joueur, choisir un des deux joueurs aléatoirement au début du jeu.
3. Gérer les cas de victoire et d'égalité
4. L'usage des flexBox est impératif
Le composant Case.js vous est fourni.
###### `Example:`
| | |  |
| -------- | -------- | -------- |
``` jsx
<Case
key={`col${c}`}
handleClick={() => this.handleClick(r, c)}
type={col}
size={this.state.size / 5}
/>
```
* `key` est la key a donnée si l'élément se trouve dans une liste
* `type` est un nombre entre 0 et 2 inclus qui permet de connaitre le type de la case:
* 0: vide
* 1: croix
* 2: rond
* `size` est simplement la taille de l'icon a l'intérieur des case
* `handleClick` est une fonction qui permettra d'intéragir avec la case en fonction du joueur actif.
:::warning
**Attention**, vous n'êtes en aucun cas obligé d'utiliser mon composant et la manière dont je l'ai implémenté. S'il ne vous plait pas libre à vous de créer le votre et penser votre propre code. Il est là si vous voulez l'utiliser pour vous aider ou simplement ici à titre indicatif.
:::
<!-- #### SearchBar ---
À l'aide du composant `<Button/>` que vous avez créez dans l'exercice 1, créez une barre de recherche qui affiche le contenu écrit dans une liste.
Créez un second bouton pour clear la liste.
* Envoyez une fonction `handleClick` au bouton de la barre de recherche.
* Cette fonction doit reset l'input quand le bouton est cliqué.
* Cette fonction doit remplir la liste de mots.
::: warning
Faites cet exercice avec des class
:::
###### `Exemples:`
-->
Sign in with Wallet
Connect another wallet