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 mit Großbuchstaben benannt.

Beispiel einer Funktionskomponente

function Heading(props) { return 
Join us, {props.name}!
; }

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

This is H1!

3.Fragmente

Fragments in React ermöglichen es Ihnen, mehrere Elemente aus einer Komponente zurückzugeben. 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 ( <> 
Eat
 Learn more 
Code is Fun
 Repeat  ); }

Hinweis:

• Fragmente machen den Code sauberer und lesbarer.
• Es ist speichereffizient.
• Es können keine CSS-Stile und -Schlüssel vorhanden sein.

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 
{props.children}
; }

Hinweis: Props ist schreibgeschützt, was sicherstellt, 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 state.

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

Beispiel für die Definition des Zustands

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

Lifecycle-Methoden 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 dieselbe Ausgabe für dieselbe Eingabe zurückgibt (z. B. Requisiten)

8.Strenger 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 ( <>  
   

9.Haken

Hooks in React ermöglichen die Verwendung von Status- und anderen React-Funktionen, ohne Klassenkomponenten schreiben zu müssen. 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 ( <> 
My favorite color is {color}!
  setColor("blue")} // Updating the state; >Blue  setColor("red")} // Updating the state; >Red  setColor("yellow")} // Updating the state; >Yellow  ); }

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 avoidsprop drillingby 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 (  
{`Current Count: ${count}!`}
   ); }

Use useContext hook to access the value of age.

import { useContext } from "react"; function GrandChildConsumer() { const age = useContext(UserContext); return ( <> 
This is GrandChildConsumer
 
{`Current Count: ${count}`}
  ); }

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 ( 
 {fruits.map((fruit, index) => ( 
 {fruit} 
 ))} 
 ); }

• 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 ( 
 Name:   
Your name is: {name}
 
 ); }

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 ( 
 Name:   Get Name 
 ); }

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 (   } /> } /> } /> } />   ); }

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!