Skip to main content

Typescript

Tuttorial

Link zum Tutorial:
https://reactjs.de/artikel/react-tutorial-deutsch/

Online-Editor

Link zum Online-editor:
https://codesandbox.io/s/

Anbindung

HTML

Die index.html Datei enthält ein div mit der id root. Später ist das der gesamte HTML-Code der React App.

<div id = "root">

React TypeScript

Zugriff auf das Element mit der id root im Beispiel über src/index.tsx:

const rootElement = document.getElementById("root");

React-Elemente und JSX

h1, div etc. sind bei React TypeScript React-Elemente. Jedes React-Element ist ein JavaScript Objekt, das ein bestimmtes HTML Element, wie es im DOM erscheint beschreibt. Aus:

const Title = <h1>Hello world.</h1>;

wird von React die JSX Syntax eine Funktion namens _jsx aufgerufen.

const Title = _jsx("h1", { children: "Hello world."});

React Komponente

Eine Funktion, die ein React-Element zurück gibt, ist eine React Komponente. Bei Komponenten handelt es sich in React um wiederverwendbare Bausteine eines User-Interfaces.
Das HTML-Gerüst kann in React direkt in JavaScript geschrieben werden. Aus:

<div class="App">
<h1>React Tutorial</h1>
<h2>Ein Untertitel</h2>
</div>

wird:

const App = () => (
<div ClassName="App">
<h1>React Tutorial</h1>
<h1>Ein Untertitel</h2>
</div>
);

React Props

React properties (props) sind vergleichbar mit HTML Attributen. Eine prop wird einem React-Element oder einer React Komponente übergeben, in dem es in den öffnenden Tag gesetzt wird.

Code

App.tsx

import "./styles.css";

const LoadingText = () =>{
const isLoading = false;
return <div>{isLoading ? <p>Loading ...</p> : <h2>Fertig geladen</h2>}</div>;
}

export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Time now: {new Date().toISOString()}</h2>
<LoadingText />
</div>
);
}