{"id":804,"date":"2025-03-05T18:11:02","date_gmt":"2025-03-05T17:11:02","guid":{"rendered":"https:\/\/www.ludovicfavre.ch\/blog\/?p=804"},"modified":"2025-03-05T18:15:47","modified_gmt":"2025-03-05T17:15:47","slug":"jai-redeveloppe-mon-site-avec-react-et-codeigniter-grace-a-grok-3-sans-presque-aucune-experience-en-react","status":"publish","type":"post","link":"https:\/\/www.ludovicfavre.ch\/blog\/2025\/03\/jai-redeveloppe-mon-site-avec-react-et-codeigniter-grace-a-grok-3-sans-presque-aucune-experience-en-react\/","title":{"rendered":"J\u2019ai red\u00e9velopp\u00e9 mon site avec React et CodeIgniter gr\u00e2ce \u00e0 Grok 3, sans presque aucune exp\u00e9rience en React."},"content":{"rendered":"\n

Il y a peu, j\u2019ai \u00e9t\u00e9 forc\u00e9 de mettre \u00e0 jour mon site bas\u00e9 sur une version obsol\u00e8te d’un Framework, Twig\/Symfony 3<\/a>. En d\u00e9butant l’impl\u00e9mentation avec CodeIgniter, j’ai vite compris que le portage des templates allait \u00eatre compliqu\u00e9. Je me suis donc orient\u00e9 vers quelque chose de plus dynamique et moderne : un frontend en React avec un backend all\u00e9g\u00e9 par CodeIgniter. Le hic ? Je n\u2019avais pratiquement aucune exp\u00e9rience en React. Pourtant, en quelques heures et gr\u00e2ce \u00e0 une poign\u00e9e de prompts \u00e0 Grok 3<\/a>, l\u2019IA de xAI, j\u2019ai r\u00e9ussi cette refonte. Voici comment \u00e7a s\u2019est pass\u00e9.<\/p>\n\n\n\n

Une refonte en quelques \u00e9tapes<\/h4>\n\n\n\n

J\u2019ai d\u2019abord repens\u00e9 l\u2019organisation de mon projet. Fini le m\u00e9lange frontend-backend : j\u2019ai cr\u00e9\u00e9 deux espaces distincts, un pour le backend et un pour le frontend. Le challenge \u00e9tait de configurer mon serveur local pour que les requ\u00eates API et les pages React aillent l\u00e0 o\u00f9 il faut. J\u2019ai demand\u00e9 conseil \u00e0 Grok 3, et en une r\u00e9ponse, il m\u2019a orient\u00e9 vers une solution simple pour g\u00e9rer ces redirections, sans que j\u2019aie \u00e0 me perdre dans des d\u00e9tails techniques.<\/p>\n\n\n\n

Pour le backend, migrer de Symfony \u00e0 CodeIgniter a \u00e9t\u00e9 assez naturel. J\u2019ai simplifi\u00e9 mes anciennes routes en endpoints l\u00e9gers, et Grok m\u2019a aid\u00e9 \u00e0 m\u2019assurer que tout restait coh\u00e9rent et pr\u00eat \u00e0 alimenter mon futur frontend.<\/p>\n\n\n\n

Le frontend React, un d\u00e9fi relev\u00e9 avec Grok<\/h4>\n\n\n\n

C\u2019est l\u00e0 que les choses auraient pu se compliquer. Avec presque z\u00e9ro exp\u00e9rience en React, je partais de loin. Mais Grok 3 a permis de relever le d\u00e9fi. Je lui ai demand\u00e9 comment d\u00e9marrer un projet React de z\u00e9ro et comment en faire une version statique pour mon site. Ses r\u00e9ponses \u00e9taient claires, \u00e9tape par \u00e9tape, comme un guide patient qui ne me laissait jamais dans le flou. En un rien de temps, j\u2019avais un frontend fonctionnel. Quand j\u2019ai but\u00e9 sur une erreur o\u00f9 mes donn\u00e9es ne s\u2019affichaient pas, Grok a tout de suite compris et m\u2019a donn\u00e9 une astuce simple pour connecter React \u00e0 mon backend.
Grok a m\u00eame r\u00e9ussi l\u00e0 o\u00f9 les autres LLM (GPT 4o, Claude 3.5) avaient \u00e9chou\u00e9s: calculer le rendu, en React, de mon menu hi\u00e9rarchique venant d’un json retourn\u00e9 par API. A prompt \u00e9gal, c’est le seul \u00e0 avoir r\u00e9ussi.<\/p>\n\n\n\n

Quelques ajustements et un r\u00e9sultat bluffant<\/h4>\n\n\n\n

Tout n\u2019a pas march\u00e9 du premier coup. A plusieurs reprises j’ai confront\u00e9 les r\u00e9sultats de Github Copilot, une recherche Google classique et Grok, Grok donne en g\u00e9n\u00e9ral la meilleure des r\u00e9ponses avec le moins d’informations. C’est assez bluffant sachant que Github Copilot est totalement int\u00e9gr\u00e9 \u00e0 l’IDE contrairement \u00e0 Grok qui n’a qu’un minimum d’information.<\/p>\n\n\n\n

Une transformation \u00e9clair malgr\u00e9 mon inexp\u00e9rience<\/h4>\n\n\n\n

En quelques heures et une poign\u00e9e d\u2019\u00e9changes avec Grok 3, j\u2019ai m\u00e9tamorphos\u00e9 mon vieux site Twig\/Symfony en une application moderne React + CodeIgniter. Le frontend, presque enti\u00e8rement con\u00e7u avec l\u2019aide de Grok malgr\u00e9 mon manque d\u2019exp\u00e9rience en React, est fluide et r\u00e9actif. Le backend, lui, reste l\u00e9ger et efficace.<\/p>\n\n\n\n

Si vous envisagez de moderniser votre site, m\u00eame sans \u00eatre un pro de React ou d\u2019un autre outil, je ne peux que vous encourager \u00e0 tester Grok 3. Attention toutefois \u00e0 ce que vous lui transmettez comme information, Grok n’est pas connu pour prot\u00e9ger vos donn\u00e9es, exit donc les mots de passe, donn\u00e9es priv\u00e9es, etc.

Le site est disponible ici: https:\/\/ludovicfavre.ch\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Il y a peu, j\u2019ai \u00e9t\u00e9 forc\u00e9 de mettre \u00e0 jour mon site bas\u00e9 sur une version obsol\u00e8te d’un Framework, Twig\/Symfony 3. En d\u00e9butant l’impl\u00e9mentation avec CodeIgniter, j’ai vite compris que le portage des templates allait \u00eatre compliqu\u00e9. Je me … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-804","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/posts\/804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/comments?post=804"}],"version-history":[{"count":3,"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/posts\/804\/revisions"}],"predecessor-version":[{"id":807,"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/posts\/804\/revisions\/807"}],"wp:attachment":[{"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/media?parent=804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/categories?post=804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ludovicfavre.ch\/blog\/wp-json\/wp\/v2\/tags?post=804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}