front end

Installation d’une application React avec CREATE-REACT-APP

installation d'une application react
Logo de React créer par Facebook

Nous allons voir ensemble comment faire l’installation d’une application react mais avant tous un peu d’histoire:

Qu’est ce que React ?

De ce que nous en disent nos amis de SupInfo . https://www.supinfo.com/articles/single/4159-apprendre-reactjs:

React est une bibliothèque d’interfaces utilisateurs développée sur Facebook pour faciliter la création de composants interactifs, stateful et réutilisables de l’interface utilisateur. Elle est utilisée sur Facebook dans le domaine de la production. Par ailleurs, Instagram.com est entièrement écrit en React.

L’un de ses principaux arguments de vente est que non seulement elle fonctionne sur l’aspect client, mais elle peut également être rendue côté serveur, et cela leur permet de travailler ensemble de manière inter-opérationnelle.

Elle utilise également un concept appelé le DOM virtuel qui rend des sous-arbres de nœuds basés sur des changements d’état, et ce de manière sélective. Elle effectue le moins de manipulations de DOM possibles pour maintenir les composants à jour.

Comment fonctionne le domaine virtuel?

Tous les biens pertinents une personne pourrait éventuellement avoir, et reflète les personnes état actuel. Ce que React fait avec le DOM est essentiel.

Maintenant réfléchissons. Si nous avons pris un objet et fait quelques changements (du type: ajout d’une moustache ou de quelques biceps en plus sur une image de Steve Buscemi), nous pouvons observer dans React-land que deux choses se produisent. Tout d’abord, React exécute un algorithme «différent», qui identifie ce qui a changé. La deuxième étape est la réconciliation, où elle met à jour le DOM avec les résultats de diff.

La façon de réagir fonctionne, plutôt que de prendre la personne réelle et de la reconstruire à partir du sol, il n’y aurait que le visage et les bras de changés. Cela signifie que si nous avions du texte dans une entrée et qu’un rendu a eu lieu, tant que le noeud principal de l’entrée n’avait pas été programmé pour la réconciliation, le texte resterait inchangé.

Parce que React utilise un faux DOM et non un vrai, elle ouvre également une nouvelle possibilité amusante. Nous pouvons rendre ce faux DOM sur le serveur, et boom: il y a des vues.

Maintenant l’installation d’une application react app est une solution pour démarrer une application web de manière simple sans installer tout les dépôts dont nous aurions besoin. Ça a ses avantage et ses inconvénients.

Avantages :

  • C’est cool quand on commence.
  • Plus simple que ça tu meurs.

Inconvénients :

  • Il y a beaucoup de choses dont on ne se sert pas.
  • Peut être lourd pour une petite application qui utilise peu de modules.

Pour installer React app Il faut au préalable Nodejs et la commande NPM

NodeJS v10

Dans la documentation de Node on nous dit:

# sudo apt update
# curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
# sudo apt install -y nodejs

# node -v //permet de voir la version de Node.js

Puis:

# node //pour tester avec un console.log des familles

On installe la commande NPM:

# sudo npm install --global npm

# npm -v

On installe CRA ( Create React App ):

# sudo npm install --global create-react-app

On créer un dossier pour le projet:

# mkdir //lechemin/nomdudossier
# cd //nomdudossier
# sudo /create-react-app nomduprojet

Si tous ce passe bien le retour terminal renvoie:

# We suggest that you begin by typing:

# cd memory
# yarn start

# Happy hacking!

Tout est ok du coup on ce déplace dans notre projet comme nous l’indique le retour terminal:

# cd nomduprojet
# npm start

L’application web n’a plus qu’à être lancée dans un navigateur !