b belajar.myudak

React & React Native

Dari berkas .tsx sampai piksel di layar HP

Tulis komponen, lalu lihat hasilnya di jendela browser, iPhone, atau HP lipat, dalam 2D atau 3D. Di bawah pratinjau, buka kapnya: pohon komponen yang sedang hidup, props dan state tiap komponen, kapan dan mengapa ia dirender ulang, kotak layout setiap elemen, dan bagaimana berkas-berkasmu saling mengimpor. Semua berjalan di browser kamu, tanpa instalasi.

Main bebas

React untuk web

Proyek ala Vite: main.tsx, App.tsx, komponen, dan CSS. Ubah lebar jendela dan lihat layout-nya menyesuaikan.

Main bebas

React Native + Expo Router

Tab, stack, dan layar detail dari folder app/. Jalankan di iPhone atau HP lipat, putar modelnya dalam 3D.

Apa yang terjadi saat kamu mengetik

Setiap perubahan melewati langkah ini. Playground menampilkan setiap langkahnya.

  1. 1 Berkas main.tsx, App.tsx, components/, app/ · import dan export
  2. 2 Kompilasi JSX dan TypeScript → JavaScript biasa (_jsx(tipe, props))
  3. 3 Komponen fungsi yang menerima props dan mengembalikan tampilan
  4. 4 State & render useState berubah → React memanggil komponen lagi → layar diperbarui
  5. 5 Layout kotak, margin, padding, flexbox · CSS di web, StyleSheet di HP
  6. 6 Perangkat lebar browser, notch iPhone, layar lipat yang berubah ukuran

Pelajaran

0/8 misi selesai
  1. 1WebJSX, komponen, dan propsKomponen adalah fungsi yang mengembalikan tampilan. Props adalah datanya. Lihat juga bagaimana berkas-berkas proyek saling mengimpor.JSXkomponenpropsimport/export
  2. 2WebState dan bindingKenapa variabel biasa tidak mengubah layar, apa itu useState, dan bagaimana input terikat ke state (controlled input).useStateeventrender ulangcontrolled input
  3. 3WebDaftar dan keyMenampilkan array dengan map, menambah dan menghapus item lewat state, dan kenapa setiap baris butuh key yang stabil.mapkeyarray di stateform
  4. 4WebLayout web: flexbox dan layar sempitSetiap elemen adalah kotak. Atur kotak-kotak berjajar dengan flexbox, lalu buat tata letaknya menyesuaikan lebar layar.box modelflexboxmedia queryresponsif
  5. 5React NativeDari web ke React NativeKomponennya sama-sama React, tapi bahan bangunannya lain: View, Text, Pressable, dan StyleSheet sebagai pengganti HTML dan CSS.ViewTextPressableStyleSheet
  6. 6React NativeLayout di iPhone: area aman, flex, dan FlatListDynamic Island dan garis home memakan layar. Belajar SafeAreaView, flexbox ala React Native (default kolom), dan FlatList untuk daftar panjang.SafeAreaViewflexDirectionflex: 1FlatList
  7. 7React NativeLayar lipat: tata letak yang mengikuti ukuranHP lipat berganti ukuran layar saat dibuka. Dengan useWindowDimensions, aplikasi beralih dari satu kolom ke dua kolom.useWindowDimensionsresponsiffoldable3D
  8. 8React NativeBerkas adalah navigasi: Expo RouterDengan Expo Router, setiap berkas di folder app/ menjadi satu layar. _layout menentukan cara layar ditumpuk, [id] menjadi parameter URL.Expo RouterStackLinkparameter rute

Pratinjau React Native memakai react-native-web (MIT), sedangkan Expo Router dibuat ulang dalam versi kecil untuk belajar. Model 3D adalah desain konsep buatan penggemar oleh extraakash di Sketchfab, bukan produk resmi Apple.