<h1 id="d438" class="pw-post-title yr fk ys bv he yt yu yv yw yx yy yz za zb zc zd ze zf zg zh zi zj zk zl zm zn by" data-selectable-paragraph="">Composants Compos&eacute;s, La nouvelle M&eacute;thode d&rsquo;&eacute;crire des Composants React :</h1>
Il y a peu, j'ai d&eacute;couvert les composants compos&eacute;s en typescript et je ne peux plus m&rsquo;en passer. Souvent peu r&eacute;f&eacute;renc&eacute;, peu connu du vaste monde des d&eacute;veloppeurs, je vous propose une petite introduction au monde des &ldquo;compos&eacute;s&rdquo;.
<h2 id="b567" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by">Qu&rsquo;est-ce que c&rsquo;est ?</h2>
Un composant compos&eacute; se trouve sous cette forme :
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent&gt;
 &lt;MyComponent.Header&gt; Un Header &lt;/MyComponent.Header&gt;
 &lt;MyComponent.Body&gt; Un Body &lt;/MyComponent.Body&gt;
 &lt;MyComponent.Footer&gt; Un Footer &lt;/MyComponent.Footer&gt;
 &lt;/MyComponent&gt;
)</code></pre>
<ul>
<li id="4ac3" class="ack acl ys ts b zq zr zt zu zw acm aba acn abe aco abi acp acq acr ea by" data-selectable-paragraph="">MyComponent:&nbsp;est le composant React parent de tous les compos&eacute;s</li>
<li id="96e6" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">Header, Body, Footer :&nbsp;sont les composants compos&eacute;s du parent, ils ne peuvent pas &ecirc;tre utilis&eacute;s dans l&rsquo;application en dehors du parent.</li>
</ul>
<h2 id="8f6b" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by">Le parent : MyComponent :</h2>
Le parent des compos&eacute;s s&rsquo;&eacute;crit de la mani&egrave;re suivante :
<pre class="language-javascript"><code>import React from 'react'
import { MyComponentContextProvider } from './card-context'
import Body from './body'
 ...
interface MyComponentCompounds {
 Body: Body
 ...
}
interface MyComponentType {
 props: ...
 children: React.ReactNode
}
const MyComponent React.FC&lt;MyComponentType&gt; &amp; MyComponentCompounds = ({props,children}) =&gt; {
 const context = useMemo(() =&gt; ({ ... }), [...])
 return (
 &lt;MyComponentContextProvider value={context}&gt;
 {children}
 &lt;/MyComponentContextProvider&gt;
 )
}
MyComponent.Body = Body
 ...
