Introduction à React JS<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> min read</span>

Introduction à React JS9 min read

C’est un vrai bordel le développement web en ce moment , vous ne trouvez pas ? On trouve des centaines de technologies et j’ai l’impression qu’il y a un nouveau framework qui sors tout les jours. Sans rire , comment prendre une décision et choisir une technologie fiable et stable. J’ai choisis react js pour les raisons suivantes :

J’ai crée un article sur React JS vous expliquant pourquoi vous devriez utiliser React JS et les single page app. Pour résumer, les single page app sont des site web très rapides et fluides permettant de créer des site fiables et très agréables pour les utilisateurs.

En plus de ça , les single page app permettent de construire une API REST et plusieurs applications front end pour avoir une vitesse de développement optimale

Pourquoi choisir React JS ?

On va en parler très rapidement car l’article résume très bien la question. React JS c’est une librairie développée par facebook , elle permets de créer rapidement un site internet et est globalement extrêmement performante.

Choisir react, c’est choisir l’avenir, c’est une technologie de plus en plus utilisée et améliorée de jour en jour, il y a une grande communauté et il y auras toujours quelqu’un pour répondre à vos questions.

En plus de cela, react c’est vraiment facile à prendre en mains. En quelques semaines on peux apprendre cette technologie et on va pouvoir commencer très rapidement à créer des site web.

Enfin, j’aimerai parler de React Native , une technologie permettant de créer des applications mobiles avec react. C’est une technologie très intéressante car elle permets avec les mêmes compétences qu’un développeur web de créer une application mobile

Débuter avec React JS

Commençons maintenant à coder avec React JS, avant tout on dois installer notre environnement afin de commencer à coder. Pour ça on as pas mal de solutions mais je vais vous en proposer une. Celle que j’utilise à chaque fois et qui me permets en quelques minutes d’avoir un site prêt a l’emploi.

Ce truc génial c’est create-react-app, un petit script crée par l’équipe de react permettant d’installer rapidement react

L’installation

Bon, le premier truc à faire c’est d’avoir node JS d’installé, pour se faire rendez vous sur ce site , et téléchargez la dernière version LTS de node JS, installez la et poursuivez l’article.

Une fois node installé, on dois créer un dossier et ouvrir un cmd ou un terminal. Dans ce terminal vous allez taper ceci :

npx create-react-app votreapplication

Qu’est ce que ça fait ce truc ? Et bien c’est un npx, un script d’installation de fichiers vous permettant d’avoir une base stable pour commencer à coder. Ce script inclue webpack , react et d’autres libraires permettant de lancer un server web directement.

Une fois l’installation faite, tapez ceci :

npm start

Le serveur web va se lancer sur le port 3000, pour y accéder vous devez donc vous rendre dans votre navigateur web et taper : http://localhost:3000

Cette adresse c’est votre serveur local sur lequel vous allez travailler avant de publier votre site web.

Bon, quand on se rend sur le site web on obtiens ça :

Page d’acceuil react

Stylé non ? On as une petite page qui tourne, en vrai ils auraient pu faire un hello world il auraient gagnés 2 heures 🙂

Bon, on ne fait rien avec une petite page qui tourne, étudions maintenant la structure du fichier et voyons ce que l’on doit modifier/créer pour faire une page web.

On as 3 fichiers, et il n’y en as qu’un seul qu’on va modifier, d’abord il y a node-modules. C’est dans ce dossier que les modules de node js sont installés, react est stocké ici, et webpack aussi d’ailleurs.

Ensuite, on as le dossier “public”, celui-ci contient le document html qui va être envoyé à l’utilisateur. D’ailleurs vous voyez qu’il es vierge, enfin presque. On trouve ceci :

<div id="root"></div>

C’est le point “d’injection” de notre script react. C’est à dire que tout ce que l’on va écrire et qui va créer et modifier notre page web va être injecté dans cette div via un script.

Enfin, on as le dossier “src”, c’est la que la magie opère. Dans ce dossier on va écrire notre code et il va automatiquement se compiler et s’injecter dans le fichier html.

Commencer à coder

