Cadriciels et bibliothèques JavaScript

Prérequis

Vous devez vraiment connaître les bases des principaux langages du web (HTML, CSS, et particulièrement JavaScript) avant d'essayer de vous lancer dans l'apprentissage des cadriciels côté client.

Votre code n'en est que de meilleure qualité et plus professionnel, et vous êtes en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les cadriciels s'appuient.

Guides d'introduction

Introduction aux cadriciels côté client

Nous commençons notre aperçu des cadriciels par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des cadriciels, la raison pour laquelle les cadriciels existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un cadriciel à apprendre et quelles alternatives il y a aux cadriciels côté client.

Principales caractéristiques du Framework

Chaque cadriciel JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explore les principales caractéristiques des 4 grands cadriciels, en examinant comment les cadriciels ont tendance à fonctionner à un haut niveau et les différences entre eux.

Tutoriels sur React

Premier pas avec React

Dans cet article, nous disons bonjour à React. Nous découvrons les prémices de son fonctionnement et de ses cas d'utilisation, configurons une chaîne d'outils React de base sur notre ordinateur local et créons et jouons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.

Début de notre liste de tâches React

Supposons que nous ayons été chargé·e·s de créer une preuve de concept dans React — une application qui permet aux utilisateur·ice·s d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guide tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajoutons plus tard.

Diviser notre application React en composants

À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant : c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.

Interactivité de React : évènements et états

Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.

Interactivité de React : modification, filtrage, rendu conditionné

Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajoutons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinons le rendu conditionné de l'interface utilisateur en cours de route.

Accessibilité dans React

Dans notre avant-dernier article du tutoriel, nous nous concentrons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateur·ice·s de clavier uniquement et de lecteur d'écran.

Ressources sur React

Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.

Autres choix de cadriciels

Si vous ne souhaitez pas commencer à apprendre les cadriciels avec React, vous pouvez choisir une autre option.

Nous vous recommandons de jeter un œil aux options suivantes comme alternatives :

• Angular ^(angl.) : Commencez avec le tutoriel Angular ^(angl.).
• Ember ^(angl.) : Commencez avec la documentation d'apprentissage de Ember.js ^(angl.).
• Svelte ^(angl.) : Commencez avec le tutoriel Svelte ^(angl.).
• Vue ^(angl.) : Commencez avec le démarrage rapide de Vue ^(angl.).

Nous tenons à le dire d'emblée — nous n'avons pas choisi les cadriciels mentionnés précédemment parce que nous pensons qu'ils sont les meilleurs, ou parce que nous les approuvons d'une quelconque manière. Nous pensons simplement qu'ils obtiennent de bons résultats selon les critères suivants, qui doivent être pris en compte lorsque l'on commence à investir du temps dans l'apprentissage de nouveaux logiciels :

• Ils sont bien pris en charge et sont là pour un certain temps : Comme pour tout outil logiciel, il est bon de s'en tenir à des choix activement développés qui ne sont probablement pas abandonnés la semaine prochaine, et qui sont des ajouts souhaitables à votre ensemble de compétences lorsque vous cherchez un emploi.
• Ils ont de fortes communautés et une bonne documentation : Il est très important de pouvoir obtenir de l'aide pour apprendre un sujet complexe, surtout lorsque l'on débute.

• Aperçu : Modules d'apprentissage fondamentaux
• Suivant