NOUS LES DEVS

Installation et démarrage

A la conquête de React partie 1

Niveau : débutant(e)

</> </> </>

Application

Pour expérimenter React, j’ai décidé de développer une application de saisie de temps et de gestion de projets, ce qui va me permettre d’aborder un maximum de choses dans cette technologie et d’aller assez en profondeur. L’idée va être surtout de développer tout le côté interface utilisateur mais aussi de toucher aux APIs car c’est quelque chose de courant avec React.

Prérequis

Avant de pouvoir utiliser React il va falloir que j’installe Node.js. Pourquoi nodejs ? Car j’utilise create-react-app et qu’il faut un gestionnaire de paquets npm pour faire l’installation. L’utilitaire embarque un serveur de développement node préconfiguré avec des trucs que j’aime bien tels que Webpack et Babel.

create-react-app

create-react-app est un outil formidable, en une seule ligne de commande je vais pouvoir installer et configurer l’environnement de travail, et il n’y aura rien d’autre à faire pour pouvoir me lancer dans React.

Pour ce faire, j’ouvre le terminal,je me rends dans le dossier où je veux réaliser l’installation et j’exécute la ligne de commande suivante. Ensuite je choisis un nom pour mon projet.

#npx create-react-app <le nom du projet>
npx create-react-app jobtimer

Lancer React

Après quelques secondes de patience, le terminal me confirme que tout est bien installé et m’indique quelques commandes utiles à exécuter.

Success! Created jobtimer at /Users/golendercaria/Sites/react/jobtimer
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd jobtimer
  yarn start

Happy hacking!

J’entre dans le répertoire jobtimer qui vient d’être créé.

cd jobtimer

Grâce à la commande npm start, je vais pouvoir démarrer le web serveur et lancer l’application React.

npm start

L’application de démo va automatiquement s’ouvrir à l’adresse http://localhost:3000/. Elle facilite la prise en main de React car je peux directement voir quel fichier je dois modifier (src/App.js). Il y a également un lien vers la documentation, très chouette car en partie traduite en français.

Dans la console, je peux également voir quelques informations pratiques comme l’URL du web serveur ainsi que la commande qui permet de faire le build (mais ça, ce sera pour plus tard).

Compiled successfully!

You can now view jobtimer in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.14:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

Voilà, l’installation est terminée et fonctionnelle. Je vais pouvoir commencer à coder mon application !

07/02/2023

Yann Vangampelaere - nouslesdevs -

React4