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>;

robzlabz

// Pemanggilan

<Card name="Agus"/>

const Card = (props) => {
 return <h1>Hai, {props.name}</h1>;
};

// atau bisa di pecah langsung menggunakan object desctructure
// jadi kita bisa langsung memanggil 'name' tanpa variable props

robzlabz

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>JSX di dalam fungsi render component</h1>;
 }
}

/// atau 👇