Suchen Sie nach einer schnellen M?glichkeit, die Grundlagen von React zu verstehen? Fühlen Sie sich von langen Tutorials überw?ltigt? In nur 5 Minuten lernen Sie genug, um die meisten React-Codes zu lesen und zu verstehen.

Inhaltsverzeichnis

• Was ist Reagieren?
• Kernkonzepte
• Gemeinsame Muster
• Alles zusammenfügen
• Das ist es!

Was ist Reagieren?

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberfl?chen wie Schaltfl?chen oder Formularen.

Denken Sie an das Bauen mit LEGO-Bl?cken. Anstatt ein gro?es Schloss zu bauen, bauen Sie es aus kleineren, wiederverwendbaren Teilen, die miteinander verbunden werden. Mit React k?nnen Sie Webschnittstellen mithilfe wiederverwendbarer Teile namens ?Komponenten“ erstellen.

So sieht der React-Code aus:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

Diese spezielle Syntax hei?t JSX – sie erm?glicht das Schreiben von HTML-?hnlichem Code in JavaScript.

React hilft Ihnen:

• Komplexe Benutzeroberfl?chen in überschaubare Teile zerlegen
• Behandeln Sie Benutzeroberfl?chen und Daten effizient mit einem virtuellen DOM-System
• Aktualisieren Sie Webseiten automatisch, wenn sich Ihre Daten ?ndern

Kernkonzepte

1. Komponenten?

Komponenten sind wie LEGO-Bl?cke in React. Es handelt sich um wiederverwendbare UI-Teile, die Sie kombinieren k?nnen.

// A simple component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Using it
<Welcome name="Alice" />

2. Requisiten?

Requisiten sind Daten, die an Komponenten übergeben werden – wie Funktionsparameter.

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<UserCard name="Alice" age={25} />

Hinweis: Requisiten sind schreibgeschützt.

3. Staat?

Zustand sind Daten, die sich ?ndern k?nnen. Wenn es sich ?ndert, aktualisiert React die Benutzeroberfl?che automatisch.

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

Hinweis: useState(0) richtet den Status mit einem Anfangswert von 0 ein (mehr zu Hooks weiter unten).

4. Haken?

Hooks sind Funktionen, die es Komponenten erm?glichen, React-Funktionen zu verwenden. Sie beginnen immer mit ?use“.

• useState: zur Verwaltung sich ?ndernder Daten (Status)
  

  const [count, setCount] = useState(0); // Initialize count with 0
  

• useEffect: zum Ausführen von Code zu bestimmten Zeiten (z. B. API-Aufrufe)
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

Gemeinsame Muster

Bedingtes Rendern

Unterschiedliche Inhalte je nach Bedingungen anzeigen:

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1>Welcome!</h1>
   : <h1>Please log in</h1>;
}

Wenn isLoggedIn wahr ist, wird ?Willkommen!“ angezeigt, andernfalls wird ?Bitte anmelden“ angezeigt.

Verwendung:

<Greeting isLoggedIn={true} />   // "Welcome!"
<Greeting isLoggedIn={false} />  // "Please log in"

Ereignisbehandlung

Behandeln Sie Benutzerinteraktionen wie Klicks:

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

Beim Klicken wechselt der Text der Schaltfl?che zwischen ?EIN“ und ?AUS“.

Verwendung:

<ToggleButton />  // Shows: "OFF" by default

Alles zusammenfügen?

Hier ist ein echtes Beispiel mit dem, was wir gelernt haben:

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes === 0 ? '?' : '?'} {likes > 0 && likes}
    </button>
  );
}

Diese LikeButton-Komponente:

• Erh?lt die ersten ?Likes“ z?hlen als Requisiten
• Zeigt leeres Herz (?), wenn die Anzahl 0 ist
• Zeigt rosa Herz (?) mit Nummer, wenn Likes > 0
• Aktualisiert Herz und Z?hlung, wenn darauf geklickt wird

Verwendungsbeispiel:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

Das ist es! ?

Sie kennen jetzt die React-Grundlagen! Es gibt zwar noch mehr zu lernen, aber Sie k?nnen den meisten React-Code verstehen, den Sie sehen.

Bereit zum Start?

Es gibt mehrere M?glichkeiten, ein React-Projekt zu erstellen:

• Next.js: Full-Stack-React-Framework, empfohlen für die meisten neuen Projekte
• Gatsby: React-Framework für schnelle CMS-gestützte Websites
• Vite: Modernes und schnelles Build-Tool, ideal zum Erlernen von React und zum Erstellen von Single-Page-Anwendungen

Details finden Sie hier.

Viel Spa? beim Codieren?

Das obige ist der detaillierte Inhalt vonReact in Ins verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!