J’ai demandé à ChatGPT AI d’écrire du code React et JavaScript — j’ai été choqué !

Introduction

ChapGPT semble trop beau pour être vrai, alors demandons-lui d’écrire du code JS pour nous. Je veux voir s’il peut s’attaquer aux tâches que je fais quotidiennement en tant que développeur front-end.

Allons droit au but et essayons de casser ce truc ! 🙂

Construire un modal en React

Bien que cela soit possible, ne commençons pas cette expérience en ajoutant du code pour commencer. Demandons simplement à ChatGPT de créer deux composants React qui seront les éléments d’une fenêtre modale et un bouton pour basculer sa visibilité :

Cette tâche simple a été exécutée parfaitement! Remarquez comment il a ajouté de manière proactive du contenu aux éléments HTML car il comprenait clairement à quoi ils servaient . Sans oublier cette petite note en bas me faisant savoir que ces composants ne fonctionneront pas seuls. Très utile!

Écouteurs d’état et d’événement React

Ensuite, passons directement à une tâche complexe et vague et demandons-lui d’ajouter la fonctionnalité nécessaire pour que le bouton ouvre le modèle :

Encore une fois, la réalisation est impeccable ! ChatGPT a ajouté les états nécessaires, cliquez sur les écouteurs et les gestionnaires d’événements pour que tout cela fonctionne. Cliquer sur le bouton bascule maintenant le rendu du modal !

Voyons ce qu’il avait d’autre à dire :

L’explication qu’il donne est inestimable. Je pense que c’est un excellent outil d’apprentissage pour les débutants car non seulement il fait ce que vous demandez, mais il l’explique clairement. Et évidemment, à tout moment, vous avez la possibilité de poser d’autres questions .

Ajout de stockage local

Ensuite, pourquoi ne testons-nous pas s’il peut modifier le code et enregistrer l’état du modal dans le stockage local. Cela nous permet de sauvegarder l’état du modal même après la fermeture de la fenêtre du navigateur.

L’exécution est à nouveau parfaite, elle convertit correctement le booléen en chaîne, et elle nous explique aussi pourquoi il fallait l’utiliser useEffectdans le code :

Il ne s’agit évidemment pas d’un simple copier-coller général de la documentation, l’explication est donnée avec les noms exacts des variables que nous avons dans le code pour aider à la compréhension.

Stylisme et animation

D’accord, voyons si cela peut fonctionner avec le CSS et les animations, ce qui, je pense, sera un peu plus délicat pour l’IA :

Étonnamment, il a parfaitement ajouté les classes et les styles CSS nécessaires, puis écrit l’explication habituelle :

L’explication est assez longue et détaillée…

La première erreur

D’accord, si vous voulez un petit test, ne faites pas défiler plus bas, revenez simplement à la réponse précédente de ChatGPT et essayez de voir si vous pouvez trouver l’erreur qui empêche l’animation de fonctionner.

L’avez-vous remarqué ?

D’accord, donnons-lui une seconde chance et demandons à ChatGPT de corriger l’erreur :

Bonne épargne! Comme vous pouvez le voir, il a correctement configuré toutes les classes et variables mais, pour une raison quelconque, il n’a pas ajouté la logique permettant de basculer la .openclasse requise pour que le CSS prenne effet et que l’animation fonctionne réellement.

Manuscrit

Voyons maintenant si cela peut fonctionner avec TypeScript et les accessoires. Donnons-lui simplement une liste d’accessoires que nous voulons et demandons-lui d’ajouter les types pertinents :

Parfait! Aucune erreur du tout, mais j’ai été assez clair avec mes instructions. Nous savons qu’il peut comprendre le sens derrière les variables, donc je soupçonne qu’il aurait pu déterminer les types nécessaires (nous le vérifierons plus tard). Comme d’habitude, nous avons eu l’explication détaillée mais ce n’était pas si intéressant alors passons à autre chose.

Je veux vraiment le casser cette fois, donc je vais demander quelque chose qui nécessitera clairement que ChatGPT comprenne la signification de mes variables :

Avec cette invite, je voulais voir s’il pouvait ajouter correctement l’objet à la définition dactylographiée, mais plus intéressant, comment il gérerait le tableau et les en-têtes que je n’ai pas spécifiés.

Il semble n’avoir aucun problème avec les types, alors voyons comment cela s’est passé avec la table :

