Belajar Next.js

Home / blog / Belajar Next.js
Enda 17 minutes.
NextJs

pengantar

Untuk menggunakan Next.js secara efektif, akan sangat membantu jika Anda terbiasa dengan JavaScript, React, dan konsep pengembangan web terkait. Tetapi JavaScript dan React adalah topik yang luas. Bagaimana Anda tahu kapan Anda siap untuk belajar Next.js?

Selamat datang di kursus Foundation Next.js! Kursus ramah pemula yang dipimpin contoh ini akan memandu Anda melalui pengetahuan prasyarat untuk Next.js. Anda akan membangun proyek sederhana selangkah demi selangkah; dimulai dengan aplikasi JavaScript, lalu memigrasikannya ke React dan Next.js.

Setiap bagian dibangun di atas yang sebelumnya, sehingga Anda dapat memilih dari mana untuk memulai tergantung pada apa yang sudah Anda ketahui.

Tutorial ini mengasumsikan pengetahuan tentang HTML, CSS, JavaScript, dan tanpa pengetahuan tentang React. Jika Anda sudah terbiasa dengan React, Anda dapat melompat ke bagian Memulai dengan Next.js atau Membuat aplikasi Next.js pertama Anda .

Bergabung dalam percakapan

Jika Anda memiliki pertanyaan tentang apa pun yang terkait dengan Next.js atau kursus ini, Anda dapat bertanya kepada komunitas kami di Discord .

Apa itu Next.js?

Next.js adalah framework React fleksibel yang memberi Anda blok bangunan untuk membuat aplikasi web cepat.

Tapi apa sebenarnya yang kita maksud dengan ini? Mari luangkan waktu untuk memperluas apa itu React dan Next.js dan bagaimana mereka dapat membantu.

Membangun Blok Aplikasi Web

Ada beberapa hal yang perlu Anda pertimbangkan saat membangun aplikasi modern. Seperti:

  • User interface - bagaimana pengguna akan menggunakan dan berinteraksi dengan aplikasi Anda.
  • Routing - cara pengguna bernavigasi di antara berbagai bagian aplikasi Anda.
  • Data Fetching - tempat data Anda berada dan cara mendapatkannya.
  • Rendering - kapan dan di mana Anda merender konten statis atau dinamis.
  • Integrations - layanan pihak ketiga apa yang Anda gunakan (CMS, autentikasi, pembayaran, dll.) dan bagaimana Anda terhubung dengannya.
  • Infrastructure - tempat Anda menyebarkan, menyimpan, dan menjalankan kode aplikasi Anda (Tanpa Server, CDN, Edge, dll).
  • Performance - cara mengoptimalkan aplikasi Anda untuk pengguna akhir.
  • Scalability - bagaimana aplikasi Anda beradaptasi dengan pertumbuhan tim, data, dan lalu lintas Anda.
  • Developer Experience - pengalaman tim Anda membangun dan memelihara aplikasi Anda.

Untuk setiap bagian dari aplikasi Anda, Anda perlu memutuskan apakah Anda akan membangun solusi sendiri atau menggunakan alat lain seperti libraries dan frameworks.

Apa itu React?

React adalah library JavaScript untuk membangun user interface interaktif.

Yang kami maksud dengan user interface adalah elemen yang dilihat dan berinteraksi dengan pengguna di layar.

Dengan library, maksud kami React menyediakan fungsi-fungsi yang bermanfaat untuk membangun UI, tetapi menyerahkannya kepada developer untuk menggunakan fungsi-fungsi tersebut dalam aplikasi mereka.

Bagian dari kesuksesan React adalah relatif tidak ada pendapat tentang aspek lain dari membangun aplikasi. Ini telah menghasilkan ekosistem alat dan solusi pihak ketiga yang berkembang pesat.

Ini juga berarti, bagaimanapun, membangun aplikasi React yang lengkap dari bawah ke atas membutuhkan usaha. developer perlu meluangkan waktu untuk mengonfigurasi alat dan menemukan kembali solusi untuk persyaratan aplikasi umum.

Apa itu Next.js?

Next.js adalah framework React yang memberi Anda blok bangunan untuk membuat aplikasi web.

Yang kami maksud dengan framework adalah Next.js menangani perkakas dan konfigurasi yang diperlukan untuk React, dan menyediakan struktur, fitur, dan pengoptimalan tambahan untuk aplikasi Anda.

