React Library – Konzepte

React ist eine JavaScript Bibliothek zur Erstellung moderner User Interfaces im Web.

Die deklarative Bibliothek von Facebook, ermöglicht dem Entwickler mit dem React eigenen “Virtual Dom” zu arbeiten. Dabei wird JavaScript um HTML Elemente erweitert.

React ermöglicht es, Webanwendungen und mittels React Native, auch mobile Anwendungen zu schreiben.

Die grundlegenden Konzepte von React sind die folgenden:

1. Components

• Wie functions in JavaScript
• Input: props, state
• Output: UI
• Wiederverwendbar – Lego Baukasten
• <Component />
• Kann den private state verwalten

2. Reactive Updates

• React reagiert
• Bringt die Updates in den Browser

3. Virtual Views in Memory

• Generiert HTML mittels JavaScript
• Keine HTML Template
• Virtueller Dom

Die 2 Arten von React Components

• Function Components

// Function Component
const DemoComponent = (props) => {
    return (
        <domElOrComponent .../>
    );
}

• Class Components

class DemoComponent extends React.Component {
    render () {
        return (
            <domElOrComponent ... />
        );
    }
}

React Components werden in JSX Dateien geschrieben – diese JSX Dateien sind aber kein HTML:

class Demo extends React.Component {
    render () {
        return (
            <div className="container">
                <h1>Hello World!</h1>
            </div>
        );
    }
}

ReactDOM.render(<Demo />, demo);