Pour utiliser React en production, vous avez besoin de npm qui est inclus avec Node.js.
Pour avoir un aperçu de ce qu'est React, vous pouvez écrire du code React directement au sein d'une page HTML.
Mais pour utiliser React en production, vous devez installer npm et Node.js.
1. RéactJS directement dans une page HTML
Le moyen le plus rapide de commencer à apprendre ReactJS est de l'exploiter directement dans vos fichiers HTML.
Commencez par inclure trois scripts, les deux premiers nous permettent d'écrire du code React au sein de nos codes JavaScripts, et le troisième, nous permet d'écrire la syntaxe JSX et ES6 dans les anciens navigateurs:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>; } ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html> |
Ce qui affiche au navigateur:
Cette façon d'utiliser React peut convenir à des application de test, mais pour la production, vous devrez configurer un environnement React.
2 - Installation d'un environnement React
Pour installaer un environnement complet pour le développement React, vous devez:
i) - Installer NodeJS
ii) - Installer l'environnement create-react-app
Pour installer NodeJS veuillez vous rendre sur la page officielle du logiciel: https://nodejs.org/en/download/
Pour installer le package nmp corespondant au développement React, il suffit de lancer la commande cmd et taper la commande:
|
1 |
npm install -g create-react-app |
Après avoir installer tous ces outils, il est temps maintenant de créer une application ReactJS en tapant une simple commende cmd. A cet effet naviguer via l'invite de de commande cmd à l'aide la commande cd (change directory) à l'endroit où vous souhaitez créer votre React app et tapez ensuite la commande:
|
1 |
create-react-app myapp |
Cela créera une application nommée myapp
Pour démarrer votre application que vous venez de créer, il suffit de taper (toujours sur l'invite de commande):
|
1 |
cd myapp |
Cette commande vous permet d'entrer au sein de votre application React
Ensuite vous tappez la commande suivante pour démarrer votre app:
|
1 |
npm start |
La commande cmd vous affiche à ce moment un message indiquant que l'application est démarrée à l'adresse : http://localhost:3000/
Et en tapant l'adresse indiquée sur l'invite de commande ci-dessus vous obtenez l'aperçu de votre première application React-JS:
Younes Derfoufi
CRMEF OUJDA
