High Level Major Concepts

[reboottime]

React, React Native, and React DOM

• React is the core component system for building apps.
• React DOM allows the app to run in a web browser (DOM environment).
• React Native enables the app to run as a native mobile app (iOS, Android).

Key Differences Between React Native and React DOM

• Components and APIs used in React DOM cannot be directly used in React Native, as they target different environments.
• Event handling and basic UI components differ between React Native and React DOM.

The image below summarizes the relationship between React, React Native, and React DOM:

[reboottime]

Major components in React Native

• View: work as a container to hold content
• Text
• ScrollView vs FlatList
  • ScrollView renders all content at once (init the screen)
  • FlatList renders the visible content only and renders content gradually

• Pressable: supports detecting various stage of press event

  • sample code

    
    <Pressable onPress={onPressFunction}>
    <Text>I'm pressable!</Text>
    </Pressable>

  - to have the same UI interaction effect for IOS and Android
  
  ```ts
  <Pressable
      android_ripple={{ color: '#210644' }}
      onPress={props.onDeleteItem.bind(this, props.id)}
      style={({ pressed }) => pressed && styles.pressedItem}
    >
      <Text style={styles.goalText}>{props.text}</Text>
    </Pressable>
  

• Modal: apply modal

[reboottime]

React Navigation

short cut code sample