MingleJS ile Livewire Uygulamasında Vue veya React Bileşenlerini Kullanma

MingleJS, Livewire veya Filament uygulamasında Vue ve React bileşenlerini kullanmak için bir yardımcıdır. Joao Patricio tarafından oluşturulan bu paket, Vue veya React kullanmak istediğiniz açılış sayfaları ve karmaşık bileşenler için kullanışlıdır. Ayrıca Livewire'ı benimsemek veya Vue veya React ekosistemindeki üçüncü taraf bileşenleri kullanmak için aşamalı bir yol olarak da kullanılabilir.

MingleJS, sunucu tarafında bir <div> oluşturarak ve ardından istemci tarafında bir bileşen bağlayarak çalışır. Sunucu tarafındaki bir Livewire bileşeni her bir JS bileşenini işler, böylece ön uçta Livewire bileşeninize izole edilmiş JavaScript etkileşimi elde edersiniz. Ayrıca arka uç, ön uçta bulunan bileşene veri aktarabilir.

namespace App\Livewire;
 
use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
use Ijpatricio\Mingle\Contracts\HasMingles;
use Livewire\Component;
 
class ChatApp extends Component implements HasMingles
{
    use InteractsWithMingles;
 
    public function component(): string
    {
        return 'resources/js/ChatApp/index.js';
    }
 
    public function mingleData()
    {
        return [
            'message' => 'Message in a bottle ',
        ];
    }
 
    // ...
}

Bir karışım, InteractsWithMingles özelliğini kullanan bir Livewire bileşeni, bir yapıştırıcı JavaScript dosyası ve ön uç bileşen dosyasını içerir. Mingle bileşeninin React kullanıldığında nasıl görünebileceğine dair bir örnek:

// resources/js/ChatApp/index.js
import mingle from '@mingle/mingleReact'
import ChatApp from './ChatApp.jsx'
 
mingle('resources/js/ChatApp/index.js', ChatApp)
 
// resources/js/ChatApp/ChatApp.jsx
import React from 'react'
 
function ChatApp({wire, ...props}) {
 
    const message = props.mingleData.message
 
    console.log(message) // 'Message in a bottle '
 
    wire.doubleIt(2)
        .then(data => {
            console.log(data) // 4
        })
 
    return (
        <div>
            {/* <!-- Create something great! --> */}
        </div>
    )
}
 
export default ChatApp

Daha fazla bilgi edin

MingleJS'yi kullanmaya başlamak için MingleJS belgelerine gidin. MingleJS'nin yazarı aynı zamanda açık kaynaklı bir MingleJS demo uygulaması ve canınızı sıkmak istiyorsanız canlı bir demo da sağladı.

MingleJS Demo

MingleJS Demo Deneyin - https://minglejs-demo.unitedbycode.com
Laravel Livewire projesinde JS bileşenlerinin örnek kullanımı - https://github.com/ijpatricio/minglejs-demo

Kaynaklar:

Use Vue or React Components in a Livewire App with MingleJS - https://laravel-news.com/minglejs-vue-and-react-components-in-livewire
MingleJS - https://minglejs.unitedbycode.com
MingleJS Demo - https://minglejs-demo.unitedbycode.com
minglejs-demo - https://github.com/ijpatricio/minglejs-demo

Youtube Videoları

What is MingleJS? - https://www.youtube.com/watch?v=SVFTZcdWOsk
MingleJS - Utilizando Vue/React no Filament - https://www.youtube.com/watch?v=JeoLaOrHPDE