Apa Itu React?

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 1 dari 42.

React adalah library paling populer di dunia untuk membangun antarmuka pengguna. Facebook, Netflix, Airbnb: bagian interaktif web yang kamu gunakan setiap hari dibuat dengan library ini.

Gagasan utamanya sederhana: alih-alih menulis satu halaman besar, kamu membuat bagian-bagian kecil yang dapat digunakan kembali, yang disebut components. Sebuah tombol adalah component. Kartu profil adalah component. Seluruh halaman hanyalah component di dalam component.

Komponen bukanlah sesuatu yang perlu ditakuti: komponen adalah fungsi JavaScript yang mengembalikan apa yang seharusnya muncul di layar:

function App() {
    return <h1>Hello, React!</h1>;
}

Hal yang tampak seperti HTML di dalam JavaScript disebut JSX. Hal ini memungkinkan kamu menjelaskan tampilan layar tepat di tempat logikanya berada. React mengambil hasil yang dikembalikan komponenmu dan menjaga halaman sebenarnya tetap sinkron. Kamu menjelaskan apa yang kamu inginkan, lalu React menentukan bagaimana cara memperbarui browser.

Dalam kursus ini, kamu akan mengedit App.jsx, komponen utama dari aplikasi React kecil. Pratinjau di sebelah kanan menampilkan aplikasimu secara langsung saat kamu mengetik. Mari kita buat sesuatu.

Tantangan

Pemula

Ini komponen React pertamamu, yang sudah ditulis untukmu.

Yang perlu dilakukan:

Baca App.jsx: ini adalah fungsi yang mengembalikan JSX.
Tekan tombol Jalankan.
Lihat pratinjau di sebelah kanan menampilkan hasil yang dikembalikan komponen.

Itulah seluruh perulangan React: sebuah komponen mengembalikan JSX, lalu React menampilkannya di layar. Mulai pelajaran berikutnya, kamu akan menulis JSX sendiri.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>