JSX & Components Basics

Apa itu JSX?

JSX adalah syntax extension untuk JavaScript yang memungkinkan kita menulis UI syntax yang mirip HTML/XML dalam JavaScript code.

jsx
const greeting = <Text>Hello, World!</Text>;

Functional Components

Functional components adalah JavaScript functions yang return JSX elements.

jsx
function MyComponent() {
  return <View><Text>Hello</Text></View>;
}

Built-in Components

• View: Container untuk layout (seperti div)
• Text: Display text
• ScrollView: Scrollable container
• Image: Display images
• TextInput: Input text dari user
• Button: Interactive button

Props (Component Properties)

Props adalah cara pass data dari parent ke child component.

jsx
function Greeting(props) {
  return <Text>Hello, {props.name}!</Text>;
}

Conditional Rendering

Render berbagai UI berdasarkan kondisi.

jsx
function Status({ isLoggedIn }) {
  return isLoggedIn ? <Text>Welcome</Text> : <Text>Please login</Text>;
}

Component Composition

Combine components kecil untuk membuat UI kompleks.