Créer une application React Native efficace peut être complexe sans une structure adéquate.
Une mauvaise organisation peut conduire à des erreurs et rendre le développement difficile et frustrant.
Cet article vous guide dans la construction d’une application de gestion de tâches, en utilisant des pratiques de structuration et d’intégration de composants efficaces.
Développez votre première application mobile en un rien de temps !
À partir de cette section, nous allons créer une application simple de gestion de tâches, ou ToDoList . Cette application permettra aux utilisateurs d’ajouter et de supprimer des tâches. Voici un aperçu visuel qui donne une vue d’ensemble de notre application.
Donc, pour atteindre cet objectif, nous allons commencer par créer le projet React Native avec la commande habituelle dans un dossier de notre choix : npx create-expo-app my-app.
Après avoir lancer la commande, voici la structure de notre projet.
Parfait ! Nous allons ensuite utiliser cette structure pour implémenter les composants nécessaires à la gestion des tâches. Avant de commencer, il est recommandé d’exécuter la commande suivante : npm run reset-project.
La commande npm run reset-project est généralement utilisée pour réinitialiser le projet à un état initial propre. Elle supprime des fichiers temporaires et de configuration générée par le projet afin d’éviter les conflits ou les erreurs qui peuvent survenir lors du développement.
Apres avois l’executer , voici c’est qui est affiche sur le terminal
Comme nous pouvons voir sur le visuel, le nouveau dossier /app a bien été créé et que des fichiers essentiels ont été ajoutés pour réinitialiser le projet.
Voici les détails :
- Le dossier / app précédent a été déplacé vers / app-example , ce qui permet de conserver une sauvegarde de l’ancienne version.
- Un nouveau dossier / app a été créé, prêt à accueillir les modifications à venir.
- Les fichiers app/index.tsx et app/_layout.tsx ont été générés dans ce nouveau dossier pour fournir la structure de base de l’application.
Nous pouvons voir tout cela concrètement en ouvrant notre projet dans un éditeur comme VSCode . Voici la nouvelle structure de notre projet :
Le contenu du fichier index.tsx est le suivant :
import { Text, View } from "react-native";
export default function Index() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Edit app/index.tsx to edit this screen.</Text>
</View>
);
}
Démarrons maintenant notre application avec la commande habituelle : npm run android pour voir ce qu’elle affiche.
Parfait, le contenu par défaut de notre application s’affiche correctement. Tout est désormais en ordre. Nous allons développer les composants ToDoList et ToDoItem pour les intégrer dans notre application.
Pour le faire, créons les fichiers toDoItem . jsx dans le dossier components avec le contenu suivant :
import React from 'react';
import { View,Text , StyleSheet} from 'react-native';
const ToDoItem = ()=>{
return(
<View style={styles.item}>
<Text> Ma tache</Text>
</View>
)
}
const styles = StyleSheet.create({
item:{
padding:10,
marginVertical:8,
marginHorizontal:16,
borderBottomWidth:1,
borderBlockColor:'#ccc',
},
});
export default ToDoItem;
Explication du code :
- ComposantToDoItem :Ce composant retourne un conteneur View qui contient un texte « Ma tâche ». Le style du conteneur est défini par un objet styles créé avec StyleSheet.create.
- Styles :Les styles définissent l’apparence du composant :
padding pour l’espacement interne,
marginVertical et marginHorizontal pour les marges,
borderBottomWidth et borderBlockColor pour ajouter une ligne de séparation en bas de l’élément.
- Exportation :Le composant ToDoItem est exporté pour être utilisé dans d’autres parties de l’application.
Ensuite creons le fichier toDoList . jsx dans le même dossier avec le contenu suivant :
import ToDoItem from "./toDoItem";
import React from "react";
import { View,StyleSheet } from "react-native";
const ToDoList = ()=>{
return(
<View style ={styles.list}>
<ToDoItem></ToDoItem>
<ToDoItem></ToDoItem>
<ToDoItem></ToDoItem>
</View>
)
}
const styles = StyleSheet.create({
list:{
marginTop: 20
},
});
export default ToDoList;
Explication du code :
- Importations :Il importe le composantToDoItemdepuis le fichiertoDoItem, ainsi que React et les composantsViewetStyleSheetde React Native.
- Composant ToDoList :Ce composant retourne un conteneurViewqui applique un style défini. À l’intérieur, il rend trois instances du composantToDoItem, représentant chacune une tâche.
- Styles :Les styles définissent l’apparence du composant :
- marginTop pour ajouter un espacement en haut de la liste.
- Exportation :Le composantToDoListest exporté pour être utilisé dans d’autres parties de l’application.
Enfin, faisons l’import de ce fichier dans le fichier principal de notre application pour implementer les composants. Donc, Voyons le contenu du fichier index.jsx maintenant :
import { Text, View } from "react-native";
import ToDoList from "@/components/toDoList";
export default function Index() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Edit app/index.tsx to edit this screen.</Text>
<ToDoList />
</View>
);
}
- Imports :Il importeTextetViewdereact-native, ainsi qu’un composantToDoListd’un chemin relatif.
- Fonction Index :C’est une fonction qui représente le composant principal de l’écran.
- Retourne une Vue :Le composant retourne unViewqui utilise des styles pour centrer son contenu.
- Texte et Liste de Tâches :À l’intérieur de ceView, il affiche un message texte et rend le composant ToDoList, qui pourrait afficher une liste de tâches à faire.
Exécutons notre application maintenant pour voir nos composants.
Parfait, il affiche bien les contenus de nos composant.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un projet React Native ?
Quelle est l'utilité de 'npm run reset-project' ?
Comment structurer une application React Native ?
Comment intégrer des composants dans React Native ?
Quelles sont les bases pour démarrer une application React Native ?
Conclusion
En développant votre application React Native avec des composants tels que ToDoList et ToDoItem, vous pouvez créer des solutions de gestion de tâches efficaces. Quelles autres fonctionnalités pourriez-vous ajouter pour enrichir votre application ?