export default MyComponent</code></pre>
Il est l&rsquo;&eacute;quivalent d&rsquo;un contenaire. On peut en profiter pour lui donner le style des contours ainsi que le style de placement associ&eacute; au composant global. Le parent peut avoir un Context-Provider qui permettra aux enfants de r&eacute;utiliser certaines valeurs du parent &agrave; l&rsquo;aide des hooks de react.
Exemple de code pour la cr&eacute;ation du provider et du contexte hooks:
<pre class="language-javascript"><code>import { createContext, useContext } from 'react'
type myComponentContextType = {
 value?: ...
}
const MyComponentContext = createContext&lt;myComponentContextType&gt;({})
export const MyComponentContextProvider = MyComponentContext.Provider
export function useMyComponentContext() {
 const context = useContext(MyComponentContext)
 if (!context) {
 throw new Error('Blablabla erreur blablabla')
 }
 return context
}</code></pre>
<h1 id="b62c" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by" data-selectable-paragraph="">Les compos&eacute;s : Body</h1>
Le composant compos&eacute; aura une structure semblable &agrave; un composant React normale, mais il doit imp&eacute;rativement rester petit, comme le d&eacute;crit l&rsquo;exemple suivant :
<pre class="language-javascript"><code>import React from 'react'
interface BodyPropsType {
 props: ...
}
const Body = ({ props }: BodyPropsType) =&gt; {
 const {value} = useMyComponentContext()
 return (
 &lt;div&gt;
 {...}
 &lt;/div&gt;
 )
}
export default Body</code></pre>
Il sera capable de r&eacute;utiliser des valeurs stock&eacute;es dans le contexte. Il g&egrave;re son propre style et ses propres fonctionnalit&eacute;s.
Si besoin, on peut chainer les composants compos&eacute;s comme dans cet exemple :
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent&gt;
 &lt;MyComponent.Header&gt; Un Header &lt;/MyComponent.Header&gt;
 &lt;MyComponent.Body&gt; 
 &lt;MyComponent.Body.Title&gt;Un Titre &lt;/MyComponent.Body.Title&gt;
 &lt;MyComponent.Body.SubTitle&gt;Un ...&lt;/MyComponent.Body.SubTitle&gt;
 &lt;/MyComponent.Body&gt;
 &lt;MyComponent.Footer&gt; Un Footer &lt;/MyComponent.Footer&gt;
 &lt;/MyComponent&gt;
)</code></pre>
Title&nbsp;et&nbsp;Subtitle&nbsp;sont des compos&eacute;s du composant&nbsp;Body&nbsp;qui lui-m&ecirc;me est un compos&eacute; du composant&nbsp;MyComponent.
<h1 id="827a" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by" data-selectable-paragraph="">Les Avantages Des Compos&eacute;s en Type-Script :</h1>
Les avantages des composants compos&eacute;s sont les suivants :
<ul>
<li id="5260" class="ack acl ys ts b zq zr zt zu zw acm aba acn abe aco abi acp acq acr ea by" data-selectable-paragraph="">Avec TypeScript l&rsquo;auto-compl&eacute;tion ! Cela peut paraitre tout b&ecirc;te, mais lors de l&rsquo;int&eacute;gration de composants &ccedil;a donne beaucoup de clart&eacute; de savoir ce qui peut &ecirc;tre fait par notre composant.</li>
<li id="fbcf" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">La clart&eacute; dans la gestion des props: chaque Compos&eacute; g&egrave;re ses propres props, cela &eacute;vite au parent de porter toutes les props et &eacute;vite le chainage de props</li>
</ul>
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent {...propsComponent}&gt;
 &lt;MyComponent.Body {...propsBody}&gt; Un Body &lt;/MyComponent.Body&gt;
 &lt;/MyComponent&gt;
)
VS
const Container = () =&gt; (
 &lt;MyComponent propsComponent={propsComponent} propsBody={propsBody} messageBody='Un Body' /&gt;
)</code></pre>
<ul>
<li>Les performances : gros sujets des d&eacute;veloppeurs front, la performance de leur code et notamment la chasse au re-render inutiles. Isoler certaines props &agrave; leur compos&eacute; au lieu de passer par leur parent, &eacute;vite les re-render intempestifs. En d&rsquo;autres termes, Si Body a besoin de se re-render pour un changement d&rsquo;&eacute;tat ou de props quelconque, Header n&rsquo;en a peut-&ecirc;tre pas besoin. Je vous conseille d&rsquo;utiliser :&nbsp;<a class="ay nr" href="https://github.com/welldone-software/why-did-you-render" rel="noopener ugc nofollow" target="_blank">why-did-you-render</a>&nbsp;pour comprendre le re-render de certains composants. </li>
<li id="8495" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">La scalabilit&eacute;: deuxi&egrave;me gros sujet connu par tous: comment faire du code standard r&eacute;utilisable ? Le secret&nbsp;les compos&eacute;s. En effet plus notre code est d&eacute;coup&eacute; en petite partie, plus notre code sera standard et &ldquo;propre&rdquo;, plus il sera facile de le r&eacute;int&eacute;grer dans des composants et ainsi &eacute;viter de coder deux fois la m&ecirc;me choses.</li>
<li id="0f8e" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">Le petit Bonus: la maintenabilit&eacute; ! A qui &ccedil;a n&rsquo;est pas arriv&eacute; de devoir retoucher &agrave; un composant React de 300 lignes incompr&eacute;hensible ? Lorsque l&rsquo;on code, il faut bien garder en t&ecirc;te que notre code &agrave; une date de p&eacute;remption. Tout ce qui &eacute;crit aujourd&rsquo;hui et qui est consid&eacute;r&eacute; comme acceptable ne le sera peut &ecirc;tre plus dans 1 an. Construire des composants &ldquo;l&eacute;ger&rdquo;, &ldquo;petits&rdquo;, c&rsquo;est construire des composants claires et maintenables pour l&rsquo;avenir!</li>
</ul>
[keep it simple, keep it smart]

