robzlabz

# ✅ The superior approach
version: '3.8'
services:
  postgres:
    image: postgres:15
    ports:
      - "5432:5432"
    volumes:
      - ./.temp/postgres:/var/lib/postgresql/data
    environment:

robzlabz

# ❌ The traditional (problematic) way
version: '3.8'
services:
  postgres:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data  # Where is this exactly?
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: admin

robzlabz

Install Laravel + Svelte + Inertia + Vite Right Way

Install Inertia Composer dependency

composer require inertiajs/inertia-laravel

Setup Middleware

php artisan inertia:middleware

robzlabz

<?php

namespace App\Traits;

trait LivewireMedia
{
    public function addMediaTo($media, $collectionName)
    {
        $this->addMedia($media->getRealPath())
            ->usingName(pathinfo($media->getClientOriginalName(), PATHINFO_BASENAME))

robzlabz

const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("dadaaaah");
   };
 }, []);
 return <h1>Selamat tinggal</h1>;
};

robzlabz

import React from "react";

// di functional component menggunakan useEffect dengan argumen kedua [] array kosong

const FunctionalComponent = () => {
 React.useEffect(() => {
   console.log("Aku Dijalankan");
 }, []);
 return <h1>Halo, Selamat Pagi</h1>;
};

robzlabz

onClick={() =>
  this.setState((state) => {
    return { 
         ...state,
         count: state.count + 1 
    };
  })
}

robzlabz

class CounterComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (

robzlabz

const CounterComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>Sudah di click: {count} kali</p>
     <button onClick={() => setCount(count + 1)}>Click Saya</button>
   </div>
 );
};

robzlabz

class Card extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
  }
  
  // atau 👇
  
  render() {
    return <h1>Hello, { this.props.name }</h1>;