Anda dapat menggunakan React untuk membangun UI Anda, kemudian mengadopsi fitur Next.js secara bertahap untuk menyelesaikan persyaratan aplikasi umum seperti routing, data fetching, integrations - semuanya sambil meningkatkan pengalaman developer dan pengguna akhir.

Apakah Anda seorang developer individu atau bagian dari tim yang lebih besar, Anda dapat memanfaatkan React dan Next.js untuk membangun aplikasi web yang sepenuhnya interaktif, sangat dinamis, dan berperforma baik.

Dalam pelajaran selanjutnya, kita akan membahas bagaimana Anda dapat memulai dengan React dan Next.js.

Dari JavaScript ke React

Untuk memahami cara kerja React, pertama-tama kita memerlukan pemahaman dasar tentang cara browser menginterpretasikan kode Anda untuk membuat interactive user interface (UI).

Saat pengguna mengunjungi halaman web, server mengembalikan file HTML ke browser yang mungkin terlihat seperti ini:

Browser kemudian membaca HTML dan membuat Document Object Model (DOM).

Apa itu DOM?

DOM adalah representasi objek dari elemen HTML. Ini bertindak sebagai jembatan antara kode Anda dan user interface, dan memiliki struktur seperti pohon dengan hubungan orang tua dan anak.

Anda dapat menggunakan metode DOM dan bahasa pemrograman, seperti JavaScript, untuk mendengarkan kejadian pengguna dan memanipulasi DOM dengan memilih, menambahkan, memperbarui, dan menghapus elemen tertentu di user interface. Manipulasi DOM memungkinkan Anda untuk tidak hanya menargetkan elemen tertentu, tetapi juga mengubah gaya dan kontennya.

Mari kita lihat bagaimana Anda bisa menggunakan metode JavaScript dan DOM di bagian selanjutnya.

Benar atau Salah : Anda dapat memperbarui konten halaman dengan memanipulasi DOM.

A. Benar

B. Salah

Memperbarui UI dengan Metode JavaScript dan DOM

Mari kita lihat bagaimana Anda bisa menggunakan metode JavaScript dan DOM dengan menambahkan tag h1 ke proyek Anda.

Buka editor kode Anda dan buat file index.html baru. Di dalam file HTML, tambahkan kode berikut:

<!-- index.html -->
<html>
  <body>
    <div></div>
  </body>
</html>

Kemudian berikan div, id yang unik agar bisa Anda targetkan nanti.

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>
  </body>
</html>

Untuk menulis JavaScript di dalam file HTML Anda, tambahkan tag script:

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

Sekarang, di dalam tag script, Anda dapat menggunakan metode DOM, getElementById(), untuk memilih elemen <div> dengan id:

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

Anda dapat terus menggunakan metode DOM untuk membuat elemen <h1> baru:

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById('app');

      // Create a new H1 element
      const header = document.createElement('h1');

      // Create a new text node for the H1 element
      const headerContent = document.createTextNode(
        'Develop. Preview. Ship. 🚀',
      );

      // Append the text to the H1 element
      header.appendChild(headerContent);

      // Place the H1 element inside the div
      app.appendChild(header);
    </script>
  </body>
</html>

Untuk memastikan semuanya berfungsi, buka file HTML Anda di dalam browser pilihan Anda. Anda akan melihat tag h1 yang bertuliskan, ‘Develop. Preview. Ship. 🚀’.

HTML vs DOM

Jika Anda melihat elemen DOM di dalam browser developer tools Anda, Anda akan melihat bahwa DOM menyertakan elemen <h1> tersebut. DOM halaman berbeda dengan kode sumber - atau dengan kata lain, file HTML asli yang Anda buat.

Ini karena HTML merepresentasikan konten halaman awal , sedangkan DOM merepresentasikan konten halaman yang diperbarui yang diubah oleh kode JavaScript yang Anda tulis.

Memperbarui DOM dengan JavaScript biasa sangat ampuh tetapi bertele-tele. Anda telah menulis semua kode ini untuk menambahkan elemen <h1> dengan beberapa teks:

<!-- index.html -->
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

Seiring bertambahnya ukuran aplikasi atau tim, membangun aplikasi dengan cara ini dapat menjadi semakin menantang.

