components.md

React ⚛️ (Single-Page-Application)

als Single-Page-Application wird eine Webanwendung bezeichnet, die aus einem einzigen HTML-Dokument besteht und deren Inhalte dynamisch nachgeladen werden.

npx create-react-app myapp

React JS ist eine JavaScript-Bibliothek, die häufig zur Entwicklung von Software verwendet wird, die Daten auf ihrer Benutzeroberfläche ständig aktualisiert.

Mit React können wir das DOM (gerendertes HTML im Browser) effektiv in JavaScript rekonstruieren und nur die tatsächlich aufgetretenen Änderungen an das DOM übertragen. React „reagiert“ also auf Änderungen im virtuellen DOM und nimmt diese Änderungen im realen DOM vor. Die Änderungen innerhalb der Komponenten können nahtlos gerendert werden, ohne die Seite neu laden zu müssen.

---

JSX

JSX ermöglicht es uns, HTML-Elemente in JavaScript zu schreiben und sie ohne die Methoden createElement() und/oder appendChild() im DOM zu platzieren. JSX wird zur Laufzeit mit Hilfe von Babel in JavaScript übersetzt.

📍 in JSX nutzen wir CamelCase, bspw. onClick anstelle dem Standart HTML onclick
📍 Namen die wir bereits in JS nutzen, können nicht in JSX benutzt werden, daher

• className anstelle von class
• oder htmlFor anstelle von for

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

---

Komponenten (components)

Vom Konzept her sind Komponenten wie JavaScript-Funktionen. Sie akzeptieren beliebige Eingaben (“props”- engl. kurz für properties) und geben React-Elemente zurück, welche beschreiben was auf dem Bildschirm angezeigt werden soll.

Woher weißt du, was eine eigene Komponente sein sollte?

Verwende einfach die gleichen Techniken, die du auch verwendest, um zu entscheiden, ob du eine neue Funktion oder ein neues Objekt anlegen möchtest. Eine dieser Techniken ist das Single Responsibility Prinzip, d.h. eine Komponente sollte idealerweise nur eine Aufgabe erledigen. Sobald sie wächst, sollte sie in kleinere Teilkomponenten zerlegt werden.

Als Faustregel gilt: Wenn ein Teil unserer Benutzeroberfläche mehrmals verwendet wird (Button, Panel, Avatar) oder für sich allein komplex genug ist (App, FeedStory, Kommentar), ist dieser ein guter Kandidat für die Extraktion in einen separaten Komponenten.

---

props

React ist eine komponentenbasierte Bibliothek, die die Benutzeroberfläche in kleine wiederverwendbare Teile aufteilt. In einigen Fällen müssen diese Komponenten miteinander kommunizieren (Daten aneinander senden). Die Möglichkeit, Daten zwischen Komponenten auszutauschen, bietet uns die Verwendung von props(properties). In React „props“ ist eine Mischung aus den beiden mentalen Modellen: HTML-Attribute (welche Elemente konfigurieren oder ihr Verhalten anpassen können) und Funktionsparameter. Eine Komponente wird wie der Aufruf einer Funktion gerenderd. Die Syntax ist HTML-ähnliche Methode zum Aufrufen dieser Funktion.

❗❗❗propskönnen nur von Eltern-zu-Kind Komponente gesendet werden.

Auf props welche wir einer anderen Komponente übergeben, können wir entweder mit object notation oder mit Destrukturierung zugreifen.

🟠 object notation

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome name="John Doe"/>
    </div>
  );
}

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

☝️oder👇

🟠 Destrukturierung

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome name="Jane Doe" />
    </div>
  );
}

function Welcome({name}) {
  return <h1>Hello, {name}</h1>;
}

export default Welcome;

---

mehr Lesematerial

👉React docs
👉thinking-in-react
👉awesome-react-components
👉Introducing JSX
👉how-react-props-relate-to-html-attributes-and-js-functions
👉react-reusable-components
👉react-props-cheatsheet
👉react-children-the-misunderstood-prop

Youtube Videos

👉Sonny Sangha-Learn how to use Props in React in 19 minutes (for beginners)

nützliche React tools 🔧🪛

👉chrome extension-react-developer-tools
👉vs-code-extension-es7