Jedes Reaktionskonzept wird in wenigen Minuten erklärt

React ist eine JavaScript-Bibliothek, mit der Sie in wenigen Minuten Front-End-Code entwickeln können. Es verfügt über vorgefertigte Methoden und Funktionen zur Ausführung bestimmter Aufgaben. React als Bibliothek enthält komplexe Begriffe wie Versöhnung, Zustand, Requisiten usw. Was bedeuten sie eigentlich?

In diesem Artikel erfahren Sie mehr über dieses übertriebene Konzept.

1. Komponenten

Komponenten sind kleine Teile wiederverwendbaren Codes, die ein React-Element zurückgeben, das auf einer Webseite gerendert werden soll. Dabei handelt es sich um eine Codegruppe, die einen einzelnen Teil der Webseite ausmacht, z. B. Schaltflächen, Navigationsleiste, Karten usw. Sie ähnelt einer JavaScript-Funktion, gibt jedoch ein gerendertes Element zurück. Es akzeptiert Parameter namens "Props". Komponenten werden in Großbuchstaben benannt.

Beispiel einer Funktionskomponente

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

Hinweis:

• Funktionskomponenten werden statt klassenbasiert empfohlen.
• Funktionskomponenten werden oft als zustandslose Komponenten bezeichnet.

2. JSX

JSX ist JavaScript XML, das es uns ermöglicht, HTML in React zu schreiben. Es führt XML-ähnliche Tags und Attribute ein, um React-Elemente zu erstellen. Es erleichtert das Erstellen von React-Komponenten, indem Sie HTML-ähnlichen Code in .jsx-Dateien schreiben können. Anstatt kompliziertes JavaScript zu verwenden, macht JSX den Code lesbar und sauber. React DOM verwendet camelCase für die Benennung von Attributen wie htmlFor, onClick.

Beispiel für JSX

<h1 className="head">This is H1!</h1>

3. Fragmente

Mit Fragmenten in React können Sie mehrere Elemente aus einer Komponente zurückgeben. Es gruppiert die Liste der Elemente, ohne zusätzliche DOM-Knoten zu erstellen. Es bereinigt alle zusätzlichen Divs aus dem DOM. Dadurch wird die Benutzeroberfläche schnell gerendert.

Beispiel für Fragmente

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

Hinweis:

• Fragmente machen den Code sauberer und lesbarer.
• Es ist speichereffizient.
• Es kann keine CSS-Stile und -Schlüssel haben.

4. Requisiten

„Props“ ist ein spezielles Schlüsselwort in React, das für Eigenschaften steht. Es dient der Datenübertragung zwischen Komponenten. Die Datenübertragung erfolgt unidirektional, d. h. von der übergeordneten Komponente zur untergeordneten Komponente.

Beispiel für Requisiten

function Head(props) {
  return <p>{props.children}</p>;
}

Hinweis: Props ist schreibgeschützt, wodurch sichergestellt wird, dass untergeordnete Komponenten den von der übergeordneten Komponente kommenden Wert nicht manipulieren.

5. Staat

Komponenten müssen bestimmte Werte verfolgen, wenn der Benutzer interagiert. Nehmen wir an, die Umschalttaste für den Hell-/Dunkelmodus ändert ihren Wert (von hell zu dunkel und umgekehrt), wenn ein Benutzer auf die Schaltfläche klickt. Komponenten müssen sich den aktuellen Wert des Themas merken. In React wird diese Art von komponentenspezifischem Speicher als Zustand bezeichnet.

State wird mit einem useState()-Hook definiert; mehr dazu später.

Beispiel für die Statusdefinition

const [index, setIndex] = useState(0)

Hinweis: Es empfiehlt sich immer, den Status in einer Komponente der obersten Ebene zu definieren, um ihn problemlos mit anderen untergeordneten Komponenten zu teilen und eine einzige Quelle der Wahrheit sicherzustellen.

6. Lebenszyklusmethoden

