11:40 - Zitat als Komponente

App.js

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';

import Quote from './js/components/Quote';

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'
  },
  {
    text:
      'Man braucht nichts im Leben zu fürchten, man muss nur alles verstehen.',
    author: 'Marie Curie'
  },
  { text: 'Nichts ist so beständig wie der Wandel.', author: 'Heraklit' }
];

export default class App extends Component {
  state = { index: 0 }; // initialer Zustand

  // render wird jedes Mal ausgeführt, wenn
  // 1) die Komponente zum ersten Mal im UI erscheint
  // 2) sich der Zustand (state) ändert (this.setState())
  // 3) props TODO
  // return JSX code ---> Darstellung der Komponente im UI
  render() {
    let index = this.state.index; // aktueller Zustand
    const quote = data[index];
    let nextIndex = index + 1;
    if (nextIndex === data.length) nextIndex = 0;
    return (
      // JSX
      <View style={styles.container}>
        <Quote text={quote.text} author={quote.author} />
        <Button
          title="Nächstes Zitat"
          onPress={() => this.setState({ index: nextIndex })}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Quote.js

import React, { Component, Fragment } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Quote extends Component {
  render() {
    return (
      <Fragment>
        <Text>{this.props.text}</Text>
        <Text>-- {this.props.author}</Text>
      </Fragment>
    );
  }
}