Hello World Basics

  • Start new project
  • Examine structure
  • Create first component
  • Pass props

Preview

React Native Core Components

  • View
  • ScrollView
  • Text
  • TextInput
  • Image
  • TouchableOpacity

React Native vs HTML

HTML React Native
<div> <View>
<p> <Text>
<input /> <TextInput />
<button> <TouchableOpacity />

Basic React Native Concepts

class MyComponent extends React.Component {
  render() {
    return (
     <Text>Hello World</Text>
    )
  }
}

class (stateful) 

const MyComponent = () => (
  <Text>Hello World</Text>
)
<MyComponent />

functional (stateless)

vs

Components ➡ React elements - what should appear on the screen.

Styling

Styles can be created one of three ways:

  • inline
  • object  
  • StyleSheet declaration

Styling

inline styles 

<Text style={{color: "red"}}>Hello World</Text>

<View style={{width: 300}}>

Styling

style object

const styles = {
  text: {
    color: "red"
  }
}

<Text style={styles.text}>Hello World</Text>

Styling

StyleSheet
import { StyleSheet, View, Text } from "react-native"

const styles = StyleSheet.create({
  container: {
    width: 300,
    height: 130
  },
  text: {
    color: "red"
  }
})

<View style={styles.container}>
  <Text style={styles.text}>Hello World</Text>
</View>

StyleSheet.create({...})

code

Hello World Basics

  • Get app running

 

  • Examine structure

 

  • Create functional component

 

  • Pass props

Re-cap