Comment installer React

Comment installer React sur votre ordinateur de développement

Comment installez-vous React?

React est une bibliothèque, ainsi direinstallerpeut sembler un peu bizarre. Peut-êtreinstallerest un meilleur mot, mais vous obtenez le concept.

Il existe différentes manières de configurer React afin qu'il puisse être utilisé sur votre application ou votre site.

Chargez React directement dans la page Web

Le plus simple consiste à ajouter directement le fichier JavaScript React dans la page. Cela est préférable lorsque votre application React interagit avec les éléments présents sur une seule page et ne contrôle pas réellement l'ensemble de la navigation.

Dans ce cas, vous ajoutez 2 balises de script à la fin dubodyétiqueter:

<html>
  ...
  <body>
    ...
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
      crossorigin
    ></script>
  </body>
</html>

Le16.7.0-alpha.2version dans les liens pointe vers le dernier Alpha de 16.7 (au moment de la rédaction), qui a des Hooks disponibles. Veuillez le remplacer par la dernière version de React disponible.

Ici, nous avons chargé à la fois React et React DOM. Pourquoi 2 bibliothèques? Parce que React est 100% indépendant du navigateur et peut être utilisé en dehors de celui-ci (par exemple sur les appareils mobiles avec React Native). D'où la nécessité pour React DOM, d'ajouter les wrappers pour le navigateur.

Après ces balises, vous pouvez charger vos fichiers JavaScript qui utilisent React, ou même JavaScript en ligne dans unscriptétiqueter:

<script src="app.js"></script>

<!-- or -->

<script> //my app </script>

UtiliserJSXvous avez besoin d'une étape supplémentaire: chargerBabel

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

et chargez vos scripts avec le spécialtext/babelType MIME:

<script src="app.js" type="text/babel"></script>

Vous pouvez maintenant ajouter JSX dans votre fichier app.js:

const Button = () => {
  return <button>Click me!</button>
}

ReactDOM.render(<Button />, document.getElementById(‘root’))

Découvrez cet exemple simple de Glitch:https://glitch.com/edit/#!/react-example-inline-jsx?path=script.js

Commencer de cette manière avec des balises de script est bon pour la construction de prototypes et permet un démarrage rapide sans avoir à configurer un flux de travail complexe.

Utilisez create-react-app

create-react-appest un projet visant à vous familiariser avec React en un rien de temps, et toute application React qui doit dépasser une seule page trouvera celacreate-react-apprépond à ce besoin.

Vous commencez par utilisernpx, qui est un moyen simple de télécharger et d'exécuter les commandes Node.js sans les installer.npxlivré avecnpm(depuis la version 5.2) et si vous n'avez pas encore installé npm, faites-le maintenant à partir dehttps://nodejs.org(npm est installé avec Node).

Si vous ne savez pas quelle version de npm vous avez, exécuteznpm -vpour vérifier si vous devez mettre à jour.

Conseil: consultez le didacticiel de mon terminal OSX surhttps://flaviocopes.com/macos-terminal/si vous n'êtes pas familier avec l'utilisation du terminal, s'applique également à Linux - je suis désolé mais je n'ai pas de tutoriel pour Windows pour le moment, mais Google est votre ami.

Quand tu coursnpx create-react-app <app-name>,npxvaTéléchargerla plus récentecreate-react-apprelâchez, exécutez-le, puis supprimez-le de votre système. C'est génial parce que vous n'aurez jamais une version obsolète sur votre système, et chaque fois que vous l'exécutez, vous obtenez le dernier et le meilleur code disponible.

Commençons alors:

npx create-react-app todolist

C'est à ce moment-là qu'il a fini de fonctionner:

create-react-appa créé une structure de fichiers dans le dossier que vous avez indiqué (todolistdans ce cas), et a initialisé unGitdépôt.

Il a également ajouté quelques commandes dans lepackage.jsonfichier, afin que vous puissiez immédiatement démarrer l'application en allant dans le dossier et exécuteznpm start.

En plus denpm start,create-react-appa ajouté quelques autres commandes:

  • npm run build: pour construire les fichiers de l'application React dans lebuilddossier, prêt à être déployé sur un serveur
  • npm test: pour exécuter la suite de tests en utilisantPlaisanter
  • npm eject: pour éjecter decreate-react-app

Ejecter est l'acte de décider quecreate-react-appa fait assez pour vous, mais vous voulez faire plus que ce qu'il permet.

Puisquecreate-react-appest un ensemble de conventions de dénominateur commun et un nombre limité d'options, il est probable qu'à un moment donné vos besoins exigeront quelque chose d'unique qui dépasse les capacités decreate-react-app.

Lorsque vous éjectez, vous perdez la capacité des mises à jour automatiques mais vous gagnez plus de flexibilité dans leBabeletWebpackconfiguration.

Lorsque vous éjectez, l'action est irréversible. Vous obtiendrez 2 nouveaux dossiers dans votre répertoire d'application,configetscripts. Ceux-ci contiennent les configurations - et maintenant vous pouvez commencer à les éditer.

Si vous avez déjà une application React installée à l'aide d'une ancienne version de React, vérifiez d'abord la version en ajoutantconsole.log(React.version)dans votre application, vous pouvez mettre à jour en exécutantyarn add [email protected], et yarn vous invitera à mettre à jour (choisissez la dernière version disponible). Répétez pouryarn add [email protected](remplacez «16.7» par la version la plus récente de React pour le moment)

CodeSandbox

Un moyen simple d'avoir lecreate-react-appstructure, sans l'installer, est d'aller àhttps://codesandbox.io/set choisissez «Réagir».

CodeSandbox est un excellent moyen de démarrer un projet React sans avoir à l'installer localement.

Codepen

Une autre excellente solution estCodepen.

Vous pouvez utiliser ce projet de démarrage Codepen qui est déjà préconfiguré avec React, avec prise en charge des Hooks:https://codepen.io/flaviocopes/pen/VqeaxB

Les «stylos» Codepen sont parfaits pour les projets rapides avec un seul fichier JavaScript, tandis que les «projets» sont parfaits pour les projets avec plusieurs fichiers, comme ceux que nous utiliserons le plus lors de la création d'applications React.

Une chose à noter est que dans Codepen, en raison de son fonctionnement en interne, vous n'utilisez pas les modules ES classiquesimportsyntaxe, mais plutôt à importer par exempleuseState, tu utilises

const { useState } = React

et pas

import { useState } from 'react'

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: