Day React Essential-Training

Konzept-Highlights:

1. ReactDOM.render()
2. React.createElement()
3. Requisiten in React
4. Zugriff auf Listen in React
6. Destrukturierung in Reaktion

1. ReactDOM.render()

In React wird die Funktion ReactDOM.render() verwendet, um ein React-Element (oder eine Komponente) im DOM zu rendern. Diese Funktion benötigt zwei Argumente: das zu rendernde React-Element und das DOM-Element, in dem Sie es rendern möchten.

z.B.) In diesem Beispiel rendert ReactDOM.render() ein einfaches „Hello, React!“ Nachricht in ein DOM-Element mit der ID root. Dies ist die Grundstruktur, die Sie in den meisten React-Anwendungen zum Mounten der App im DOM sehen.

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

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

ReactDOM.render(element, document.getElementById('root'));

2. React.createElement()

Die Funktion React.createElement() ist eine weitere Möglichkeit, React-Elemente zu erstellen. Während JSX (wie im obigen Beispiel) die gebräuchlichste Methode zum Erstellen von Elementen ist, ist das Verständnis von React.createElement() wichtig, da es sich um den zugrunde liegenden Mechanismus hinter JSX handelt.

z.B.) In diesem Beispiel erstellt React.createElement() ein h1-Element mit dem Inhalt „Hello, React!“. Das erste Argument ist der Typ des Elements (in diesem Fall h1), das zweite Argument sind die Requisiten (hier null, weil wir keine Requisiten haben) und das dritte Argument sind die Kinder, also die Inhalt des Elements.

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

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));

3. Requisiten in React

Props (kurz für „Eigenschaften“) sind die Art und Weise, wie Daten in React von einer Komponente an eine andere übergeben werden. Sie sind schreibgeschützt und helfen Ihnen, Ihre Komponenten durch die Übergabe verschiedener Werte anzupassen.

z.B.) In diesem Beispiel empfängt die Begrüßung-Komponente eine Name-Requisite und verwendet diese, um eine personalisierte Nachricht anzuzeigen. Requisiten sind ein Schlüsselkonzept in React und ermöglichen die Dynamik und Wiederverwendbarkeit von Komponenten.

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

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

4. Zugriff auf Listen in React

Beim Rendern von Listen in React ordnen Sie normalerweise ein Array zu und geben für jedes Element in der Liste ein Element zurück. Es ist wichtig, eine Schlüsselstütze einzufügen, um React dabei zu helfen, die Liste effizient zu aktualisieren und zu verwalten.

z. B.) In diesem Beispiel nimmt ItemList ein Array von Elementen als Requisite und erstellt für jedes Element im Array ein li-Element mit einem eindeutigen Schlüssel.

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

5.

ist eine Wrapper-Komponente, die Sie im Entwicklungsmodus verwenden können, um potenzielle Probleme in Ihrer React-Anwendung zu identifizieren. Es stellt keine sichtbare Benutzeroberfläche dar, aktiviert jedoch zusätzliche Prüfungen und Warnungen.

z. B.) Wenn Sie Ihre Anwendung (oder einen Teil davon) in einbinden, führt React einige Prüfungen durch, um sicherzustellen, dass Ihr Code den Best Practices entspricht, und hilft Ihnen, Probleme frühzeitig zu erkennen der Entwicklungsprozess.

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

6. Destrukturierung in Reaktion

Destrukturierung ist eine JavaScript-Funktion, die es Ihnen ermöglicht, Werte aus Arrays oder Eigenschaften von Objekten in verschiedene Variablen zu entpacken. In React wird es häufig in Funktionskomponenten verwendet, um Requisiten sauberer zu extrahieren.

z. B.) In diesem Beispiel verwenden wir anstelle des Zugriffs auf props.name die Destrukturierung, um den Namen direkt aus dem props-Objekt zu extrahieren, wodurch der Code sauberer und leichter lesbar wird.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

Das obige ist der detaillierte Inhalt vonDay React Essential-Training. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!