Dengan pendekatan ini, developer menghabiskan banyak waktu menulis instruksi untuk memberi tahu komputer bagaimana seharusnya melakukan sesuatu. Tapi bukankah menyenangkan untuk menjelaskan apa yang ingin Anda tampilkan dan biarkan komputer mengetahui cara memperbarui DOM?

Pemrograman Imperatif vs Deklaratif

Kode di atas adalah contoh pemrograman imperatif yang bagus. Anda sedang menulis langkah-langkah bagaimana user interface harus diperbarui. Namun ketika membangun user interface, pendekatan deklaratif sering lebih disukai karena dapat mempercepat proses pengembangan. Daripada harus menulis metode DOM, akan sangat membantu jika developer dapat mendeklarasikan apa yang ingin mereka tampilkan h1 (dalam hal ini, sebuah tag dengan beberapa teks).

Dengan kata lain, pemrograman imperatif seperti memberikan petunjuk langkah demi langkah kepada koki tentang cara membuat pizza. Pemrograman deklaratif seperti memesan pizza tanpa memperhatikan langkah-langkah yang diperlukan untuk membuat pizza 🍕.

Declarative library populer yang membantu developer membangun user interface adalah React .

React: library UI deklaratif

Sebagai developer, Anda dapat memberi tahu React apa yang Anda inginkan terjadi pada user interface, dan React akan mencari tahu langkah-langkah bagaimana memperbarui DOM atas nama Anda.

Di bagian selanjutnya, kita akan mengeksplorasi bagaimana Anda bisa memulai dengan React.

Tinjauan Singkat : Manakah dari pernyataan berikut ini yang lebih deklaratif?

A. “Rajut adonan, gulung adonan, tambahkan saus tomat, tambahkan keju, tambahkan ham, tambahkan nanas, panggang dengan suhu 200 derajat celsius dalam oven batu untuk…”

B. “Tolong pizza Hawaii.”

Memulai dengan React

Untuk menggunakan React dalam proyek Anda, Anda dapat memuat dua script React dari situs web eksternal bernama unpkg.com :

  • react adalah perpustakaan React inti.
  • react-dom menyediakan metode khusus DOM yang memungkinkan Anda menggunakan React dengan DOM.
<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

Alih-alih memanipulasi DOM secara langsung dengan JavaScript biasa, Anda dapat menggunakan metode ReactDOM.render() dari react-dom untuk memberi tahu React agar merender judul <h1> kita di dalam elemen #app kita.

<!-- index.html -->
<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

Tetapi jika Anda mencoba menjalankan kode ini di browser, Anda akan mendapatkan kesalahan sintaksis:

Ini karena Javascript <h1>...</h1> tidak valid. Sepotong kode ini adalah JSX.

Apa itu JSX?

JSX adalah ekstensi sintaksis untuk JavaScript yang memungkinkan Anda mendeskripsikan UI Anda dalam sintaks mirip HTML yang sudah dikenal. Hal yang menyenangkan tentang JSX adalah selain mengikuti tiga aturan JSX , Anda tidak perlu mempelajari simbol atau sintaks baru di luar HTML dan JavaScript.

Perhatikan bahwa browser tidak langsung memahami JSX, jadi Anda memerlukan kompiler JavaScript, seperti Babel , untuk mengubah kode JSX Anda menjadi JavaScript biasa.

Menambahkan Babel ke proyek Anda

Untuk menambahkan Babel ke proyek Anda, salin dan tempel script berikut di file index.html Anda:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Selain itu, Anda perlu memberi tahu Babel kode apa yang akan diubah dengan mengubah jenis script menjadi type=text/jsx.

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

Anda kemudian dapat menjalankan kode Anda di browser untuk mengonfirmasi bahwa itu berfungsi dengan benar.

Membandingkan kode React deklaratif yang baru saja Anda tulis:

<script type="text/jsx">
  const app = document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

ke kode JavaScript penting yang Anda tulis di bagian sebelumnya:

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

Anda dapat mulai melihat bagaimana dengan menggunakan React, Anda dapat mengurangi banyak kode berulang.

Dan inilah tepatnya yang dilakukan React, ini adalah library yang berisi cuplikan kode yang dapat digunakan kembali yang menjalankan tugas atas nama Anda - dalam hal ini, memperbarui UI.

Catatan: Anda tidak perlu tahu persis bagaimana React mengupdate UI untuk mulai menggunakannya, tetapi jika Anda ingin mempelajari lebih lanjut, lihat hierarki UI dan bagian metode render di Dokumentasi React.