Un tutoriel qui apprend à écrire des composants React, réutilisable, flexible et facile à prendre en main.

Comment écrire des Composants Flexible et Réutilisables en React

<h1>Comment bien d&eacute;buter avec Git&nbsp;</h1>
Voici un petit Tuto pour comprendre rapidement les commandes essentielles de Git.&nbsp; Git est un syst&egrave;me de contr&ocirc;le partag&eacute; open source con&ccedil;u pour g&eacute;rer des petits aux tr&egrave;s grands projets, avec rapidit&eacute; et efficacit&eacute;s. Autrement dit, si vous voulez partager votre projet avec d'autres d&eacute;veloppeurs, c'est l'outil le plus adapt&eacute;.
<h2>Les commandes de bases :</h2>
<h3>Initialisation</h3>
Pour initialiser git sur votre projet, vous devez taper :
<pre class="language-undefined"><code>git init</code></pre>
Permet d'initialiser git et cr&eacute;er un dossier vide.
<h3>En cours de D&eacute;veloppement</h3>
Une fois que vous avez ajout&eacute; des modifications &agrave; votre dossier ou projet. Vous pouvez lister toutes les modifications en cours &agrave; l'aide de :
<pre class="language-undefined"><code>git status</code></pre>
Pour sauvegarder TOUT&nbsp;les changements en cours (la commande la plus courante) :
<pre class="language-undefined"><code>git add .</code></pre>
Pour commit les changements, sauvegarder et lui ajouter un commit message :
<pre class="language-undefined"><code>git commit -m "mon message de commit"</code></pre>
et enfin pour ajouter ce commit au remote repository:
<pre class="language-undefined"><code>git push</code></pre>
&agrave; noter que si vous travaillez sur une locale branch et qu'elle n'est pas reli&eacute; &agrave; une branch sur le remote repository, il vous sera surement demand&eacute; de :
<pre class="language-undefined"><code> git push --set-upstream origin local-branch</code></pre>
En effet, afin que la branch sur laquelle vous travaillez soit partag&eacute; avec le reste de votre &eacute;quipe de d&eacute;veloppeurs, vous devez la mettre &agrave; disposition du remote repository.
<h3>Branching :</h3>
Avant de vous fournir les commandes git qui permettent de travailler avec des branches en parall&egrave;les, parlons un peu de ce qu'est le "branching".&nbsp;La cr&eacute;ation de branches consiste &agrave; cr&eacute;er des copies du projet en cours pour travailler sur des versions en parall&egrave;les, en conservant l'original. En d'autres termes, travailler sur plusieurs choses en parall&egrave;le sans pour autant perdre le travail original. Pour cr&eacute;er une nouvelle branche :
<pre class="language-undefined"><code>git checkout -b ma-nouvelle-branch</code></pre>
voil&agrave; une nouvelle branch locale. Pour changer de branch (il faut que la branch existe) :
<pre class="language-undefined"><code>git checkout existing-branch</code></pre>
Pour revenir rapidement sur la dernier branch en cours :
<pre class="language-undefined"><code>git checkout -</code></pre>
Pour lister toutes les branch existantes:
<pre class="language-undefined"><code>git branch -l</code></pre>

Et enfin pour supprimer une branch locale :
<pre class="language-undefined"><code>git branch -D branch-a-supprimer</code></pre>

En conclusion, j'esp&egrave;re que cette liste de commande git vous permettra d'appr&eacute;hender plus facilement vos d&eacute;buts dans le d&eacute;veloppement. &Agrave; venir, une explication compl&egrave;te sur Git et les diff&eacute;rentes pratiques du d&eacute;veloppement &agrave; plusieurs.

Comment bien débuter avec git ? Les 10 meilleurs commandes à suivre.

Blog Posts by Tag

Comment écrire des Composants Flexible et Réutilisables en React

Débuter avec Git