Installation de React (NPM)

Avant de commencer, assurez-vous que Node.js et npm sont installés. Vous pouvez vérifier s'ils sont installés avec les commandes suivantes :

node -v
npm -v

Si votre système ne prend pas encore en charge Node.js et NPM, consultez notreTutoriel Node.js。

Nous recommandons d'utiliser le système de modules CommonJS dans React, comme browserify ou webpack. Ce tutoriel utilise webpack.

Utiliser npm en Chine est très lent. Vous pouvez utiliser l'outil en ligne de commande cnpm personnalisé de Taobao (avec prise en charge de la compression gzip) à la place de npm par défaut :

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Ensuite, vous pouvez utiliser la commande cnpm pour installer des modules :

$ cnpm install [name]

Pour plus d'informations, voir :http://npm.taobao.org/。

Utilisez create-react-app pour créer rapidement un environnement de développement React

React fournit un outil officiel, Create React App, pour configurer rapidement des projets React.

create-react-app vient de Facebook. Avec cette commande, nous pouvons rapidement créer un environnement de développement React sans configuration.

Le projet créé automatiquement par create-react-app est basé sur Webpack + ES6.

Exécutez la commande suivante pour créer un projet :

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

Vous pouvez également utiliser lanpxcommande pour le créer. npx est un outil inclus dans npm 5.2.0 et versions ultérieures, utilisé pour exécuter des paquets npm locaux ou distants :

npx create-react-app my-app

Ouvrez dans le navigateurhttp://localhost:3000/, le résultat est affiché dans la figure ci-dessous :

La structure du répertoire du projet est la suivante :

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (ou  package-lock.json)

Description des répertoires et des fichiers

node_modules/

Stocke tous les paquets de dépendances du projet. Ce répertoire est généré automatiquement par npm ou yarn et contient toutes les bibliothèques et tous les modules tiers nécessaires au fonctionnement du projet.

public/

Stocke les fichiers statiques. Webpack ne traitera pas les fichiers de ce répertoire.publicLes fichiers de ce répertoire seront copiés directement dans le répertoire de build.

  • favicon.ico: La petite icône dans l'onglet du navigateur.
  • index.html: Fichier modèle HTML. Les composants React seront montés sur ledivélément dans ce fichier.
  • logo192.pngetlogo512.png: Icônes du logo React de différentes tailles.
  • manifest.json: Fichier manifeste d'application web, utilisé pour définir des métadonnées telles que le nom et les icônes de l'application.
  • robots.txt: Utilisé pour indiquer aux moteurs de recherche quelles pages peuvent être explorées.

src/

Stocke le code source de l'application. C'est ici que vous effectuez principalement le développement.

  • App.css：AppLe fichier de style du composant.
  • App.js: Le fichier du composant principal, définissant un composant React de base.
  • App.test.js：AppLe fichier de test du composant.
  • index.css: Fichier de style global.
  • index.js: Le fichier d'entrée de l'application, chargé de rendre les composants React dans le DOM.
  • logo.svg: Fichier SVG du logo React.
  • reportWebVitals.js: Un fichier de surveillance des performances, qui peut vous aider à comprendre et à analyser les performances de votre application.
  • setupTests.js: Un fichier utilisé pour configurer l'environnement de test.

.gitignore

Liste les fichiers et répertoires que Git doit ignorer, tels quenode_modules/et le répertoire de sortie de build.

package.json

Le fichier de configuration du projet, contenant les informations du projet, les scripts, les dépendances, etc.

README.md

Le fichier README du projet, contenant les informations de base du projet et les instructions d'utilisation.

yarn.lockoupackage-lock.json

Fichier de verrouillage, enregistrant les versions exactes des dépendances afin de garantir une installation cohérente des dépendances dans différents environnements.

Essayez de modifier le code du fichier src/App.js :

src/App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Bienvenue dans le tutoriel d'exemple</h2> </div> <p className="App-intro"> Vous pouvez le modifier dans le <code>src/App.js</code> fichier. </p> </div> ); } } export default App;

Après modification, ouvrez http://localhost:3000/ (généralement actualisé automatiquement), et la sortie est la suivante :

src/index.js est un fichier d'entrée. Nous pouvons essayer de modifier directement le code du fichier src/index.js :

Remarque :Dans React 18, ReactDOM.render est obsolète.

Exemple

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Bonjour {props.name}!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Afficher le composant Hello et passer la prop name
root.render(<Hello name="World" />);

Ouvrez ensuite dans le navigateurhttp://localhost:3000/et il affichera :

Hello World!

Créez votre premier composant

Vous pouvez modifier leApp.jsfichier pour créer votre premier composant. Voici un exemple simple qui modifie leAppcomposant pour afficher "Hello, React!" :

Exemple

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Bonjour, React!</h1>
      </header>
    </div>
  );
}

export default App;

Après avoir enregistré le fichier, le navigateur s'actualisera automatiquement, et vous devriez voir "Hello, React!" affiché sur la page.

Vous pouvez créer davantage de fichiers de composants dans lesrcrépertoire, par exemple, créez unHello.jsfichier :

Code du fichier Hello.js :

import React from 'react';

function Hello() {
  return <h1>Bonjour depuis un nouveau composant!</h1>;
}

export default Hello;

Ensuite, importez et utilisez ce nouveau composant dansApp.js:

Exemple

import React from 'react';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Hello />
      </header>
    </div>
  );
}

export default App;

Après avoir enregistré le fichier, le navigateur se rafraîchira automatiquement et vous verrez le contenu du nouveau composant.

Autres extensions