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éé.
Grâce à la commande npm start, je vais pouvoir démarrer le web serveur et lancer l’application React.
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 -