React-Projektbeschreibung

Ein typisches React-Projekt besteht aus mehreren Dateien und Ordnern, wobei jeder Teil eine bestimmte Rolle hat.

Dieses Kapitel bietet eine grundlegende Erklärung des React-Projektcodes, um Ihnen zu helfen, die Projektstruktur und die Funktionen der einzelnen Teile zu verstehen.

  • Ein React-Projekt besteht aus mehreren Dateien und Ordnern. Zu den Kerndateien gehören:index.html、index.jsundApp.js。

  • React-Komponenten sind die grundlegenden Bausteine einer Anwendung und können Funktionskomponenten oder Klassenkomponenten sein.

  • JSX ist die Kernsyntax von React und wird verwendet, um UI zu beschreiben.

  • Props und State sind die wichtigsten Möglichkeiten, Daten in React-Komponenten zu verwalten.

Projektstruktur

Ein React-Projekt enthält typischerweise die folgenden Dateien und Ordner:

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 der Kerndateien

public/index.html

public/index.htmlIst die HTML-Vorlagendatei der React-Anwendung.

React wird die Komponente rendern in<div id="root"></div>darin abgelegt werden.

React wird die Komponente rendern in
darin abgelegt werden.

Beispiel

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

src/index.js

src/index.jsIst die Einstiegsdatei der React-Anwendung.

src/index.jsVerantwortlich für das Rendern der Root-Komponente (normalerweise App) in div#root in index.html.

Beispiel

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

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

src/App.js

src/App.jsIst die Root-Komponente der React-Anwendung.

src/App.jsEnthält normalerweise die Hauptlogik und -struktur der Anwendung.

Beispiel

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

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

export default App;

src/App.css

src/App.css Ist die Stildatei für die App-Komponente.

Beispiel

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

src/index.css

src/index.cssIst die globale Stildatei, die normalerweise verwendet wird, um globale Stile zu definieren oder die Standardstile des Browsers zurückzusetzen.

Beispiel

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

package.json

package.jsonDies ist die Projektkonfigurationsdatei, die die Metadaten, Abhängigkeiten und Skripte des Projekts enthält.

Beispiel

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start", // Entwicklungsserver starten
    "build": "react-scripts build", // Produktionscode erstellen
    "test": "react-scripts test",   // Tests ausführen
    "eject": "react-scripts eject"  // Konfiguration auswerfen (erweiterte Verwendung)
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

Grundlegende Struktur von React-Komponenten

React-Komponenten sind die zentralen Bausteine von React-Anwendungen.

Eine Komponente enthält normalerweise die folgenden Teile:

1. Funktionskomponenten

Komponenten, die mithilfe von Funktionen definiert werden.

Beispiel

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h2>Dies ist eine Komponente, die durch eine Funktion definiert wird.</h2>
    </div>
  );
}

export default MyComponent;

Erklärung:

  • import React from 'react';: Die React-Bibliothek wurde importiert; React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

  • function MyComponent() { ... }: Dies ist eine Funktionskomponente. Eine Funktionskomponente ist eine JavaScript-Funktion, die JSX zurückgibt.

  • return (...): DiereturnAnweisung gibt ein JSX-Element zurück. JSX ist eine Syntaxerweiterung von JavaScript, mit der du HTML-ähnlichen Code in JavaScript schreiben kannst.

  • export default MyComponent;: DieMyComponentKomponente wird als Default-Export exportiert. Auf diese Weise können andere Dateienimport MyComponent from './MyComponent';importieren und diese Komponente verwenden.

2. Klassenkomponenten

Komponenten, die mit Klassen definiert werden (heutzutage weniger verbreitet; Funktionskomponenten werden empfohlen).

Beispiel

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h2>Dies ist eine Klassenkomponente.</h2>
      </div>
    );
  }
}

export default MyComponent;

Erklärung:

  • import React from 'react';: Importiere die React-Bibliothek; dies ist die Grundlage für die Verwendung von React.

  • import { Component } from 'react';: Importiere aus der React-BibliothekComponentclass.ComponentIst die Basisklasse für React-Klassenkomponenten; alle Klassenkomponenten müssen sie erweitern.

  • class MyComponent extends Component { ... }: Definiert wurde eine benannteMyComponentKlassenkomponente. Sie erweitertComponentKlasse, sodass sie die Eigenschaften von React-Klassenkomponenten nutzen kann (wie Lifecycle-Methoden, State-Management usw.).

  • render() { ... }: renderIst die Methode, die in einer Klassenkomponente implementiert werden muss. Sie ist dafür verantwortlich, die UI-Struktur (JSX) der Komponente zurückzugeben.

    • return (...): Gibt ein JSX-Element zurück, das die UI der Komponente beschreibt.

    • <div><h2>这是一个类组件</h2></div>: Dies ist eine einfache JSX-Struktur, die einedivund einh2Überschrift.

  • export default MyComponent;: DieMyComponentKomponente wird als Default-Export exportiert. Auf diese Weise können andere Dateienimport MyComponent from './MyComponent';importieren und diese Komponente verwenden.

3、JSX

JSX ist eine Syntaxerweiterung von JavaScript, mit der du HTML-ähnlichen Code in JavaScript schreiben kannst.

Beispiel

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

4、Props

Props sind Eingabeparameter einer Komponente und werden verwendet, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben.

Beispiel

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

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

5、State

State ist der interne Zustand einer Komponente und wird verwendet, um die Daten der Komponente zu verwalten.

Beispiel (Verwendung des useState-Hooks)

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Anzahl: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
    </div>
  );
}

export default Counter;

Ablauf zum Ausführen eines React-Projekts

Entwicklungsserver starten

Starten Sienpm startoderyarn start, um den Entwicklungsserver zu starten.

Öffnen Sie Ihren Browser und besuchen Sie http://localhost:3000, um die Anwendung anzuzeigen.

Produktionscode erstellen

Starten Sienpm run buildoderyarn build, wodurch optimierter Produktionscode generiert wird.

Tests ausführen

Starten Sienpm testoderyarn test, wodurch die Testfälle des Projekts ausgeführt werden.

Andere Erweiterungen