Pouvez-vous voir comment il a ajouté Passe-temps, Expérience (années) et Fait actuellement à l’en-tête du tableau ? Et il a également compris que vous ne pouvez pas simplement sortir le activelyDoingbooléen tel quel et que vous devez le convertir en « Oui » ou « Non ».

Je suis assez impressionné !

Importation et utilisation de bibliothèques externes

Ensuite, voyons s’il peut trier nos objets passe-temps par ordre alphabétique et éventuellement utiliser une bibliothèque externe pour résoudre ce problème :

Exécution parfaite à nouveau : il a décidé d’utiliser lodash, l’a importé et a écrit la logique pour trier selon la propriété que nous avons demandée. Encore une fois, très impressionnant !

Examen final

Pour le test final, voyons comment il peut convertir des instructions visuelles pour l’interface utilisateur et les convertir en CSS. Je veux également un test définitif sur la façon dont il comprend nos variables et je demanderai un objet JSON fictif qui pourrait être introduit dans le composant pour le test :

Je pense qu’il a très bien réussi le test CSS. Le style correspond parfaitement aux éléments. Il sait exactement qu’un modal devrait être positionné fixedet avoir un fond noir transparent.

Voyons ce qu’il a ajouté d’autre au CSS :

Cela a fait du contenu modal une boîte au milieu de l’écran avec une ombre de boîte à laquelle j’ai fait référence dans la demande.

La seule erreur qu’il a commise est qu’il n’a pas vraiment ajouté la couleur bleue, mais je suis presque certain qu’il serait en mesure de résoudre ce problème.

Voyons maintenant comment il a compris nos données et quel type de JSON factice il nous a donné :

je suis absolument sans voix! Il a pu créer ces données pour nos composants car il comprend parfaitement ce que tout signifie !

Conclusion

J’essayais de le casser, mais il a exécuté mes instructions presque parfaitement et semble comprendre la signification sous-jacente des variables comme « hobbies » car il a ajouté de manière proactive d’autres éléments que je n’avais pas besoin de demander, des choses que je n’attendrais que de un humain !

Il a parfaitement implémenté les composants React, les écouteurs d’événements, géré le stockage local, le style, l’animation, le tri des données avec des bibliothèques externes et des types TypeScript.

Personnellement, je ne me sens pas menacé par cela (pour l’instant) car je considère les tâches qu’il peut effectuer simples et triviales. Il est toujours évident que vous devez être un développeur expérimenté et un être humain pour prendre des décisions créatives complexes concernant l’architecture et la mise en œuvre sans lesquelles vous ne pouvez même pas terminer la plus simple des applications du début à la fin.

Mais une fois que j’ai passé ce temps initial à prendre ces grandes décisions créatives, les éléments réels de l’exécution sont triviaux : écrire les morceaux de code, les fonctions JS, le style en CSS, etc.

Dans son stade actuel, je peux voir ce travail comme un plugin VSCode : au lieu de taper, je parle et ordonne à l’IA de construire les éléments pour moi, de faire rapidement les tâches répétitives en quelques secondes qui me prendraient normalement 5 à 10 minutes. Et comme on peut le voir sur la vidéo, il peut le faire étonnamment bien !

L’ IA est effrayante, mais en fin de compte, elle a le potentiel de supprimer les éléments répétitifs et ennuyeux de nos emplois qui ne nécessitent aucune pensée humaine créative . En conséquence, nous terminons les tâches plus rapidement et sommes capables de passer plus de temps sur des choses que nous aimons vraiment faire !

Que penses-tu de cela?? Comment cela va-t-il changer notre métier tel que nous le connaissons aujourd’hui ? Comment intégreriez-vous cela dans votre flux de travail en tant que développeur ? Comment cela affectera-t-il l’industrie en général?

Créez des applications avec des composants réutilisables comme Lego

L’outil open source de Bit aide plus de 250 000 développeurs à créer des applications avec des composants.

Transformez n’importe quelle interface utilisateur, fonctionnalité ou page en un composant réutilisable et partagez-le entre vos applications. Il est plus facile de collaborer et de créer plus rapidement.

→ En savoir plus

Divisez les applications en composants pour faciliter le développement d’applications et profitez de la meilleure expérience pour les flux de travail que vous souhaitez :

→