Vous souhaitez installer un projet ReactJS, passer sur un projet React en Local ou peut-être seulement revoir les bases d’un bon début de projet ? Avant tout vous aurez besoin de choisir et d’installer les bons outils ; Votre vous du futur vous remerciera croyez-moi…
De fait commençons !
1.Console émulée sur Windows et installation de NodeJS
Nous allons en effet avoir besoin de deux choses pour faire fonctionner notre serveur local React : d’abord NodeJS qui sera le moteur, et un émulateur de console sur Windows qui nous permettra (entre autres de contrôler).
On commence par installer le moteur :
On va aller chercher nodeJS sur https://nodejs.org/
Installez en suivant les paramètres par défaut.
Maintenant passons à Cmder :
Cmder va, comme je disais, nous permettre de contrôler React JS, mais plus globalement c’est une jolie (subjectivement parlant) console, avec un effet de transparence pas piqué des hannetons.
On accède à https://cmder.net/
De-zipez le dossier téléchargé dans un dossier cmder sur votre bureau.
Vous êtes fin prêts !
2.Initialiser un projet ReactJS
Maintenant nous allons initialiser notre projet ; pour cela il ne nous reste plus que deux étapes.
Choisissons notre boîte à outil
Pour initialiser un projet nous avons beaucoup de choix grâce à la communauté React, il existe de nombreuses boîtes à outils plus ou moins préprogrammées selon vos besoins.
Je vous en fais ici une liste non exhaustive des types les plus connus avec les liens correspondants, si vous pensez avoir un autre besoin !
⌚ Import en script sur page HTML ( celui là est un peu hors sujet mais cependant sachez que React JS peut être utilisé après simple import avec la balise <script> d’HTML
https://fr.reactjs.org/docs/add-react-to-a-website.html)
Site web plus statiques orienté contenu ( comme wordpress ) : Gatsby
https://www.gatsbyjs.org/
Rendu côté serveur : ( avec ses avantages SEO ) : Next.js
https://nextjs.org/
⚗ Boîtes à outils plus flexibles ( pour la création de modules par exemple …) comme nwb…
https://github.com/insin/nwb#react-apps
Et il en existe bien d’autres …
Je vais vous montrer l’utilisation de Create-React-App ; une bonne alternative à utiliser pour des site monopage (« one page »). Il est pré configuré pour offrir une expérience confortable : avertissement sur les erreurs communes, un build de production optimisé, un service worker offline-first intégré, un manifest pour PWA… (https://github.com/facebook/create-react-app#whats-included).
On va donc obtenir une très bonne base et pouvoir produire dès la fin de l’initialisation !
3. Initialiser un projet avec Create React App
Quelques étapes très simples :
- On ouvre Cmder et on tape « cd .. «
Cela permet de sortir de notre dossier d’installation et d’arriver sur le bureau dans le terminal
- Maintenant on va taper « npx create-react-app NomDeVotreApp »
- Votre projet est quasiment prêt !
Laissez la boîte à outil se télécharger et créer votre projet
- Taper « cd NomDeVotreApp »
- Taper « npm start »
- Votre projet vient de se lancer en local
Un onglet devrait s’ouvrir dans votre navigateur favori et vous afficher le fameux « Edit src/App.js » ans save to reload
Nous allons pouvoir commencer la création …
Mais cela nous le verrons dans le prochain article !
Pour résumer :
NodeJS pour le moteur
Cmnder pour controler
Create-react-app pour avoir une solide base générée en quelques secondes
Sources :