Tinjauan Singkat : Mengapa Anda perlu mengkompilasi kode React Anda?

A. React menggunakan versi HTML baru yang terlalu canggih untuk browser saat ini.

B. React menggunakan JSX yang perlu dikompilasi ke dalam JavaScript.

C. React tidak mengetahui cara memperbarui DOM sehingga memerlukan kompiler untuk melakukannya.

JavaScript penting untuk React

Meskipun Anda dapat mempelajari JavaScript dan React pada saat yang sama, memahami JavaScript dapat membuat proses mempelajari React menjadi lebih mudah.

Di bagian selanjutnya, Anda akan diperkenalkan dengan beberapa konsep inti React dari perspektif JavaScript. Berikut ringkasan topik JavaScript yang akan disebutkan:

Meskipun kursus ini tidak mendalami JavaScript, praktik yang baik adalah selalu mengikuti perkembangan JavaScript versi terbaru. Namun jika Anda belum merasa mahir dalam JavaScript, jangan biarkan hal ini menghalangi Anda untuk mulai membangun dengan React!

Konsep Inti React

Ada tiga konsep inti React yang harus Anda pahami untuk mulai membangun aplikasi React. Ini adalah:

  • Components
  • Props
  • State

Di bagian selanjutnya, kita akan membahas konsep di atas dan menyediakan sumber daya tempat Anda dapat terus mempelajarinya.

Membangun UI dengan Components

User interfaces dapat dipecah menjadi blok bangunan yang lebih kecil yang disebut Components .

Components memungkinkan Anda membuat potongan kode mandiri dan dapat digunakan kembali. Jika Anda menganggap Components sebagai batu bata LEGO, Anda dapat mengambil batu bata individual ini dan menggabungkannya untuk membentuk struktur yang lebih besar. Jika Anda perlu memperbarui bagian dari UI, Anda dapat memperbarui Components atau brick tertentu.

Modularitas ini memungkinkan kode Anda lebih mudah dikelola seiring pertumbuhannya karena Anda dapat dengan mudah menambah, memperbarui, dan menghapus komponen tanpa menyentuh aplikasi kami yang lain.

Hal yang menyenangkan tentang komponen React adalah bahwa mereka hanyalah JavaScript. Mari kita lihat bagaimana Anda bisa menulis komponen React, dari perspektif JavaScript:

Membuat Components

Di React, components adalah function. Di dalam tag script Anda, tulis sebuah function bernama header:

<script type="text/jsx">
  const app = document.getElementById("app")


  function header() {
  }

  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

Components adalah function yang mengembalikan elemen UI . Di dalam pernyataan function pengembalian, Anda dapat menulis JSX:

<script type="text/jsx">
  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

  ReactDOM.render(, app)
</script>

Untuk merender komponen ini ke DOM, Anda bisa meneruskannya sebagai argumen pertama dalam metode ReactDOM.render():

<script type="text/jsx">

  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }


   ReactDOM.render(header, app)
</script>

Tapi, tunggu sebentar. Jika Anda mencoba menjalankan kode di atas di browser, Anda akan mendapatkan error. Agar ini berfungsi, ada dua hal yang harus Anda lakukan:

Pertama, komponen React harus dikapitalisasi untuk membedakannya dari HTML biasa dan JavaScript.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

// Capitalize the React Component
ReactDOM.render(Header, app);

Kedua, Anda menggunakan komponen React dengan cara yang sama seperti Anda menggunakan tag HTML biasa, dengan kurung siku <>.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

ReactDOM.render(<Header />, app);

Komponen Bersarang

Aplikasi biasanya menyertakan lebih banyak konten daripada satu komponen. Anda dapat menyarangkan komponen React di dalam satu sama lain seperti yang Anda lakukan pada elemen HTML biasa.

Dalam contoh Anda, buat komponen baru bernama HomePage:

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
  return <div></div>;
}

ReactDOM.render(<Header />, app);

Kemudian sarangkan komponen <Header> baru di dalam komponen <HomePage>:

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}

ReactDOM.render(<Header />, app);

Component Trees

Anda dapat terus menyarangkan komponen React dengan cara ini untuk membentuk pohon komponen.

