ReactJS

Componenjutsu

React (aussi appelé React.js ou ReactJS) est une bibliothèque bla bla bla développée par Facebook depuis 2013 bla bla bla Le but principal de cette bibliothèque est de bla bla bla création d’application web monopage

via la création de composants !

On y est ! Les composants, ces petits bout de JS qui te permettent d’être réutiliser plusieurs fois, feront de toi un senseï du codage.

Donc aujourd’hui pour vous ce soir, j’ai risqué ma vie en volant le rouleau des techniques interdites dissimulée dans la demeure de l’Hokage à Konoha.

Moi cherchant le Componenjutsu

Maintenant appris et testé je vais vous apprendre à l’utiliser.

J’ai donc créer un exemple assez simple.

Voilà une simple vue composé de trois cases différentes, contenant différents éléments, de différentes catégories.

Ce code n’est pas très long, mais peux le devenir rapidement, car répéter 3 Pane ce qui fait 5 lignes de codes par éléments c’est déjà trop surtout quand on peut transformer ces 5 lignes en une seule.

Commençons par créer un fichier qui contiendra notre composants en respectant cette simple syntax.

const Item = (props) => ();

et maintenant ajoutons :

• 1 Pane
• Les props suffisantes
• Le style nécessaires
• 5 cuillère à soupe de lait
• 1 cuillère à café de levure
• 3 cuillère à soupe de farine

const Item = (props) => (
  <Pane elevation={1} style={pane}>
    <img alt={props.type} src={props.image} height={100}
    width="auto"/>
    <br></br>
    <Text><strong>{props.name}</strong></Text>
    <Text>{props.type}</Text>
  </Pane>
);

Oups ! J’ai confondu avec ma recette de gateau au chocolat..

[embed]Enfin bref !

Voilà notre composants devrait maintenant ressembler à cela.

Ils nous reste à importer notre composants dans le premier fichier.

import Item from './myComponent'

et utiliser notre composants comme ceci :

<Item name="Pomme" type="Fruits" image={apple}></Item>

Voilà donc la différence entre les deux fichiers.

END

J’espère que ça vous aura plus !

Suivez moi sur instagram et github aussi ^^