JavaScript-Grundlagen für React

JavaScript-Grundlagen für React

• "leere" Return Statements (MDN docs)
• destrukturierende Zuweisung (MDN docs)
• Imports und Exports
• Pfeilfunktionen
• Template-Strings

"Leere" Return Statements

funktioniert in JavaScript nicht wie gewünscht:

return
  <div>foo</div>;

dies wird interpretiert als:

return;
<div>foo</div>;

(Automatic Semicolon Insertion)

"Leere" Return Statements

Varianten, die funktionieren:

return <div>foo</div>;

return (
  <div>foo</div>
);

Destrukturierende Zuweisung

gleichzeitige Zuweisung von Inhalten von Objekten oder Arrays zu mehreren Variablen

Destrukturierende Zuweisung mit Objekten

lange Version (ohne Destrukturierung):

const protocol = window.location.protocol;
const host = window.location.host;
const pathname = window.location.pathname;

Version mit Destrukturierung:

const { protocol, host, pathname } = window.location;

Destrukturierende Zuweisung mit Arrays

const [a, b, c] = [1, 2, 3];

const [result, logs] = someLongComputation();

// swapping values of a and b
[a, b] = [b, a];

Imports und Exports

benannte Exports:

const foo = 1;
function bar() {
  return 2;
}

export { foo, bar };

oder

export const foo = 1;
export function bar() {
  return 2;
}

Imports und Exports

benannte Imports in einer anderen Datei:

import { foo, bar } from './mymodule.js';

bei Verwendung eines Bundlers wie Webpack:

import { foo, bar } from './mymodule';

Imports und Exports

Es kann einen default Export pro Modul geben:

export default function Main() {
  return <div>Main</div>;
}

oder

function Main() {
  return <div>Main</div>;
}

export default Main;

Imports und Exports

Imports (default und benannt):

import Main, { foo, bar } from 'mymodule.js';

der Default kann unter beliebigem Namen importiert werden

Pfeilfunktionen

Notation für anonyme Funktionen:

const multiply = (a, b) => {
  return a * b;
};

Kurzschreibweise, wenn die Funktion nur einen einzelnen Ausdruck zurückgibt:

const multiply = (a, b) => a * b;

Template Strings

Template Strings erlauben Interpolation (via ${})

werden mit Backticks begrenzt (`)

const message = `Hello, ${name}!`;