Commit 283e526f authored by Fabrice's avatar Fabrice
Browse files

Fin du README

parent 1dfa2ae6

README.md

+9 −24
Original line number Diff line number Diff line
@@ -70,7 +70,7 @@ Cela ouvrira automatiquement le **tableau de bord Expo** dans votre navigateur. 


4. Testez l'exécution de l'application développée. 



##### 2.2.3 Ouvrez le débogueur Expo**

##### 2.2.3 Ouvrez le débogueur Expo



Si vous avez besoin d’afficher la console de débogage pour voir vos logs (`console.log()`) ou inspecter l’état des composants, voici comment faire :
@@ -88,9 +88,9 @@ Dans ce menu, sélectionnez **"Open JS Debugger"** pour voir les logs et débogu 


`React Native` permet de créer des applications mobiles en utilisant `JavaScript` et `TypeScript`, ainsi que le framework `React`, avec **un rendu natif pour iOS et Android** : 



- JavaScript (JS) est le langage standard utilisé pour le développement web (frontend et backend avec Node.js). 

- **JavaScript** (JS) est le langage standard utilisé pour le développement web (_frontend_ et _backend_ avec Node.js). 



- TypeScript (TS) a ajouté des fonctionnalités de typage statique et d'autres améliorations à JavaScript qui peuvent rendre le code plus lisible et moins sujet aux erreurs. 

- **TypeScript** (TS) a ajouté des fonctionnalités de typage statique et d'autres améliorations à JavaScript qui peuvent rendre le code plus lisible et moins sujet aux erreurs. 



Voici les concepts clés `React` utilisés dans le projet :
@@ -128,22 +128,7 @@ const styles = StyleSheet.create({ 
});

```



#### 3.3. Flexbox pour la mise en page



React Native utilise **Flexbox** pour organiser les éléments à l’écran :



- **`flexDirection`** : Définit l’axe principal (`row` ou `column`).

- **`justifyContent`** : Gère l’alignement sur l’axe principal.

- **`alignItems`** : Gère l’alignement sur l’axe secondaire.



```tsx

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

  <Text>Item 1</Text>

  <Text>Item 2</Text>

</View>

```



#### 3.4. État et gestion des données

#### 3.3. État et gestion des données



L’état d’un composant est géré avec les hooks `useState` et `useEffect`.
@@ -161,7 +146,7 @@ useEffect(() => { 
}, [searchQuery]);

```



#### 3.5. Gestion des événements

#### 3.4. Gestion des événements



Les interactions utilisateur sont capturées via des événements comme `onPress` et `onChangeText`.
@@ -174,7 +159,7 @@ Les interactions utilisateur sont capturées via des événements comme `onPress 
/>

```



#### 3.6. Appels API et gestion des données externes

#### 3.5. Appels API et gestion des données externes



Les requêtes HTTP vers l’API Last.fm sont effectuées avec `fetch` et `async/await`.
@@ -190,11 +175,11 @@ const fetchArtistData = async (artistName: string) => { 
};

```



#### 3.7. Librairie `Expo Router`

#### 3.6. Librairie `Expo Router`



**Expo Router** est un système de navigation basé sur des fichiers, utilisé pour simplifier la navigation dans les projets React Native avec Expo. Il permet de définir les routes de l'application simplement en créant des fichiers dans le répertoire `app/`. Chaque fichier dans ce répertoire représente une page de ton application.



##### 3.7.1. Arborescence du projet avec Expo Router

##### 3.6.1. Arborescence du projet avec Expo Router



Voici la structure des fichiers que tu utiliseras pour la navigation avec Expo Router :
@@ -257,7 +242,7 @@ export default function AlbumScreen() { 


Ce fichier définit la page où l'utilisateur peut rechercher un album.



##### 3.7.2. Utilisation de la navigation

##### 3.6.2. Utilisation de la navigation



Navigation entre les pages