React Native & Expo Mobile Engineering

Manfaatkan keahlian JavaScript & React untuk memproduksi aplikasi mobile iOS dan Android menggunakan React Native & Expo CLI.

Status Membaca:Belum Dibaca

Daftar Bab (1)

Bab 1 dari 1

Komponen Native React Native & Styling

React Native & Expo Engineering

React Native merender komponen native (seperti UIView pada iOS atau android.widget.TextView pada Android) menggunakan logika JavaScript.

Perbandingan HTML Tag vs React Native Component

HTML Tag

React Native Equivalent

|----------|-------------------------|

`<div>`

`<View>`

`<p>`, `<span>`

`<Text>`

`<img>`

`<Image>`

`<input>`

`<TextInput>`

`<button>`

`<TouchableOpacity>` / `<Pressable>`

Contoh Komponen React Native:

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default function MobileCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>CodeBook React Native</Text>
      <Text style={styles.subtitle}>Belajar aplikasi mobile lintas platform.</Text>
      <TouchableOpacity style={styles.button} activeOpacity={0.8}>
        <Text style={styles.buttonText}>Buka Materi</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', padding: 20, borderRadius: 16, elevation: 3 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#1e293b' },
  subtitle: { fontSize: 14, color: '#64748b', marginVertical: 8 },
  button: { backgroundColor: '#0284c7', padding: 12, borderRadius: 10, alignItems: 'center' },
  buttonText: { color: '#fff', fontWeight: 'bold' }
});