A. React Component

Sebelum mempelajari Strukrur NextJS 13, kita akan mempelajari terlebih dahulu Fundamental dari ReactJS. Kita akan mulai dahulu dari React Component.

Pada Project NextJS , file yang pertama kali dijalankan adalah page.tsx pada folder app. Kita akan ubah isi dari file tersebut menjadi seperti kode berikut

app/page.tsx

export default function Home() {
  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

Ketika dijalankan pada browser akan tampak seperi berikut.

1. Apa itu React Component

React Component merupakan bagian-bagian User Interface yang menyusun keseluruhan User Interface dari aplikasi reactjs.

sumber gambar : https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-components

Contoh pada gambar di atas , User Interface halaman register facebook dibuat dari beberapa komponen yang memiliki fungsi dan logic tertentu. Terdapat setidaknya 4 komponen, dimana setiap komponen memiliki fungsi tertentu dan ketika disusun jadilah satu User Interface web secara utuh.

React Component memiliki ciri sebagai berikut

• React Component di deklarasikan menggukan function atau class dengan return berupa JSX.
• React Component harus memiliki nama dengan Huruf Capital , contoh Home, Latihan, Button.
• React Component harus bersifat reusable artinya dapat digunakan secara berulang-ulang.
• React Component memilki logic baik sederhana maupun kompleks
• React Component dapat menggunakan komponen lain maupun digunakan komponen lain (Konsep Component Parent Component Child).
• React Component dapat memiliki state dan props.

Dalam membuat React Component dari 3 cara yang bisa dilakukan

A. Class Component

app/page.ts

'use client'

import React from "react";

export default class App extends React.Component {
  render(): React.ReactNode {
    return <div>Ini Class Component</div>;
  }
}

karena kita menggunakan nextjs tambahkan use client

Note

• Pada bahasa NextJs kita akan bahas kapan menggunakan use client dan tidak.
• Kita tidak akan menggunakan class component pada pembelajaran.

B. Function Component

app/page.tsx

export default function Home() {
  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

C. Arrow Function Component

app/page.tsx

const Home = () =>  {
  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

export default Home