Démarrer Avec ReactJS

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:

Ce qui affiche au navigateur:

First program reactjs- premier programme reactjs



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:

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:

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):

Cette commande vous permet d'entrer au sein de votre application React
Ensuite vous tappez la commande suivante pour démarrer votre app:

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

Leave a Reply

Your email address will not be published. Required fields are marked *