React Native Workshop CAS 30.11.2018

workshop20181130.md

Workshop zu React Native am CAS am 30.11.2018

Hier sind die relevanten Änderungen der einzelnen Schritte zu sehen.

10:05: neues Snack-Projekt

App.js

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
      </View>
    );
  }
}

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

10:23 rotes Quadrat

App.js

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redSquare} />
        {/* Übung: gelbes oder oranges Quadrat einfügen */}
      </View>
    );
  }
}

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

10:30: rotes Quadrat und orangener Kreis

App.js

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redSquare} />
        <View style={styles.orangeCircle} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  redSquare: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
  orangeCircle: {
    width: 100,
    height: 100,
    borderRadius: 100 / 2,
    backgroundColor: 'orange'
  }
});

11:20 Quadrat und Kreis als Komponenten

App.js

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

import Square from './js/components/Square';
import Circle from './js/components/Circle';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Square />
        <Circle />
      </View>
    );
  }
}

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

js/components/Circle.js

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

export default class Circle extends Component {
  render() {
    return <View style={styles.circle} />;
  }
}

const styles = StyleSheet.create({
  circle: {
    width: 100,
    height: 100,
    borderRadius: 100 / 2,
    backgroundColor: 'orange',
  },
});

js/components/Square.js

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

export default class Square extends Component {
  render() {
    return <View style={styles.square} />;
  }
}

const styles = StyleSheet.create({
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});