Jika pada bab sebelumnya Authemers sudah berhasil menginstall React dan menjalankan proyek pertama, sekarang kita akan masuk ke konsep yang menjadi ciri khas utama React: JSX.
Banyak developer pemula yang baru belajar React biasanya berhenti sejenak ketika melihat kode React untuk pertama kalinya. Bukan karena React terlalu sulit, tetapi karena sintaksnya terlihat tidak biasa. React terlihat seperti mencampurkan HTML dan JavaScript dalam satu file.
Padahal jika dipahami dengan benar, pendekatan ini justru membuat proses membangun antarmuka aplikasi menjadi jauh lebih mudah.
📚 Baca Juga
Namun sebelum masuk lebih jauh, penting juga memastikan Authemers sudah memahami fondasi dasar web development. Jika masih baru dalam dunia web, ada baiknya terlebih dahulu memahami konsep dasar seperti HTML dan CSS. Authemic sudah membahas dasar tersebut dalam beberapa artikel seperti:
Memahami HTML sangat penting karena JSX sebenarnya memiliki struktur yang sangat mirip dengan HTML. Jika Authemers belum familiar dengan struktur tag HTML, artikel tentang anatomi tag HTML juga sangat membantu untuk memahami bagaimana sebuah halaman web disusun.
Setelah memahami fondasi tersebut, barulah kita bisa melihat bagaimana React membawa konsep tersebut ke level yang lebih modern.
Apa Itu JSX?
JSX adalah singkatan dari JavaScript XML.
JSX adalah sintaks yang memungkinkan developer menulis kode yang terlihat seperti HTML langsung di dalam JavaScript. Walaupun terlihat seperti HTML, sebenarnya JSX hanyalah cara yang lebih mudah untuk mendeskripsikan tampilan antarmuka aplikasi.
React nantinya akan menerjemahkan JSX menjadi fungsi JavaScript biasa yang disebut React.createElement.
Sebagai contoh, kode JSX berikut:
<h1>Hello Authemers</h1>Sebenarnya akan diterjemahkan oleh React menjadi sesuatu seperti ini:
React.createElement("h1", null, "Hello Authemers")Namun tentu saja menulis kode seperti itu setiap saat akan sangat merepotkan. Karena itulah JSX dibuat agar developer bisa menulis struktur UI dengan cara yang jauh lebih mudah dibaca.
JSX dan Hubungannya dengan HTML
Jika Authemers sudah membaca seri HTML di Authemic, mungkin kalian sudah memahami bagaimana sebuah halaman web dibangun menggunakan tag seperti:
<h1>
<p>
<div>
<img>Struktur dasar halaman web biasanya dimulai dengan boilerplate HTML yang menjelaskan struktur dasar dokumen. Jika belum familiar dengan konsep ini, Authemic juga memiliki panduan lengkap mengenai struktur dasar HTML di artikel yang berjudul “Boilerplate HTML dan Elemen Head“.
Dalam React, kita tidak lagi menulis seluruh dokumen HTML secara manual seperti itu. Sebaliknya, React akan mengelola tampilan halaman melalui komponen.
Namun JSX tetap menggunakan konsep yang sangat mirip dengan HTML.
Sebagai contoh:
function App(){
return (
<div>
<h1>Belajar React</h1>
<p>Halo Authemers</p>
</div>
)
}Kode tersebut terlihat seperti HTML, tetapi sebenarnya adalah JSX yang ditulis di dalam JavaScript.
Mengapa React Menggunakan JSX?
Banyak developer awalnya mempertanyakan mengapa React memilih pendekatan ini.
Dalam pengembangan web tradisional, HTML, CSS, dan JavaScript biasanya dipisahkan ke dalam file yang berbeda.
Namun dalam aplikasi modern, tampilan dan logika sering kali saling berkaitan.
Sebagai contoh, sebuah tombol mungkin:
- berubah warna saat diklik
- menampilkan pesan tertentu
- menampilkan data dari API
Semua hal ini membutuhkan kombinasi antara struktur tampilan dan logika JavaScript.
Dengan JSX, React memungkinkan developer menulis tampilan dan logika dalam satu tempat yang sama.
Pendekatan ini membuat kode menjadi lebih mudah dipahami dan lebih mudah dipelihara ketika aplikasi berkembang menjadi lebih besar.
Menggunakan Variabel JavaScript di JSX
Salah satu kemampuan yang membuat JSX terasa sangat kuat adalah kemampuannya untuk menggunakan variabel JavaScript secara langsung di dalam tampilan. Jika sebelumnya Authemers terbiasa menulis HTML yang bersifat statis, React membawa pendekatan baru di mana tampilan halaman bisa berubah secara dinamis berdasarkan data yang ada di dalam aplikasi.
Di sinilah peran variabel JavaScript menjadi sangat penting.
Sebagai pengingat, dalam pengembangan web tradisional kita biasanya memisahkan HTML dan JavaScript. HTML bertugas menampilkan struktur halaman, sedangkan JavaScript digunakan untuk mengatur logika di belakangnya. Namun ketika aplikasi web semakin kompleks, pendekatan ini sering membuat kode menjadi terpisah-pisah dan sulit dipelihara.
Melalui JSX, React menggabungkan keduanya dalam satu tempat yang sama. Artinya kita bisa menulis struktur tampilan sekaligus menyisipkan data dari JavaScript secara langsung ke dalam elemen yang akan ditampilkan di browser.
Untuk memahami konsep ini, mari kita lihat contoh sederhana berikut.
function App(){
const nama = "Authemers"
return (
<h1>Halo {nama}</h1>
)
}Pada kode di atas, terdapat sebuah variabel JavaScript bernama nama yang berisi string "Authemers". Variabel ini kemudian digunakan di dalam JSX untuk menampilkan teks pada elemen <h1>.
Ketika aplikasi React dijalankan, browser akan menampilkan hasil berikut:
Halo AuthemersReact mengambil nilai dari variabel nama dan menyisipkannya langsung ke dalam tampilan. Cara ini membuat tampilan menjadi lebih fleksibel karena konten yang ditampilkan tidak lagi harus ditulis secara statis di dalam HTML.
Perhatikan juga penggunaan tanda kurung kurawal {} pada bagian {nama}. Dalam JSX, tanda ini memiliki fungsi khusus, yaitu untuk menandai bahwa kita ingin menjalankan ekspresi JavaScript di dalam elemen JSX.
Dengan kata lain, setiap kode JavaScript yang berada di dalam {} akan dievaluasi terlebih dahulu sebelum hasilnya ditampilkan di halaman.
Sebagai contoh lain, kita bisa menggunakan variabel yang berbeda seperti berikut.
function App(){
const website = "Authemic Labs"
return (
<p>Selamat datang di {website}</p>
)
}Jika kode ini dijalankan, React akan menampilkan teks:
Selamat datang di Authemic LabsPendekatan ini mungkin terlihat sederhana, tetapi sebenarnya merupakan fondasi penting dalam membangun aplikasi React yang dinamis. Dalam aplikasi nyata, variabel yang digunakan tidak hanya berupa teks sederhana seperti contoh di atas, tetapi bisa berasal dari berbagai sumber data, misalnya:
- hasil input pengguna
- data dari database
- respons dari API
- atau state yang berubah ketika pengguna berinteraksi dengan aplikasi
Sebagai ilustrasi, bayangkan kita membuat sebuah aplikasi yang menampilkan nama pengguna yang sedang login. Dengan JSX, kita bisa menampilkan nama tersebut langsung di dalam tampilan tanpa perlu memanipulasi DOM secara manual.
Contohnya seperti ini:
function App(){
const user = "Mas Hedi"
return (
<h2>Selamat datang kembali, {user}</h2>
)
}Ketika React merender komponen tersebut, hasil yang ditampilkan di browser akan menjadi:
Selamat datang kembali, Mas HediPendekatan ini jauh lebih sederhana dibandingkan cara lama yang mengharuskan developer mencari elemen HTML tertentu lalu mengubah isinya menggunakan JavaScript biasa.
Selain menampilkan variabel, JSX juga memungkinkan kita menjalankan ekspresi JavaScript yang lebih kompleks di dalam {}. Misalnya operasi matematika sederhana:
function App(){
const angka = 5
return (
<p>Hasil perhitungan: {angka + 10}</p>
)
}
React akan menghitung ekspresi tersebut terlebih dahulu sebelum menampilkannya di halaman.
Hasilnya akan terlihat seperti ini:
Hasil perhitungan: 15Dari contoh ini kita bisa melihat bahwa JSX tidak hanya mampu menampilkan variabel, tetapi juga mampu menjalankan logika JavaScript sederhana secara langsung dalam struktur tampilan.
Kemampuan ini menjadi sangat penting ketika kita mulai membangun aplikasi yang lebih kompleks. Misalnya saat menampilkan data dari API, menghitung nilai tertentu, atau menampilkan kondisi tertentu berdasarkan status aplikasi.
Namun ada satu hal penting yang perlu diingat: di dalam {} kita hanya bisa menuliskan ekspresi JavaScript, bukan statement lengkap seperti if, for, atau while. Struktur kontrol seperti itu biasanya ditangani dengan cara lain yang akan kita bahas pada bab-bab berikutnya.
Bagi Authemers yang baru pertama kali melihat JSX, konsep ini mungkin terasa sedikit berbeda dari cara penulisan HTML tradisional. Namun setelah terbiasa, menggunakan variabel JavaScript di dalam JSX akan terasa sangat alami dan bahkan mempercepat proses development.
Pada dasarnya, pendekatan ini membuat React mampu menampilkan antarmuka yang benar-benar dinamis, di mana tampilan halaman dapat berubah secara otomatis mengikuti data yang ada di dalam aplikasi.
JSX dan Struktur UI Modern
Dalam pengembangan website modern, JSX memungkinkan developer membangun struktur tampilan yang kompleks dengan cara yang jauh lebih terorganisir dibandingkan pendekatan tradisional. Jika sebelumnya developer harus memisahkan antara file HTML dan JavaScript, maka dalam React keduanya bisa digabungkan secara langsung di dalam satu komponen menggunakan JSX.
Pendekatan ini membuat proses pengembangan antarmuka menjadi lebih efisien. Developer tidak lagi perlu berpindah-pindah antara file berbeda hanya untuk menampilkan data atau mengubah struktur tampilan. Semua logika dan struktur UI dapat ditulis dalam satu tempat yang jelas.
Jika Authemers pernah mempelajari dasar-dasar HTML sebelumnya melalui panduan seperti Tutorial HTML Untuk Pemula atau memahami konsep dasarnya pada Pengertian HTML maka JSX akan terasa cukup familiar. Hal ini karena JSX memang dirancang agar terlihat seperti HTML.
Sebagai contoh sederhana, kita bisa membuat struktur halaman seperti berikut:
function App(){
return (
<div>
<h1>Belajar React di Authemic</h1>
<p>React membantu kita membangun UI yang dinamis.</p>
</div>
)
}Struktur di atas terlihat seperti HTML biasa, tetapi sebenarnya itu adalah JSX yang nantinya akan diproses oleh React sebelum ditampilkan di browser.
Jika Authemers sudah mempelajari bagaimana struktur dasar HTML bekerja, misalnya pada pembahasan mengenai anatomi tag HTML atau memahami bagaimana struktur awal halaman dibuat melalui Boilerplate HTML maka memahami JSX biasanya tidak membutuhkan waktu lama.
Perbedaannya hanya terletak pada cara React memproses kode tersebut. JSX tidak langsung dijalankan oleh browser seperti HTML biasa. Sebaliknya, JSX akan diubah terlebih dahulu menjadi JavaScript oleh sistem build React sebelum akhirnya dirender ke dalam DOM.
Karena itu, developer dapat memanfaatkan seluruh kekuatan JavaScript ketika membangun tampilan aplikasi.
Sebagai contoh lain, kita dapat membuat struktur UI yang sedikit lebih kompleks:
function App(){
const namaWebsite = "Authemic"
return (
<div>
<h1>Selamat datang di {namaWebsite}</h1>
<p>Tempat belajar coding modern.</p>
<section>
<h2>Materi Populer</h2>
<ul>
<li>HTML Dasar</li>
<li>CSS Fundamental</li>
<li>React JS</li>
</ul>
</section>
</div>
)
}Pada contoh di atas, kita sudah mulai membangun struktur UI yang lebih terorganisir. Komponen React dapat berisi berbagai elemen seperti heading, paragraf, list, hingga section layout.
Inilah salah satu alasan mengapa React sering digunakan untuk membangun Single Page Application (SPA) dan aplikasi web modern yang memiliki antarmuka kompleks.
Namun tampilan struktur saja tentu tidak cukup. Agar halaman terlihat menarik secara visual, kita tetap membutuhkan CSS untuk mengatur warna, ukuran teks, layout, hingga animasi.
Jika Authemers ingin memahami lebih dalam tentang bagaimana CSS bekerja dalam proyek website, Authemic juga memiliki beberapa panduan lengkap yang bisa dipelajari, seperti:
- Apa itu CSS dalam Pengembangan Website
- 50 Properti CSS yang paling sering digunakan, dan
- Cara penggunaan CSS dalam Desain Website
Melalui panduan tersebut, Authemers dapat memahami berbagai properti CSS yang sering digunakan dalam pengembangan website modern.
Pengetahuan tentang CSS tetap sangat penting bahkan ketika kita menggunakan React. Hal ini karena React berfokus pada pengelolaan tampilan dan interaksi UI, sementara CSS bertanggung jawab terhadap penampilan visual halaman.
Sebagai contoh sederhana, kita bisa menambahkan styling ke dalam komponen React:
function App(){
return (
<div className="container">
<h1>Belajar React</h1>
<p>React membuat UI lebih dinamis.</p>
</div>
)
}Pada contoh ini kita menggunakan atribut className untuk menghubungkan elemen JSX dengan class CSS tertentu. React menggunakan className sebagai pengganti atribut class yang biasa digunakan di HTML.
Dengan cara ini, developer dapat tetap menggunakan CSS seperti biasa untuk mengatur tampilan halaman.
Kombinasi antara JSX untuk struktur UI dan CSS untuk desain visual adalah fondasi penting dalam pengembangan frontend modern. JSX mempermudah kita membangun struktur komponen yang modular, sedangkan CSS memastikan tampilan aplikasi tetap menarik dan responsif di berbagai perangkat.
Setelah memahami bagaimana JSX digunakan untuk membangun struktur UI modern, pada bagian berikutnya kita akan mulai membahas konsep yang menjadi inti dari React itu sendiri, yaitu komponen (components). Dari sinilah React benar-benar menunjukkan kekuatannya dalam membangun aplikasi web yang scalable dan mudah dikelola.
Aturan Penting dalam JSX
Walaupun JSX terlihat sangat mirip dengan HTML, sebenarnya JSX memiliki beberapa aturan khusus yang perlu diperhatikan. Hal ini karena JSX pada dasarnya adalah ekstensi sintaks JavaScript, bukan HTML murni.
Artinya, walaupun bentuknya seperti markup HTML, JSX tetap mengikuti aturan JavaScript saat diproses oleh React. Jika aturan-aturan ini tidak diikuti, biasanya React akan menampilkan error ketika kode dijalankan.
Memahami aturan dasar JSX sejak awal akan membantu Authemers menulis kode React yang lebih rapi, mudah dibaca, dan tentunya bebas dari error yang tidak perlu.
Berikut beberapa aturan penting dalam JSX yang perlu diperhatikan.
1. Harus Memiliki Satu Elemen Induk
Dalam JSX, setiap komponen harus memiliki satu elemen induk (parent element) yang membungkus seluruh elemen di dalamnya.
Sebagai contoh, kode berikut akan menghasilkan error:
return (
<h1>Hello</h1>
<p>Belajar React</p>
)React tidak dapat merender dua elemen sejajar secara langsung tanpa pembungkus. Hal ini karena JSX pada akhirnya akan dikompilasi menjadi satu struktur objek JavaScript.
Untuk memperbaikinya, kita perlu membungkus elemen-elemen tersebut di dalam satu elemen induk, misalnya menggunakan <div>.
Contohnya:
return (
<div>
<h1>Hello</h1>
<p>Belajar React</p>
</div>
)Sekarang React hanya melihat satu elemen utama yaitu <div>, yang di dalamnya terdapat beberapa elemen lain.
Aturan ini sangat penting ketika kita mulai membuat komponen yang lebih kompleks. Biasanya developer menggunakan elemen pembungkus seperti:
divsectionmain- atau bahkan React Fragment (yang akan kita bahas pada bab berikutnya)
Dengan struktur yang jelas seperti ini, React dapat mengelola tampilan aplikasi dengan lebih efisien.
2. Menggunakan className
Jika Authemers sudah terbiasa menulis HTML, biasanya kita menambahkan class CSS seperti ini:
class="container"Namun dalam JSX, penulisannya sedikit berbeda. Kita harus menggunakan className.
Contohnya:
<div className="container">
<h1>Belajar React</h1>
</div>Alasan perubahan ini cukup sederhana. Dalam JavaScript, kata class sudah digunakan sebagai keyword untuk membuat class atau blueprint object dalam pemrograman.
Karena JSX berada di dalam ekosistem JavaScript, React menggunakan className untuk menghindari konflik dengan keyword tersebut.
Meskipun terlihat sebagai perubahan kecil, aturan ini sangat penting karena jika kita tetap menggunakan class, React akan menampilkan error atau peringatan di console.
Dengan menggunakan className, kita tetap bisa menghubungkan elemen JSX dengan styling CSS seperti biasa.
Sebagai contoh:
function App(){
return (
<div className="container">
<h1 className="title">Tutorial React</h1>
<p className="description">Belajar React dari nol sampai mahir.</p>
</div>
)
}Class CSS tersebut nantinya bisa diatur melalui file CSS untuk menentukan warna, ukuran teks, layout, dan sebagainya.
3. Semua Tag Harus Ditutup
Aturan berikutnya dalam JSX adalah semua tag harus ditutup dengan benar.
Dalam HTML biasa, beberapa tag boleh tidak memiliki penutup, misalnya:
<img src="logo.png">Namun dalam JSX, tag seperti ini harus ditutup secara eksplisit.
Penulisannya menjadi:
<img src="logo.png" />Perhatikan tanda / sebelum penutup tag. Ini disebut self-closing tag, dan sangat umum digunakan dalam JSX.
Beberapa elemen yang sering ditulis dengan cara ini antara lain:
<img src="logo.png" />
<input type="text" />
<br />
<hr />
Jika kita lupa menutup tag seperti ini, React biasanya akan langsung menampilkan error saat proses kompilasi.
Aturan ini membuat struktur kode menjadi lebih konsisten dan lebih mudah dipahami oleh sistem React.
Walaupun JSX terlihat seperti HTML, sebenarnya JSX memiliki aturan tersendiri karena ia berada di dalam lingkungan JavaScript.
Tiga aturan dasar yang paling penting untuk diingat adalah:
- JSX harus memiliki satu elemen induk.
- Gunakan
classNamesebagai pengganticlass. - Semua tag harus ditutup, termasuk tag seperti
img,input, danbr.
Dengan memahami aturan-aturan ini, Authemers akan lebih mudah menulis kode React tanpa mengalami error sintaks yang sering terjadi pada pemula.
Setelah memahami dasar JSX dan aturan-aturannya, pada bagian berikutnya kita akan mulai masuk ke konsep yang menjadi inti dari React, yaitu komponen (components) yang memungkinkan kita membangun antarmuka aplikasi secara modular dan dapat digunakan kembali.
Contoh JSX dalam Proyek Sederhana
Setelah memahami konsep dasar JSX, sekarang saatnya kita melihat bagaimana JSX digunakan dalam sebuah proyek sederhana. Tujuannya agar Authemers dapat melihat bagaimana struktur tampilan React dibangun secara nyata menggunakan komponen dan variabel JavaScript.
Mari kita mulai dengan contoh paling dasar.
Edit file App.jsx menjadi seperti berikut:
function App(){
const nama = "Authemers"
return(
<div>
<h1>Belajar React dari Nol</h1>
<p>Halo {nama}, selamat datang di tutorial React.</p>
<p>Hari ini kita belajar JSX.</p>
</div>
)
}
export default AppPada kode di atas, kita membuat sebuah komponen React bernama App. Di dalam komponen tersebut terdapat sebuah variabel bernama nama yang berisi teks "Authemers".
Variabel tersebut kemudian ditampilkan di dalam JSX menggunakan tanda {} seperti ini:
<p>Halo {nama}, selamat datang di tutorial React.</p>Ketika aplikasi React dijalankan, browser akan menampilkan halaman sederhana dengan teks yang kita tulis.
Kurang lebih tampilannya akan menjadi seperti ini:
Belajar React dari Nol
Halo Authemers, selamat datang di tutorial React.
Hari ini kita belajar JSX.Walaupun terlihat sederhana, contoh ini sudah menunjukkan bagaimana React menggunakan JSX untuk membangun antarmuka aplikasi.
Namun dalam dunia nyata, React biasanya digunakan untuk membuat aplikasi yang lebih kompleks seperti dashboard, sistem manajemen data, atau aplikasi interaktif lainnya.
Untuk memberikan gambaran yang lebih jelas, mari kita lihat dua contoh sederhana penggunaan JSX dalam proyek yang lebih realistis.
Contoh 1: Tampilan Sistem Keuangan Sederhana
Bayangkan kita sedang membuat aplikasi pencatatan keuangan sederhana. Kita ingin menampilkan informasi saldo, pemasukan, dan pengeluaran.
Dengan JSX, kita bisa membuat struktur tampilannya seperti berikut:
function App(){
const saldo = 5000000
const pemasukan = 2000000
const pengeluaran = 1000000
return(
<div>
<h1>Dashboard Keuangan</h1>
<p>Saldo Saat Ini: Rp {saldo}</p>
<p>Total Pemasukan: Rp {pemasukan}</p>
<p>Total Pengeluaran: Rp {pengeluaran}</p>
<p>Sisa Saldo: Rp {saldo + pemasukan - pengeluaran}</p>
</div>
)
}
export default AppPada contoh ini kita menggunakan JSX untuk menampilkan beberapa data keuangan.
Perhatikan bagian berikut:
<p>Sisa Saldo: Rp {saldo + pemasukan - pengeluaran}</p>Di dalam JSX kita tidak hanya menampilkan variabel, tetapi juga melakukan perhitungan langsung menggunakan JavaScript.
Ketika aplikasi dijalankan, React akan menghitung nilai tersebut dan menampilkannya di browser.
Konsep seperti ini sangat sering digunakan dalam aplikasi nyata seperti:
- aplikasi kas pribadi
- sistem akuntansi
- dashboard laporan bisnis
- aplikasi fintech
Semua data tersebut dapat ditampilkan secara dinamis menggunakan JSX.
Dashboard Keuangan
Tampilan dashboard keuangan diatas merupakan contoh tampilan setelah kita tambahkan CSS ke dalam React. Nah, Authemers bisa copy kode dibawah untuk meniru tampilan tersebut.
function App(){
const saldo = 5000000
const pemasukan = 2000000
const pengeluaran = 1000000
return(
<div className="dashboard-keuangan">
<h1>Dashboard Keuangan</h1>
<div className="item">
<span>Saldo Saat Ini</span>
<span className="saldo">Rp {saldo}</span>
</div>
<div className="item">
<span>Total Pemasukan</span>
<span className="pemasukan">Rp {pemasukan}</span>
</div>
<div className="item">
<span>Total Pengeluaran</span>
<span className="pengeluaran">Rp {pengeluaran}</span>
</div>
<div className="sisa">
Sisa Saldo: Rp {saldo + pemasukan - pengeluaran}
</div>
</div>
)
}
export default AppPerhatikan bagian berikut:
className="dashboard-keuangan"
className="item"
className="saldo"Di sinilah React menghubungkan elemen JSX dengan styling CSS yang kita buat.
Cara Menghubungkan File CSS di React
Biasanya CSS disimpan di file terpisah, misalnya:
src/style.cssKemudian file tersebut diimpor ke dalam komponen React.
Contohnya:
import "./style.css"Struktur file biasanya seperti ini:
src
├── App.jsx
├── style.css
└── main.jsxSetelah file CSS diimpor, seluruh class yang ada di dalamnya bisa digunakan di JSX menggunakan className.
Alur Kerja Styling di React
Secara sederhana prosesnya seperti ini:
- Developer membuat class CSS
- CSS disimpan di file
.css - File CSS di-import ke dalam komponen React
- JSX menggunakan className untuk memanggil style tersebut
Contoh:
CSS
.dashboard-keuangan{
max-width:420px;
margin:20px auto;
padding:25px;
border-radius:12px;
background:#ffffff;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
font-family:Arial, sans-serif;
}
.dashboard-keuangan h1{
text-align:center;
margin-bottom:20px;
color:#333;
}
.item{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid #eee;
font-size:16px;
}
.item:last-child{
border-bottom:none;
}
.saldo{
color:#2ecc71;
font-weight:bold;
}
.pemasukan{
color:#3498db;
}
.pengeluaran{
color:#e74c3c;
}
.sisa{
margin-top:15px;
font-size:18px;
font-weight:bold;
text-align:center;
}JSX
<div className="dashboard-keuangan">React kemudian akan merender tampilan tersebut ke dalam browser dengan styling yang sudah kita tentukan.
Dengan cara ini React tetap dapat menggunakan CSS seperti pengembangan website biasa, tetapi tetap menjaga struktur komponen agar lebih terorganisir dan mudah dikelola dalam proyek yang lebih besar.
JSX adalah salah satu konsep paling penting dalam React. Dengan JSX, developer dapat menulis struktur tampilan aplikasi dengan cara yang lebih deklaratif dan mudah dibaca.
Bagi banyak developer pemula, memahami JSX adalah titik di mana React mulai terasa masuk akal.
Setelah memahami JSX, langkah berikutnya adalah mempelajari konsep yang menjadi fondasi arsitektur React: komponen.
Komponen memungkinkan kita memecah tampilan aplikasi menjadi bagian-bagian kecil yang dapat digunakan kembali.
Jika Authemers belum membaca seri React dari awal, kalian bisa melihat pengantar seri ini di:
Dan jika ingin memahami cara instalasi React terlebih dahulu, panduannya sudah dibahas lengkap di artikel berikut:
Pada bab berikutnya kita akan mulai benar-benar menggunakan kekuatan React dengan membuat komponen pertama dalam aplikasi.
Terima Kasih.
