La gestion des listes et des clés est une partie importante de React pour afficher et mettre à jour efficacement des listes d’éléments dans vos composants. Lorsque vous avez une liste d’éléments que vous souhaitez afficher dans votre interface utilisateur, React vous encourage à utiliser la répétition (mapping) d’éléments JSX pour générer ces éléments en …
Le système de routage en React : les pages et la navigation Le système de routage permet de gérer la navigation entre différentes pages ou vues dans une application React sans avoir à recharger complètement la page. react-router-dom est une bibliothèque qui facilite la mise en place du routage dans une application React. Avec React …
Le système de routage en React avec React Router Lire la suite »
Apprendre React de zéro : introduction et chapitres React est une bibliothèque JavaScript open-source largement utilisée pour la création d’interfaces utilisateur interactives et dynamiques. Elle permet de décomposer l’UI en composants réutilisables, facilitant ainsi le développement, la maintenance et la mise à jour des applications. Voici quelques avantages clés de React : Composants Réutilisables : …
Comprendre React.createElement React.createElement est une fonction fondamentale dans React qui permet de créer des éléments React, qui sont ensuite utilisés pour construire l’interface utilisateur. Pourquoi utiliserais-je React.createElement() au lieu de JSX ? Nous utilisons React.createElement() au lieu de JSX lorsque nous ne voulons pas configurer la compilation pour notre projet, ce que l’utilisation de JSX …
Récupérer des images d’une API avec la méthode fetch() Nous allons récupérer des images de chat d’une API, puis nous allons gérer les erreurs. Allez sur The Cat APi, et cliquez sur documentation. Dans Quick start, nous nous servirons de la deuxième url pour récupérer 10 images (vous pouvez changer le nombre). Nous allons créer …
Récupérer des images d’une API avec la méthode fetch() Lire la suite »
Débuter avec React : découvrez l’origine de React et ce qui rend cette bibliothèque Javascript si populaire. Nous verrons ensuite comment installer React et développer votre première application. React React a été créé en 2011 par Jordan Walke, ingénieur au sein de Facebook. C’est une bibliothèque Javascript open-source permettant de créer des interfaces utilisateurs dont …
La méthode Fetch() en Javascript : Introduction et mis en pratique Un peu de théorie avant de créer notre premier projet pour récupérer et manipuler des données avec des API. La méthode fetch() Fetch est une méthode globale qui va nous permettre de contacter un serveur afin de récupérer des ressources. En premier paramètre, dans …
Fetch() Javascript: mise en pratique Avant de commencer ce tuto, ouvrez le tutoriel : apprendre Fetch (4min de lecture) afin de bien comprendre la méthode fetch(). Nous allons ici voir plusieurs petits exemples pour : – récupérer des données d’un fichier json. – récupérer des images d’une API. – récupérer et créer des éléments du …
Les composants React – La syntaxe JSX En React moderne, tous les composants créés sont des composants fonctionnels. Un composant a besoin: – d’un nom qui doit toujours commencé par une majuscule – de paramètre (les props si besoin) – d’un ensemble d’instructions import : Webpack permet d’importer les composants avec import. Il permet de …
Les bases de Javascript : récapitulatif Découvrez ou revenez sur les concepts fondamentaux de la syntaxe JavaScript et comment les backticks ont introduit une nouvelle syntaxe pour les templates de chaînes. Les commentaires Les commentaires sont utilisés pour ajouter des notes et des explications dans le code. Il existe deux types de commentaires en …
Les fonctions en Javascript : définition et exemples En JavaScript, une fonction est un bloc de code réutilisable qui peut être appelé et exécuté à plusieurs endroits de votre programme. Les fonctions permettent de regrouper des instructions et de les exécuter ensemble en utilisant un seul appel de fonction. Voici un exemple simple de fonction …
Une boucle for en Javascript permet de répéter un bloc d’instructions en fonction des paramètres qu’on lui indique. Syntaxe de la boucle for Exemple : for (let i = 0; i < 10; i += 1) { console.log(i); } Dans les parenthèses, nous avons trois paramètres. En premier paramètre, on déclare une variable pour …
En JavaScript, let et var sont deux mots-clés utilisés pour déclarer des variables, mais ils ont des différences importantes dans leur portée (scope) et leur comportement. Portée (Scope) var: Les variables déclarées avec var ont une portée de fonction (function scope). Cela signifie qu’une variable déclarée avec var à l’intérieur d’une fonction est visible dans …
Github : mettre son site en ligne gratuitement sur Github pages 1/ Ouvrez le dossier de votre application dans votre éditeur et exécutez cette commande dans votre terminal : npm install gh-pages –save-dev 2/ Ouvrez le fichier package.json et ajoutez ces deux lignes au niveau de « scripts » : « predeploy »: « npm run build », « deploy »: …
Le combinateur d’adjacence en CSS permet d’effectuer une transition sur un élément voisin. Il existe deux types de combinateurs adjacents: direct et indirect. Nous allons voir ici le combinateur adjacent direct. Le combinateur adjacent direct Pour mettre en place un combinateur adjacent direct, vous allez assigner à la pseudoclasse le signe + suivi du nom …
Les transitions en CSS permettent de modifier un élément sur une durée limitée de façon simple. Pour effectuer une transition en CSS, vous allez : – définir la propriété à modifier – la valeur correspondante au début de votre animation – sa durée – comment la transition va s’effectuer Exemples d’animations avec des transitions en …
Devenez un pro de la mise en page en CSS3 avec ce tutoriel Flexbox. Apprenez les propriétés de base de flexbox associés à des exercices pour la mise en pratique. Pour pouvoir réaliser cette mise en page avec flexbox, nous aurons besoin de connaître : – Qu’est-ce-que flexbox – Comment fonctionne Flexbox – Les propriétés …
Tutoriel Flexbox – Devenez un pro de la mise en page Lire la suite »
Après avoir vu le fonctionnement et les propriétés de base dans le tutoriel précédent, nous allons voir ici l’alignement des items avec Flexbox. L’alignement des items avec Flexbox 1/ Positionnement des items sur l’axe principal (main axis) 2/ Positionnement des items sur l’axe transversal (cross axis) 1/ Positionnement des items sur l’axe principal …
Dans le tutoriel précédent nous avons vu les bases de Flexbox, nous allons maintenant passer à la pratique en créant un blog avec une mise en page en CSS Flexbox.
Wordpress est un CMS (Content system Management), un système de gestion de contenu, qui vous permet de créer et administrer un site internet en ligne. Wordpress est gratuit, libre et open-source. C’est aujourd’hui le CMS le plus utilisé au monde. Spécialisé au départ dans la création de blog (2003), il permet de créer désormais tous …
