Zum Inhalt springen
Astrid

Erste Schritte mit der React-Komponente

Erste Schritte mit der React-Komponente

Im vorherigen Kapitel hast du die Create React App eingerichtet. Hier sehen wir uns die zentrale Komponente der App an. Diese findest du in der Datei src/App.js. Der Code in deiner Version der App weicht unter Umständen geringfügig von meiner Beschreibung hier im Buch ab, da die Entwickler der Create React App von Zeit zu Zeit die Struktur der Standardkomponente aktualisieren.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Sofern nicht anders angegeben, dreht sich hier alles um die Datei src/App.js. Als Erstes vereinfachen wir die Komponente, die in dieser implementiert ist. Andernfalls baust du dein Projekt mit unnötigem Boilerplate-Code auf. Hier konzentrieren wir uns auf das Wesentliche:

# start-insert
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;
# end-insert

Bemerkenswert sind drei Punkte: Zum einen ist diese React-Komponente, die als App bezeichnet wird, nichts anderes als eine JavaScript-Funktion. Sie wird allgemein Funktionskomponente genannt, da es andersartige Variationen von React-Komponenten gibt (siehe Komponententypen im Kapitel “Legacy-React”). Zweitens enthält die App keine Parameter in ihrer Funktionssignatur (siehe Eigenschaften (Props) in React). Und drittens gibt die App-Komponente Code zurück, der HTML ähnelt und JSX heißt (siehe Kapitel JSX).

Wie jede andere JavaScript-Funktion verfügt die Funktionskomponente über Implementierungsdetails --- die Umsetzung eines Algorithmus. Du wirst diese während deines gesamten Ausflugs in die React-Welt praktisch anwenden:

import React from 'react';

function App() {
# start-insert
  // Erledige eine Aufgabe (Implementierungsdetails).
# end-insert

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Wie bei allen JavaScript-Funktionen werden die im Funktionskörper festlegten Variablen bei jeder Ausführung neu definiert:

import React from 'react';

function App() {
# start-insert
  const title = 'React';
# end-insert

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Da wir für die Variable “title” nichts von der App-Komponente benötigen --- zum Beispiel Parameter der Funktionssignatur --- definieren wir sie außerhalb:

import React from 'react';

# start-insert
const title = 'React';
# end-insert

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Im nächsten Abschnitt verwenden wir diese Variable.

Übungen: