React in Ins verstehen

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!