ERICA MITCHELL

Frontend developer, veteran, user advocate.

#rnforwebdevs

@duggiemitchell

Why React?

Popularity

Productivity

Declarative

@duggiemitchell

#rnforwebdevs

Just JavaScript

@duggiemitchell

#rnforwebdevs

React is a JavaScript Library for building user interfaces.

@duggiemitchell

#rnforwebdevs

React Native under the hood

@duggiemitchell

#rnforwebdevs

What is the tech stack?

React Native uses JavaScript APIs to display and style native components.

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

type Props = {
  name: string
};


const styles = StyleSheet.create({
  greeting: {
    alignItems: 'center'
  },
  names: {
    alignItems: 'center', 
    top: 50
  },
});

const Greeting: React.FunctionComponent<Props> = ({name}) => {
    return (
      <View style={styles.greeting}>
        <Text>Hello {name}!</Text>
      </View>
    );
}

const App = <Greeting name="Erica"/>

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, 
      //  so the children can't expand.
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}