React Fundamentals

React is a library for building User Interfaces (UI). Its core concept is the Component.

The Mental Model

1. Everything is a Component: A button, a card, a screen, all are components.
2. UI is a Function of State: UI = f(State). You change the state, and React updates the UI.
3. One-Way Data Flow: Data flows down from Parent to Child via Props.

Real World Example: The Card Component

Located at src/ui/components/card.tsx.

// Define the "Props" (Arguments) the component accepts
export type CardProps = {
  variant?: 'elevated' | 'outlined';
  showShadow?: boolean;
  children: React.ReactNode; // Special prop for nested content
};

// The Component Function
const Card: React.FC<CardProps> = ({ 
  variant = "default", 
  showShadow = true, 
  children 
}) => {
  // Logic here (Hooks, styles, etc.)
  
  // Return JSX (The UI)
  return (
    <View style={getStyles(variant, showShadow)}>
      {children}
    </View>
  );
};

Using the Component

You use it like a custom HTML tag:

<Card variant="elevated">
  <Text>This is inside the card</Text>
</Card>

Props vs State

• Props: External data passed into the component (like function arguments). Immutable (read-only).
• State: Internal data defined inside the component. Mutable (via setters).

[!TIP] Rule of Thumb: "Keep state as high as necessary, but as low as possible." If two components need to share data, move the state up to their common parent.