2.1. Le fichier package.json

Maintenant, nous allons ajouter un fichier nommé package.json à la racine de notre projet. Ce fichier doit vous être familier : il permet de décrire les dépendances d’un projet pour le Node Package Manager. Ajoutez le fichier package.json à la racine de notre projet, avec le contenu ci-dessous :

{
  "name": "react-pokemons-app",
  "version": "1.0.0",
  "description": "An awesome application to handle some pokemons.",
  "dependencies": {
    "@types/node": "12.11.1",
    "@types/react": "16.9.9",
    "@types/react-dom": "16.9.2",
    "@types/react-router-dom": "^5.1.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "typescript": "3.6.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Il y a trois parties intéressantes à remarquer dans ce fichier package.json :

1. Les dépendances : À partir de la ligne 5, apparaît une liste de toutes les dépendances de notre application. Par exemple, on retrouve la dépendance à react lui-même à la ligne 10, et on retrouve notre cher TypeScript à la ligne 14. Les autres dépendances permettent de bien faire fonctionner React avec TypeScript.
2. Les scripts : Il y a deux scripts qui sont définit à la ligne 17 et 18. Le premier script, start, permet de mettre en place un petit environnement de développement pour que nous puissions tester notre application React directement dans un navigateur. Ensuite, le script build nous permettra de créer le livrable de notre application lorsque nous aurons finis nos développements. Il est encore un peu tôt pour parler de tou ça, nous y reviendrons lorsque nous déploierons notre application sur Internet.
3. D’autres éléments de configuration : On retrouve vers la fin du fichiers un élément eslintConfig, qui permet d’analyser la syntaxe de votre code écrit avec ES6. Et l’élément browserslist permet de configurer le comportement de certains scripts en fonction des navigateurs sur lesquels vous souhaitez faire fonctionner votre application.

Si vous avez le temps, vous pouvez retrouver toutes les explications détaillées ligne par ligne de ce fichier, dans la documentation officielle sur le sujet.