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 dari web yang kamu gunakan setiap hari dibangun dengan library ini.

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

Komponen tidak 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 ini disebut JSX. Hal ini memungkinkan kamu menjelaskan tampilan layar tepat di tempat logika berada. React mengambil hasil yang dikembalikan komponenmu dan menjaga halaman sebenarnya tetap sinkron. Kamu menjelaskan apa yang kamu inginkan, lalu React menentukan bagaimana memperbarui browser.

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

Tantangan

Pemula

Ini komponen React pertamamu, sudah ditulis untukmu.

Yang harus dilakukan:

Baca App.jsx: ini adalah fungsi yang mengembalikan JSX.
Tekan tombol “Jalankan”.
Amati pratinjau yang menampilkan hasil yang dikembalikan komponen.

Itulah seluruh alur 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>