Lebenszyklusmethoden sind spezielle Funktionen, die Sie innerhalb von React-Klassen verwenden können, um Aktionen in verschiedenen Phasen der Existenz einer Komponente auszuführen. Diese Phasen sind:

• Montage: Wenn eine Komponente zum ersten Mal erstellt und in das DOM eingefügt wird.
• Aktualisierung: Wenn sich die Requisiten oder der Status einer Komponente ändern, wird die Komponente neu gerendert.
• Unmounten: Wenn eine Komponente aus dem DOM entfernt wird.

7. Reinheit

Reinheit in der funktionalen Programmierung ist, wenn eine gegebene gleiche Eingabe die gleiche Ausgabe zurückgibt. Die Eingaben sind der einzige Faktor, der die Ausgabe bestimmt, dann wird die Funktion als rein bezeichnet.

In React gilt eine Komponente als rein, wenn sie die gleiche Ausgabe für die gleiche Eingabe zurückgibt (z. B. Requisiten)

8. Strikter Modus

Der strenge Modus ist eine Entwicklungsfunktion in React, die zusätzliche Sicherheitsfunktionen zur Verbesserung der Codequalität ermöglicht. Es zeigt Warnungen vor möglichen Fehlern und Bugs im Code an. Es protokolliert eine Warnung in der Konsole des Browsers.

Beispiel für den strengen Modus

import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

Strenger Modus in der React Showing Browser Console

9. Haken

Hooks in React ermöglichen die Verwendung von Status- und anderen React-Funktionen, ohne Klassenkomponenten zu schreiben. Hooks sind Funktionen, die Zugriff auf die Statusverwaltung, Nebenwirkungen und andere Funktionen von React ermöglichen.

Einige häufig verwendete Hooks: useState, useMemo, useRef usw.

Beispiel für Haken

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

Hinweis:

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional.

10. Context API

The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoids prop drilling by simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.

The useContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.

The useContext hook is used to access the data.

Example of Context API

Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

Use useContext hook to access the value of age.

import { useContext } from "react";

function GrandChildConsumer() {
  const age = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

Note: The `useContext` hook is often used instead of Consumer for better readability and simplicity.

11. Lists and Keys

A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.

Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.

Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.

Example of Lists and Keys

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

Note:

• It is recommended to use string as a `Key` that uniquely identifies the item in the list.
• Third-party libraries like UUID offer the functionality to create unique keys.

12. Form: Controlled & Uncontrolled Components

React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:

Controlled Components

In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.

Example of Controlled Component

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.

Example of Uncontrolled Component

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

Note:

• Controlled components provides form validation because the user's input is instantly reflected due to use of state.
• Form validation is not possible in uncontrolled components because the user's input can only be accessed after the form is submitted.

13. React Router

• Introduction to React Router for navigation
• Basic setup and usage
• Example: Creating routes and navigating between pages

React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.

First, you need to install React Router from your terminal.

Installing React Router

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

Example of React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

First wrap your content into the . Then we define and inside that introduces the for navigation. has path which specifies URL of the page and element attribute which specifies the component that needs to be rendered on the defined path.

Note:

• Eine App kann mehrere < Routen >.
• < Route > kann verschachtelt werden.
• `react-router-dom` hat auch < Link > und < Auslass > Komponente für die Navigation.

Abschluss

Der beste Weg, eine Programmiersprache zu lernen, besteht darin, mehr Projekte zu üben. Erstellen Sie kleine Projekte und experimentieren Sie mit den Konzepten.

Wenn Sie diesen Beitrag hilfreich finden, vergessen Sie nicht, mir weiterhin Liebe zu zeigen. Bis zum nächsten Mal liken, teilen und lernen.

Sie können auch mit mir in Verbindung bleiben, indem Sie mir hier und auf X, GitHub und LinkedIn folgen.

Das obige ist der detaillierte Inhalt vonJedes Reaktionskonzept wird in wenigen Minuten erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!