Misalnya, komponen HomePage tingkat atas Anda dapat menampung komponen Header, komponen Article, dan komponen Footer. Dan masing-masing komponen tersebut pada gilirannya dapat memiliki komponen anaknya sendiri dan seterusnya. Misalnya, komponen Header dapat berisi komponen Logo, komponen Title dan komponen Navigation.

Format modular ini memungkinkan Anda untuk menggunakan kembali komponen di berbagai tempat di dalam aplikasi Anda.

Dalam proyek Anda, karena <HomePage> sekarang merupakan komponen tingkat atas Anda, Anda dapat meneruskannya ke metode ReactDOM.render():

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

ReactDOM.render(<HomePage />, app);

Di bagian selanjutnya, kita akan membahas props dan bagaimana Anda dapat menggunakannya untuk mengirimkan data antar komponen Anda.

Tinjauan Singkat : Bagaimana Anda membuat sarang komponen Header di dalam komponen Layout di React?

A. <Layout /><Header />

B. <Layout><Header /></Layout>

C. <layout><header><header/><layout/>

Menampilkan Data dengan Props

Sejauh ini, jika Anda menggunakan kembali komponen <Header /> Anda, itu akan menampilkan konten yang sama di kedua waktu.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

Tetapi bagaimana jika Anda ingin mengirimkan teks yang berbeda atau Anda tidak mengetahui informasi sebelumnya karena Anda mengambil data dari sumber eksternal?

Elemen HTML biasa memiliki atribut yang dapat Anda gunakan untuk meneruskan potongan informasi yang mengubah perilaku elemen tersebut. Misalnya, mengubah atribut src suatu elemen <img> akan mengubah gambar yang ditampilkan. Mengubah atribut href tag <a> akan mengubah tujuan tautan.

Dengan cara yang sama, Anda dapat meneruskan potongan informasi sebagai properti ke komponen React. Ini disebut props.

Serupa dengan fungsi JavaScript, Anda bisa mendesain komponen yang menerima argumen (atau props) kustom yang mengubah perilaku komponen atau apa yang tampak saat ditampilkan ke layar. Kemudian, Anda dapat mewariskan properti ini dari komponen induk ke komponen anak.

Catatan: Di React, data mengalir ke bawah pohon komponen. Ini disebut sebagai aliran data satu arah . State, yang akan dibahas pada bagian selanjutnya, dapat diteruskan dari komponen parent ke child sebagai props.

Menggunakan Props

Di komponen HomePage Anda, Anda bisa meneruskan prop title khusus ke komponen Header, sama seperti Anda meneruskan atribut HTML:

// function Header() {
//   return <h1>Develop. Preview. Ship. 🚀</h1>
// }

function HomePage() {
  return (
    <div>
      <Header title="React 💙" />
    </div>
  );
}

Dan Header, komponen anak, dapat menerima props tersebut sebagai parameter fungsi pertama :

function Header(props) {
//   return <h1>Develop. Preview. Ship. 🚀</h1>
// }

// function HomePage() {
//   return (
//     <div>
//       <Header title="React 💙" />
//     </div>
//   )
// }

// ReactDOM.render(<HomePage />, app)

Jika Anda console.log() menggunakan props, Anda dapat melihat bahwa itu adalah objek dengan properti title.

function Header(props) {
    console.log(props) // { title: "React 💙" }
//   return <h1>React 💙</h1>
// }

// function HomePage() {
//   return (
//     <div>
//       <Header title="React 💙" />
//     </div>
//   )
// }

// ReactDOM.render(<HomePage />, app)

Karena props adalah objek, Anda dapat menggunakan object destructuring untuk secara eksplisit memberi nama nilai props di dalam parameter fungsi Anda:

function Header({ title }) {
    console.log(title) // "React 💙"
//  return <h1>React 💙</h1>
// }

// function HomePage() {
//   return (
//     <div>
//       <Header title="React 💙" />
//     </div>
//   )
// }

// ReactDOM.render(<HomePage />, app)

Kemudian Anda dapat mengganti konten tag <h1> dengan variabel title Anda.

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

Jika Anda membuka proyek Anda di browser, Anda akan melihat bahwa itu menampilkan kata “title” yang sebenarnya. Ini karena React mengira Anda bermaksud merender string teks biasa ke DOM.

Anda memerlukan cara untuk menunjukkan kepada React bahwa ini adalah variabel JavaScript.

Menggunakan Variabel di JSX

Untuk menggunakan variabel yang Anda tentukan, Anda dapat menggunakan kurung kurawal {}, sintaks JSX khusus yang memungkinkan Anda menulis JavaScript biasa langsung di dalam markup JSX Anda.

// function Header({title}) {
//  console.log(title)
return <h1>{title}</h1>;
// }

Anda dapat menganggap kurung kurawal sebagai cara untuk memasukkan “JavaScript land” saat Anda berada di “JSX land”. Anda dapat menambahkan ekspresi JavaScript apa pun (sesuatu yang mengevaluasi ke satu nilai) di dalam kurung kurawal. Sebagai contoh:

  1. Object property dengan notasi titik.
function Header(props) {
  return <h1>{props.title}</h1>;
}
  1. Dengan template literal:
function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}
  1. The returned value of a function.
function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}

function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}
  1. Atau ternary operators.