Bon, on va commencer à coder, d’abord je dois vous parler d’un concept qui s’appelle “le point d’entrée”. Non ce n’est pas une blague douteuse, c’est le vrai terme.

C’est quoi le point d’entrée ? Et bien c’est le fichier qui va être injecté dans notre page html, en fait tout le code que l’on va écrire va devoir d’une façon ou d’une autre être relié au fichier “index.js” du fichier src.

Donc l’idée c’est de centraliser votre code dans un seul fichier. Mais notre fichier va être énorme ?

Et bien heureusement, non. create-react-app possède une fonctionnalité permettant de compiler votre code dans un seul fichier appellé bundle.js

Concrètement vous allez pouvoir inclure vos autres fichiers dans votre index.js et donc, ne pas avoir à écrire un fichier de 10 000 lignes, bonne nouvelle non ?

Aller ne perdons pas de temps et créons notre premier hello world !

Ecrire le hello world !

Créez un nouveau fichier avec l’extension “.js”, dans mon cas je vais l’appeler “helloworld.js” . Une fois fait on dois dans un premier temps intégrer react au fichier afin que l’on puisse créer du code JSX

Le JSX est un pseudo langage inventé par facebook permettant de créer du html en javascript

import React from 'react' // on importe React dans notre fichier

/*On crée une class qui hérite de react.Component, cette classe permets de créer des components c'est à dire
* des bout de votre site web que vous allez pouvoir imbriquer les uns dans les autres*/
class HelloWorld extends React.Component{
    render() { // la méthode retournant du JSX c'est à dire l'html de la page
        return (
            <p>hello world depuis react ! </p>
        )
    }
}

Détaillons un peu ce code, ici on crée une classe qui hérite de React.Component, cette classe va nous permettre de générer de l’html. Ensuite on crée une méthode render() qui sera appelée lors du chargement du component. Et cette méthode retourne du JSX c’est à dire du pseudo HTML.

Une fois ce fichier crée, on dois encore l’intégrer à notre index.js , rappelez vous c’est notre point d’entrée.

Pour se faire, ouvrez index.js , on voit une fonction assez bizzare :

ReactDOM.render(<App />, document.getElementById('root'));

Cette fonction va en fait injecter notre code dans la page web, donc c’est dans celle-ci que l’on dois mettre notre composant helloworld.js

Vous voyez que le premier argument de render() est un tag HTML assez bizzare, en fait c’est encore une fois du JSX. Ici il est dit “injecte le composant App dans la page”.

Donc on va maintenant voir comment injecter notre composant

L’injection du composant

La première chose à faire c’est d’importer notre composant. Encore une fois tout dois être centralisé dans notre point d’entrée, donc on dois indiquer a ce fichier d’inclure nos autres fichiers.

import HelloWorld from './helloworld';

Mettez cette ligne en haut de la page et remplacez simplement la fonction render par ceci :

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

Et la on as un problème, a votre avis , pourquoi ? Et bien on n’as pas exporté notre fichier helloworld.js donc index.js ne peux pas le trouver, pour palier à ça rendez vous dans notre composent et a la fin , exportez le comme ceci

export default HelloWorld

Félicitations, tout fonctionne parfaitement ! Vous avez crée un composant React

Hello world depuis react
Hello world depuis react

Conclusion

Alors, c’est vrai que ça auras été long pour un simple hello world, mais la structure de votre projet est posée, pour créer un nouveau composant, répétez l’opération et le tour es joué.

Bien évidemment React JS permets de faire beaucoup plus que d’afficher un simple paragraphe disant hello world. Il est possible de créer facilement des animations, des interactions entre l’utilisateur et la page web ou encore des requêtes AJAX.

React JS est une vrai opportunité dans le développement web moderne, de plus en plus de développeurs utilisent cette technologie et beaucoup d’entreprises se tournent vers cette technologie.

Si cet exercice vous as plu, je vous invite à poursuivre votre apprentissage de cette superbe technologie

Vous pouvez vous abonner à ma newsletter pour recevoir le guide GRATUIT Ultime pour bien débuter la programmation

Vous abonner à notre newsletter

* champ requis



Laisser un commentaire

Fermer le menu
×
×

Panier