<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="https://chierchia.fr/wp-content/plugins/pretty-rss-feeds/xslt/pretty-feed.xsl" type="text/xsl" media="screen" ?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>React - Ange Chierchia</title>
	<atom:link href="https://chierchia.fr/tag/react/feed/" rel="self" type="application/rss+xml" />
	<link>https://chierchia.fr/tag/react/</link>
	<description>Développeur Web full-stack</description>
	<lastBuildDate>Sun, 08 Feb 2026 15:44:44 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://chierchia.fr/wp-content/uploads/cropped-16350293-SSDKVqo3-32x32.jpg</url>
	<title>React - Ange Chierchia</title>
	<link>https://chierchia.fr/tag/react/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
					<title>Windsurf et moi : journal d’un dev qui apprend à parler à une IA</title>
					<link>https://chierchia.fr/2026/02/windsurf-et-moi-journal-dun-dev-qui-apprend-a-parler-a-une-ia/</link>
		
		<dc:creator><![CDATA[<span class='p-author h-card'>Ange Chierchia</span>]]></dc:creator>
		<pubDate>Mon, 02 Feb 2026 06:45:00 +0000</pubDate>
				<category><![CDATA[Journal]]></category>
		<category><![CDATA[Gutenberg]]></category>
		<category><![CDATA[IA]]></category>
		<category><![CDATA[JSX]]></category>
		<category><![CDATA[React]]></category>
		<category><![CDATA[vibe coding]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">https://chierchia.fr/?p=7980</guid>

					<description><![CDATA[Ça fait deux semaines que j&#8217;utilise Windsurf pour développer un plugin WordPress.Le principe ? Ajouter des options sur les blocs Gutenberg natifs (en React/JSX), et gérer des Custom Post Types proprement. Rien de dingue sur le papier.Mais en vrai, c&#8217;est le genre de projet où tu te retrouves vite avec du code front mélangé au [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class='e-content'>
<p>Ça fait deux semaines que j&rsquo;utilise <strong>Windsurf</strong> pour développer un plugin WordPress.<br>Le principe ? Ajouter des options sur les blocs Gutenberg natifs (en React/JSX), et gérer des Custom Post Types proprement.</p>



<p>Rien de dingue sur le papier.<br />Mais en vrai, c&rsquo;est le genre de projet où tu te retrouves vite avec du code front mélangé au code métier, des fichiers qui grossissent, et un moment où tu te demandes « mais pourquoi j&rsquo;ai foutu ça là ? ».</p>



<p>Avant, j&rsquo;aurais passé une journée entière à refactoriser pour que ce soit propre.<br />Là, j&rsquo;ai tenté de faire équipe avec l&rsquo;IA.</p>



<p>Spoiler : c&rsquo;est ni parfait, ni magique. Mais franchement, c&rsquo;est troublant.</p>



<h2 class="wp-block-heading">Le moment où j&rsquo;ai compris que c&rsquo;était différent</h2>



<p>Au début, je lui ai juste balancé :</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>« J&rsquo;ai du code pour étendre des blocs Gutenberg. Aide-moi à séparer proprement le front-end de la logique métier. »</p>
</blockquote>



<p>Windsurf ne m&rsquo;a pas juste craché trois suggestions de fonctions.<br />Il a <strong>réorganisé des fichiers</strong>.<br />Il a créé des dossiers, proposé une archi, déplacé du code React d&rsquo;un côté, les enregistrements de CPT de l&rsquo;autre.</p>



<p>Pas parfait, hein. Mais cohérent.</p>



<p>Et moi, pendant ce temps, je ne codais presque pas.<br />Je lisais, je validais, je virais ce qui ne me plaisait pas.</p>



<p>C&rsquo;est là que j&rsquo;ai senti le truc : je n&rsquo;étais plus vraiment en train de « coder ».<br />J&rsquo;étais en train de <strong>piloter</strong>.</p>



<h2 class="wp-block-heading">Font Awesome sur les boutons : ou comment j&rsquo;ai réécrit mes prompts 15 fois</h2>



<p>Le truc qui m&rsquo;a le plus pris la tête, c&rsquo;est l&rsquo;ajout d&rsquo;<strong>icônes Font Awesome sur les blocs <code>core/button</code></strong>.</p>



<p>Sur le papier, c&rsquo;est simple :<br />tu rajoutes un control dans le panneau Gutenberg, tu laisses l&rsquo;utilisateur choisir une icône, tu l&rsquo;affiches côté front avec la bonne classe Font Awesome.</p>



<p>Dans la réalité ?<br />Windsurf m&rsquo;a sorti :</p>



<ul class="wp-block-list">
<li>Des contrôles Gutenberg qui ne compilaient pas.</li>



<li>Des attributs qui disparaissaient au save/reload.</li>



<li>Du JSX bancal avec des icônes qui se dupliquaient ou qui partaient dans le mauvais sens.</li>



<li>Une fois, il m&rsquo;a même proposé d&rsquo;importer <strong>tout Font Awesome en JS côté éditeur</strong> (merci, mais non).</li>
</ul>



<p>Le problème, c&rsquo;est que je lui demandais des trucs trop vagues.<br />Genre :</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>« Ajoute une option pour choisir une icône Font Awesome. »</p>
</blockquote>



<p>Résultat : il partait dans tous les sens.</p>



<p>J&rsquo;ai dû affiner. Beaucoup.<br />Jusqu&rsquo;à arriver à des prompts du style :</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>« Ajoute un SelectControl dans InspectorControls pour choisir parmi 5 icônes Font Awesome.<br />L&rsquo;attribut doit s&rsquo;appeler <code>faIcon</code>, de type string.<br />L&rsquo;icône doit s&rsquo;afficher avant le texte du bouton, côté front uniquement, avec la classe <code>fa-solid fa-{nomIcone}</code>. »</p>
</blockquote>



<p>Là, ça commençait à tourner.</p>



<p>Mais j&rsquo;ai quand même dû <strong>tout recommencer à zéro</strong> une fois, parce qu&rsquo;il m&rsquo;avait généré une logique tellement tordue que je ne m&rsquo;y retrouvais plus.</p>



<h2 class="wp-block-heading">Ce que j&rsquo;ai appris : parler à une IA, c&rsquo;est un métier</h2>



<p>Ce qui m&rsquo;a le plus marqué, c&rsquo;est à quel point <strong>la façon dont tu poses la question change tout</strong>.</p>



<p>Si tu dis :<br />« Fais-moi un truc pour gérer des icônes »,<br />tu obtiens du code générique, verbeux, à moitié cassé.</p>



<p>Si tu dis :<br />« Crée un attribut <code>faIcon</code> de type string, ajoute un SelectControl avec 5 options fixes, affiche l&rsquo;icône en <code>&lt;i&gt;</code> avec la classe correspondante dans le RichText »,<br />là, ça roule.</p>



<p>Et ça, pour moi, c&rsquo;est nouveau.<br />Avant, coder, c&rsquo;était : je sais ce que je veux, je le tape.<br />Maintenant, c&rsquo;est : je sais ce que je veux, <strong>j&rsquo;apprends à le formuler pour qu&rsquo;une IA le fasse</strong>.</p>



<p>C&rsquo;est presque un exercice de specs en temps réel.<br />Et franchement, ça m&rsquo;a forcé à être plus <strong>clair dans ma tête</strong> sur ce que je voulais vraiment.</p>



<h2 class="wp-block-heading">La structure du plugin : là où l&rsquo;IA m&rsquo;a vraiment aidé</h2>



<p>Ce qui est cool, c&rsquo;est que Windsurf m&rsquo;a aidé à mettre en place une archi propre dès le début.</p>



<p>Avant, j&rsquo;aurais fait un gros <code>index.php</code>, un dossier <code>assets</code>, et je me serais dit « je rangerai plus tard ».<br />Jamais fait, évidemment.</p>



<p>Là, il m&rsquo;a proposé direct :</p>



<ul class="wp-block-list">
<li>Un dossier <code>src/blocks</code> pour tout le code React/JSX qui étend les blocs Gutenberg.</li>



<li>Un dossier <code>includes</code> pour les CPT et la logique métier.</li>



<li>Un build propre avec webpack (enfin… plus ou moins propre, j&rsquo;ai dû ajuster).</li>



<li>Une séparation claire entre ce qui tourne côté éditeur et ce qui se charge côté front.</li>
</ul>



<p>C&rsquo;est pas révolutionnaire.<br />Mais c&rsquo;est exactement ce que j&rsquo;aurais dû faire depuis le début, et que je faisais jamais par flemme.</p>



<p>L&rsquo;IA m&rsquo;a forcé à être <strong>structuré dès le départ</strong>, parce qu&rsquo;elle avait besoin de comprendre où mettre les fichiers.</p>



<p>Et résultat : mon code est plus maintenable. Plus facile à relire. Moins bordélique.</p>



<h2 class="wp-block-heading">Les moments de frustration (parce qu&rsquo;il y en a)</h2>



<p>Je ne vais pas mentir : il y a eu des phases où j&rsquo;ai eu envie de tout fermer et de retourner coder comme avant.</p>



<p>Genre :</p>



<ul class="wp-block-list">
<li>Quand l&rsquo;IA me modifiait 4 fichiers alors que je lui avais demandé d&rsquo;en toucher qu&rsquo;un.</li>



<li>Quand elle « corrigeait » du JSX qui marchait très bien, merci.</li>



<li>Quand elle m&rsquo;inventait des hooks React qui n&rsquo;existent pas, et que je perdais 20 minutes à comprendre pourquoi ça plantait.</li>
</ul>



<p>Il y a aussi ce moment bizarre où tu te rends compte que <strong>tu lis plus de code que tu n&rsquo;en écris</strong>.<br />Et parfois, ça frustre.<br />Parce que coder, c&rsquo;est pas juste produire du code. C&rsquo;est aussi réfléchir, tâtonner, trouver des solutions.</p>



<p>Avec l&rsquo;IA, tu sautes une partie de ce process.<br />Des fois c&rsquo;est génial.<br />Des fois, tu te sens un peu… spectateur.</p>



<h2 class="wp-block-heading">Ce que je retiens après deux semaines</h2>



<p><strong>Windsurf, c&rsquo;est un outil de structure avant tout.</strong><br />Il te force à penser ton projet proprement, parce qu&rsquo;il a besoin de comprendre où il met les pieds.</p>



<p><strong>C&rsquo;est aussi un amplificateur de clarté mentale.</strong><br />Si tu ne sais pas vraiment ce que tu veux, il va partir en vrille.<br />Si tu es clair, il va vite.</p>



<p><strong>Mais ça reste un assistant, pas un dev.</strong><br />Tu ne peux pas lui laisser la main sur tout.<br />Surtout si tu fais du React/JSX un peu poussé, ou si tu touches à des trucs sensibles (attributs Gutenberg, save/edit, etc.).</p>



<p>Le truc à retenir ?<br /><strong>L&rsquo;IA produit le squelette. Toi, tu mets la chair.</strong></p>



<p>Et franchement, pour l&rsquo;instant, ça me va bien comme ça.</p>



<h2 class="wp-block-heading">Et toi, t&rsquo;en es où ?</h2>



<p>Je suis curieux de savoir si d&rsquo;autres devs WordPress ont testé ce genre d&rsquo;outils sur des projets Gutenberg.<br />Parce que franchement, entre le JSX, les attributs, le <code>save</code> vs <code>edit</code>, et tout le bordel de la compilation&#8230; c&rsquo;est pas toujours évident de savoir ce qu&rsquo;on peut déléguer à l&rsquo;IA et ce qu&rsquo;il vaut mieux garder sous contrôle.</p>



<p>Si t&rsquo;as des retours d&rsquo;expérience, des prompts qui marchent bien (ou qui partent complètement en couille), ou juste une opinion tranchée sur le fait de coder avec une IA, balance-moi ça.</p>



<p>Parce qu&rsquo;au fond, on est tous un peu en train d&rsquo;apprendre ensemble comment bosser avec ces trucs-là.<br />Et autant partager les galères, non ?</p>
</div>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