function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

Anda sekarang dapat meneruskan string apa pun ke prop title Anda, dan karena Anda telah memperhitungkan kasus default di komponen Anda dengan operator ternary, Anda bahkan tidak dapat meneruskan prop title sama sekali:

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

function Page() {
  return (
    <div>
      <Header />
    </div>
  );
}

Komponen Anda sekarang menerima prop title generik yang dapat Anda gunakan kembali di berbagai bagian aplikasi Anda. Yang perlu Anda lakukan adalah mengubah title:

function Page() {
  return (
    <div>
      <Header title="React 💙" />
      <Header title="A new title" />
    </div>
  );
}

Iterating through lists

Merupakan hal yang umum untuk memiliki data yang perlu Anda tampilkan sebagai daftar. Anda dapat menggunakan metode larik untuk memanipulasi data dan menghasilkan elemen UI yang identik dalam gaya tetapi menyimpan potongan informasi yang berbeda.

Catatan: React tidak memiliki pendapat dalam hal pengambilan data, artinya Anda dapat memilih solusi mana yang paling sesuai dengan kebutuhan Anda. Nanti, kita akan membahas opsi pengambilan data di Next.js. Namun untuk saat ini, Anda dapat menggunakan larik sederhana untuk merepresentasikan data.

Tambahkan array names ke komponen HomePage Anda:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
    </div>
  );
}

Anda kemudian dapat menggunakan metode array.map() untuk mengulangi array dan menggunakan arrow function untuk memetakan names ke daftar item:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Perhatikan bagaimana Anda telah menggunakan kurung kurawal untuk masuk dan keluar dari bidang “JavaScript” dan “JSX”.

Jika Anda menjalankan kode ini, React akan memberi kami peringatan tentang prop key yang hilang. Ini karena React memerlukan sesuatu untuk mengidentifikasi item secara unik di dalam array sehingga ia mengetahui elemen mana yang harus diperbarui di DOM.

Anda dapat menggunakan names untuk saat ini karena saat ini unik, tetapi disarankan untuk menggunakan sesuatu yang dijamin unik, seperti ID item.

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

Di bagian selanjutnya, Anda akan mempelajari lebih lanjut tentang state dan cara mendengarkan peristiwa pengguna di React.

**Tinjauan Singkat **: Untuk apa props digunakan dalam React?

A. Menulis aturan CSS

B. Meneruskan informasi ke komponen

C. Menambahkan atribut ke elemen HTML

Menambahkan Interaktivitas dengan State

Mari jelajahi bagaimana React membantu kita menambahkan interaktivitas dengan penangan state dan event handlers .

Sebagai contoh, mari buat tombol like di dalam komponen HomePage Anda. Pertama, tambahkan elemen tombol di dalam statement return():

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button>Like</button>
    </div>
  );
}

Listening to Events

Untuk membuat tombol melakukan sesuatu saat diklik, Anda dapat memanfaatkan Events onClick tersebut.

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

Di React, nama event adalah camelCase. Events onClick tersebut adalah salah satu dari banyak kemungkinan Events yang dapat Anda gunakan untuk merespons interaksi pengguna. Misalnya, Anda dapat menggunakan onChange untuk kolom input atau onSubmit untuk formulir.

Handling Events

Anda dapat menentukan function untuk Event “handle” kapan pun dipicu. Buat function sebelum return statement disebut handleClick():

function HomePage() {
  // ...

  function handleClick() {
    console.log("increment like count")
  }

  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
     )
   }
konfigurasi post.config.js agar support disemua browser
Cara Mendapatkan Bantuan di Windows 10 dan 11