J'en vois beaucoup qui galèrent avec React…
Car ils font une app avant de comprendre la base
On va faire du React dans un fichier HTML, sans JSX pour comprendre cmt ça marche
#RT ❤️
Petit thread 👇 #thread #react + une vidéo YTB pour tout comprendre
Car ils font une app avant de comprendre la base
On va faire du React dans un fichier HTML, sans JSX pour comprendre cmt ça marche
#RT ❤️
Petit thread 👇 #thread #react + une vidéo YTB pour tout comprendre
Donc React c'est une library JavaScript où tout est JavaScript !
C'est possible de faire du React super facilement sans même Next / CRA etc...
On a l'impression que pour l'utiliser c'est lourd, mais avec 26 lignes de code l'app est ready
C'est possible de faire du React super facilement sans même Next / CRA etc...
On a l'impression que pour l'utiliser c'est lourd, mais avec 26 lignes de code l'app est ready
Qu'y a-t-il dans cette app ?
Une div #root qui est la div dans laquelle React va afficher le rendu
Ensuite avec les CDN de React reactjs.org/docs/cdn-links… on ajoute React et ReactDOM !
Puis, dans un script, on récupère le RootElement avec du JS basique
Une div #root qui est la div dans laquelle React va afficher le rendu
Ensuite avec les CDN de React reactjs.org/docs/cdn-links… on ajoute React et ReactDOM !
Puis, dans un script, on récupère le RootElement avec du JS basique
Puis, on crée un composant React.
Le premier argument définit le type de notre composant React si c'est une div, un header ou autre
Le deuxième sont les props qu'on lui donne
Ici comme c'est une div, on peut lui donner toutes les props basiques comme style, class ou id !
Le premier argument définit le type de notre composant React si c'est une div, un header ou autre
Le deuxième sont les props qu'on lui donne
Ici comme c'est une div, on peut lui donner toutes les props basiques comme style, class ou id !
Puis tous les arguments après seront les enfants 👶
Pour les enfants, on crée deux éléments span sans props et avec comme enfants du texte
Le code fait ci-dessus va se traduire en HTML comme ceci :
Pour les enfants, on crée deux éléments span sans props et avec comme enfants du texte
Le code fait ci-dessus va se traduire en HTML comme ceci :
Tu vois que le code précédent est quand même pas super cool à lire.
Donc React a dû trouver une solution pour écrire du React comme du HTML !
C'est là que le JSX est né !
Voici le code JavaScript fait cette fois avec JSX !
Donc React a dû trouver une solution pour écrire du React comme du HTML !
C'est là que le JSX est né !
Voici le code JavaScript fait cette fois avec JSX !
Quelques nouveautés ici :
Il y a un script pour importer babel !
Le type du fichier est maintenant type="text/babel"
Sinon j'ai fait comme du HTML cependant dans style, on passe un objet en JavaScript et pas en HTML avec une string
Il y a un script pour importer babel !
Le type du fichier est maintenant type="text/babel"
Sinon j'ai fait comme du HTML cependant dans style, on passe un objet en JavaScript et pas en HTML avec une string
Ici notre code, c'est du JavaScript !
On peut donc l'utiliser partout dans notre JSX avec les { ... }
Tu as accès au dom, Windows, document etc...
Je peux, par exemple, faire un Math.random au milieu de mon code !
On peut donc l'utiliser partout dans notre JSX avec les { ... }
Tu as accès au dom, Windows, document etc...
Je peux, par exemple, faire un Math.random au milieu de mon code !
Donc maintenant je vais créer un petit composant button
Celui-ci va pouvoir être appelé partout exactement comme un élément HTML
Il est représenté par une fonction et les paramètres qui lui sont donnés
Celui-ci va pouvoir être appelé partout exactement comme un élément HTML
Il est représenté par une fonction et les paramètres qui lui sont donnés
Tu te rappelles du code avec uniquement du javascript sans jsx ?
Et bah on peut le retrouver en utilisant le repl babel : babeljs.io/repl#?browsers… babeljs.io/repl#?browsers…
ici, on voit exactement ce qui se passe !
Babel va appeler React.createElement avec notre élément !
Et bah on peut le retrouver en utilisant le repl babel : babeljs.io/repl#?browsers… babeljs.io/repl#?browsers…
ici, on voit exactement ce qui se passe !
Babel va appeler React.createElement avec notre élément !
Ici ce que tu peux remarquer aussi, c'est que mon button a 2 paramètres :
* bgColor
* title
Que je peux ensuite définir dans le composant qui l'utilise !
Mais quand tu écris button tu fais : <button>text</button>
et là je dois faire <Button title="text" />
* bgColor
* title
Que je peux ensuite définir dans le composant qui l'utilise !
Mais quand tu écris button tu fais : <button>text</button>
et là je dois faire <Button title="text" />
C’est pas très élégant
Mais en JSX tout ce qui est donné entre les balises se nomme "children"
Donc, je remplacerais la props title par children pour utiliser mon button comme ceci :
<Button>text</Button>
Voici le code !
Mais en JSX tout ce qui est donné entre les balises se nomme "children"
Donc, je remplacerais la props title par children pour utiliser mon button comme ceci :
<Button>text</Button>
Voici le code !
En fait, il n'y a aucune magie noire, tout est compréhensible !
J'espère que tu as pu le comprendre...
Mais, j'ai préparé un tutoriel avec beaucoup plus d'infos dans une vidéo YouTube :
👉 👈
Hésite pas à me faire un feedback ici ou sur YouTube
J'espère que tu as pu le comprendre...
Mais, j'ai préparé un tutoriel avec beaucoup plus d'infos dans une vidéo YouTube :
👉 👈
Hésite pas à me faire un feedback ici ou sur YouTube
Oublie pas de follow @melvynxdev ❤️💪😎
Si tu souhaite être averti de mes actus, tips et plein d'autres choses qui arrivent, tu peux t'inscrire ici : melvynx.com/emails
dernier thread :
Si tu souhaite être averti de mes actus, tips et plein d'autres choses qui arrivent, tu peux t'inscrire ici : melvynx.com/emails
dernier thread :
https://twitter.com/melvynxdev/status/1544715541817856000
• • •
Missing some Tweet in this thread? You can try to
force a refresh
