Description du projet React

Un projet React typique se compose de plusieurs fichiers et dossiers, chaque partie ayant son rôle spécifique.

Ce chapitre fournit une explication de base du code d'un projet React pour vous aider à comprendre la structure du projet et les fonctions de chaque partie.

  • Un projet React se compose de plusieurs fichiers et dossiers. Les fichiers principaux incluent :index.html、index.jsetApp.js。

  • Les composants React sont les briques de base d'une application, et peuvent être des composants fonctionnels ou des composants de classe.

  • JSX est la syntaxe centrale de React, utilisée pour décrire l'interface utilisateur.

  • Les props et le state sont les principaux moyens de gérer les données dans les composants React.

Structure du projet

Un projet React comprend généralement les fichiers et dossiers suivants :

my-react-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── App.js          # 主组件
│   ├── App.css         # 主组件的样式
│   ├── index.js        # 项目入口文件
│   ├── index.css       # 全局样式
│   └── ...             # 其他组件和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

Analyse des fichiers principaux

public/index.html

public/index.htmlEst le fichier modèle HTML de l'application React.

React va effectuer le rendu du composant dans<div id="root"></div>à l'intérieur.

React va effectuer le rendu du composant dans
à l'intérieur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Application React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

src/index.jsEst le fichier d'entrée de l'application React.

src/index.jsResponsable du rendu du composant racine (généralement App) dans div#root dans index.html.

Exemple

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <Application />
  </React.StrictMode>,
  document.getElementById('root')
);

src/App.js

src/App.jsEst le composant racine de l'application React.

src/App.jsContient généralement la logique principale et la structure de l'application.

Exemple

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

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

export default App;

src/App.css

src/App.css Est le fichier de style du composant App.

Exemple

.App {
  text-align: center;
  margin-top: 50px;
}

src/index.css

src/index.cssEst le fichier de style global, généralement utilisé pour définir des styles globaux ou réinitialiser les styles par défaut du navigateur.

Exemple

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

package.json

package.jsonIl s'agit du fichier de configuration du projet, contenant les métadonnées, les dépendances et les scripts du projet.

Exemple

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start", // Démarrer le serveur de développement
    "build": "react-scripts build", // Compiler le code de production
    "test": "react-scripts test",   // Exécuter les tests
    "eject": "react-scripts eject"  // Éjecter la configuration (utilisation avancée)
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

Structure de base des composants React

Les composants React sont les éléments constitutifs essentiels des applications React.

Un composant contient généralement les parties suivantes :

1. Composants fonctionnels

Composants définis à l'aide de fonctions.

Exemple

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h2>Ceci est un composant défini par une fonction.</h2>
    </div>
  );
}

export default MyComponent;

Explication :

  • import React from 'react';: Importation de la bibliothèque React ; React est une bibliothèque JavaScript pour créer des interfaces utilisateur.

  • function MyComponent() { ... }: Ceci est un composant fonction. Un composant fonction est une fonction JavaScript qui renvoie du JSX.

  • return (...): du composantreturninstruction renvoie un élément JSX. JSX est une extension syntaxique de JavaScript, permettant d'écrire du code de type HTML en JavaScript.

  • export default MyComponent;: LeMyComponentcomposant est exporté comme export par défaut. De cette façon, d'autres fichiers peuventimport MyComponent from './MyComponent';importer et utiliser ce composant.

2. Composants de classe

Composants définis à l'aide de classes (maintenant moins courants ; les composants fonction sont recommandés).

Exemple

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h2>Ceci est un composant de classe.</h2>
      </div>
    );
  }
}

export default MyComponent;

Explication :

  • import React from 'react';: Importer la bibliothèque React ; c'est la base pour utiliser React.

  • import { Component } from 'react';: Depuis la bibliothèque React, importerComponentclass.ComponentEst la classe de base pour les composants de classe React ; tous les composants de classe doivent l'étendre.

  • class MyComponent extends Component { ... }: Défini unMyComponentcomposant de classe nommé. Il étendComponentclasse, donc il peut utiliser les fonctionnalités des composants de classe React (telles que les méthodes de cycle de vie, la gestion d'état, etc.).

  • render() { ... }: renderEst la méthode qui doit être implémentée dans un composant de classe. Elle est chargée de renvoyer la structure de l'interface utilisateur (JSX) du composant.

    • return (...): Renvoie un élément JSX, décrivant l'interface utilisateur du composant.

    • <div><h2>这是一个类组件</h2></div>: Il s'agit d'une structure JSX simple, contenant undivet unh2titre.

  • export default MyComponent;: LeMyComponentcomposant est exporté comme export par défaut. De cette façon, d'autres fichiers peuventimport MyComponent from './MyComponent';importer et utiliser ce composant.

3、JSX

JSX est une extension syntaxique de JavaScript, permettant d'écrire du code de type HTML en JavaScript.

Exemple

const element = <h1>Hello, JSX!</h1>;

4、Props

Les props sont des paramètres d'entrée d'un composant, utilisés pour transmettre des données d'un composant parent à un composant enfant.

Exemple

function Welcome(props) {
  return <h1>Bonjour, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

5、State

State est l'état interne d'un composant, utilisé pour gérer les données du composant.

Exemple (utilisation du Hook useState)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur: {count}</p>
      <button onClick={() => setCount(count + 1)}>Bouton</Incrémenter>
    </div>
  );
}

export default Counter;

Processus d'exécution d'un projet React

Démarrer le serveur de développement

Exécuteznpm startouyarn start, démarrez le serveur de développement.

Ouvrez votre navigateur et visitez http://localhost:3000 pour voir l'application.

Générer le code de production

Exécuteznpm run buildouyarn build, générant du code de production optimisé.

Exécuter les tests

Exécuteznpm testouyarn test, exécutant les cas de test du projet.

Autres extensions