C’est quoi React.js ?
React.js est une bibliothèque Javascript libre développée par Facebook depuis 2013.
Le but principal de cette bibliothèque est de faciliter la création d’application web monopage , via la création de composants dépendant d’un état et générant une page HTML à chaque changement d’état.
Installation de React.js:
Tout d’abord ouvrons un terminal sur Ubuntu
Vous devez vérifier que NPM et NODE sont bien installé
sudo apt-get install nodejs npm
Une fois installé verifier que CURL soit également installé
sudo apt-get install curl
Une fois terminer nous devons encore effectuer quelques installations
Commencons par le paquet build-essential , indispensable au bon fonctionnement de Node
sudo apt-get install -y build-essential
À présent ça y est nous sommes prêts , nous pouvons installer React.js
sudo npm install -g create-react-app
Create-react-app est un package que nous pouvons trouver dans NPM et qui nous facilitera la vie. Il prend en charge chaque configuration. Nous avons seulement besoin de l’utiliser. Maintenant que nous avons installé create-react-app, créons notre première application en tapant:
create-react-app hello-world
cd /hello-world
Une fois la création et la configuration de l’application terminées, nous passons au répertoire qui vient d’être créé et qui s’appelle comme notre application en tapant cd / hello-world. Le mien s’appelle hello-word , le vôtre peut être tout ce que vous voulez. Après quelques secondes, un message apparaît indiquant que notre application a été créée avec succès et nous donne quelques instructions. Nous verrons plus tard ce que signifient chacune d’elles. A présent, il ne nous reste plus qu’à accéder à notre répertoire d’application et à taper:
npm start
Cette commande démarrera un serveur local et ouvrira notre application dans le navigateur, comme ceci:
Ceci est un exemple d’application inclus avec le package create-react-app. Si vous souhaitez fermer le serveur local, appuyez simplement sur Ctrl + C. Une fonctionnalité intéressante est que chaque modification que vous apportez à votre application lorsque le serveur local est en cours sera immédiatement affichée dans le navigateur, sans qu’il soit nécessaire d’actualiser la page. Modifions-le un peu. Je vais ouvrir le dossier hello-world avec un éditeur de code.
Dans la partie gauche de l’écran, vous pouvez voir la structure des dossiers de notre application.
node_modules: contient toutes les bibliothèques et configurations Javascript.
public: voici les fichiers qui vont être publics sur le serveur et les personnes.
src: voici tous nos composants React.
Maintenant, si nous allons dans le fichier appelé App.js, nous supprimons la portion de code sélectionnée et nous allons la changer. N’oubliez pas que tout ce que vous voulez voir apparaître sur le site Web doit être placé dans une grande div.
Et c’est tout. Vous venez de créer votre première application React.
Nous nous retrouverons ensemble Vendredi prochain pour parler des différents instructions vu précédemment lors de se tutoriel .
CODE SOURCES:
https://codeburst.io/installing-reactjs-and-creating-your-first-application-d437706498ed