Next.js

Next.js adalah framework React.js yang dibuat oleh tim Vercel. Next.js memudahkan kita untuk membuat aplikasi React.js yang lebih kompleks. Next.js juga memudahkan kita untuk membuat aplikasi React.js yang SEO friendly.

Tentang React.js

React.js adalah library JavaScript yang dibuat oleh tim Facebook. React.js memudahkan kita untuk membuat aplikasi web yang interaktif. React.js juga memudahkan kita untuk membuat aplikasi web yang kompleks.

Konsep Dasar React.js

Komponen

Komponen adalah bagian-bagian kecil dari aplikasi React.js. Komponen dapat berupa fungsi atau class. Komponen dapat menerima input berupa props dan mengembalikan output berupa elemen React.js.

Contoh komponen berupa fungsi:

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

Props

Props adalah input yang diterima oleh komponen. Props berupa objek yang berisi data yang dikirimkan oleh komponen lain. Props bersifat read-only, artinya props tidak dapat diubah oleh komponen yang menerimanya.

Contoh props:

<Hello name="John" />

State

State adalah data yang dimiliki oleh komponen. State bersifat private, artinya state hanya dapat diubah oleh komponen itu sendiri. State dapat diubah dengan menggunakan fungsi setState.

Contoh state:

function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

JSX

JSX adalah syntax yang digunakan oleh React.js untuk membuat elemen React.js. JSX memudahkan kita untuk membuat elemen React.js. JSX juga memudahkan kita untuk menggabungkan elemen React.js dengan JavaScript.

Contoh JSX:

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

Elemen React.js

Elemen React.js adalah representasi dari komponen React.js. Elemen React.js dapat berupa elemen HTML, elemen komponen, atau elemen gabungan dari keduanya. Elemen React.js dapat menerima input berupa props dan mengembalikan output berupa elemen React.js.

Contoh elemen React.js:

<Hello name="John" />

Virtual DOM

Virtual DOM adalah representasi dari DOM yang disimpan di memori. Virtual DOM memudahkan kita untuk memanipulasi DOM. React.js menggunakan konsep Virtual DOM untuk mempercepat proses rendering.

Rendering

Rendering adalah proses mengubah data menjadi elemen React.js. Rendering dilakukan oleh React.js secara otomatis setiap kali terjadi perubahan pada data. Rendering dilakukan oleh React.js secara otomatis setiap kali terjadi perubahan pada props atau state.

Lifecycle

Lifecycle adalah siklus hidup dari komponen React.js. Lifecycle terdiri dari beberapa fase, yaitu mounting, updating, dan unmounting. React.js menyediakan beberapa fungsi untuk mengeksekusi kode pada setiap fase lifecycle.

Contoh fungsi lifecycle:

function Counter() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log("Component did mount");
  }, []);
 
  useEffect(() => {
    console.log("Component did update");
  }, [count]);
 
  useEffect(() => {
    return () => {
      console.log("Component will unmount");
    };
  }, []);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Docker Setup