Jetstream dengan React dan Typescript: Cara Memulainya

Jetstream adalah aplikasi starterkit untuk Laravel yang menyediakan starting point untuk project laravel kita ke level selanjutnya.

Semenjak jetstream ini rilis, dia hanya menyediakan 2 stack yaitu Livewire dan Inertia.js dengan Vue. Tidak ada react, apalagi typescript. Nah, jika Anda pengguna React, maka yang Anda inginkan bukanlah jetstream, melainkan .

Salah satu fitur yang saya suka di dalam jetstream ini adalah, dia memakai laravel fortify sebagai auth api nya, fiturnya mirip dengan dengan laravel breeze, namun dia punya fitur yang tidak ada di breeze yaitu two factor auth.

Dalam artikel ini, kita akan coba menggunakan jetstream dengan react dan juga typescript. Pertama sekali, mari kita lakukan instalasi laravel nya.

laravel new jet-react --jet --stack=inertia

Jika kalian ingin menggunakan team, silakan buat flag --teams. Dan jika kalian ingin fitur serve side rendering, tambahkan flag --ssr. Jika perintah di atas kita enter, maka akan muncul pertanyaan yang kurang lebih seperti:

 Will your application use teams? (yes/no) [no]:
 > no

Untuk case ini, saya rasa tidak perlu team, jadi saya buat no. Setelah itu selesai, maka kita akan lakukan instalasi package laravel-jetstream-react yang itu dari Ozzie Neher.

cd jet-react

Kemudian install packagenya.

npx laravel-jetstream-react@latest install

Setelah itu, maka akan muncul warning yang kurang lebih bilang bahwa preset sudah ada, apakah kita ingin replace.

› Warning: This installer assumes a FRESH install of Laravel Jetstream using the Inertia + Vue option.
›Warning: This will overwrite multiple files in this project, do you wish to continue?
Continue? (y/n): y

Disini kita akan pilih y karena memang kita ingin replace vue dengan react ts. Jika semua baik-baik saja, maka output yang keluar adalah seperti:

Clearing node_modules
Removing vue dependencies
Installing dev dependencies
Installing dependencies
Running install again
Replacing vite.config.js
Creating tsconfig.json
Setting prettier config in package.json
Replacing .vue glob in tailwind.config.js
Replacing js folder
Replacing app.blade.php
Installation complete. Enjoy :)

Baik, sebelum kita memulainya, mari kita buat database dengan nama jet_react, atau Anda bisa menyuruh laravel yang membuatnya dengan menjalakan perintah php artisan migrate.

Setelah itu, maka sekarang semua yang extensi .vue atau .js akan berganti menjadi .tsx dan .ts. Untuk memulai project nya, silakan lakukan npm run dev pada terminal Anda.

Karena ini adalah typescript, jadi ada beberap file tambahan seperti useTypedPage dan juga useRoute. Sehingga ketika kita ingin menggunakannya, bisa dengan cara seperti:

import useTypedPage from '@/hooks/useTypedPage';

export default function YourComponent() {
    const { props } = useTypedPage<{ canViewThisPage: boolean; }>();

    // our custom type is hinted here as well 
    // as the inertia global props such as `user`
    const { canViewThisPage, user } = props;
}

Begitu juga ketika Anda menggunakan route nya.

import useRoute from '@/hooks/useRoute';

export default function YourComponent() {
    const route = useRoute();

    return <a href={route('login')}>Login</a>;
}

Package ini juga menyediakan komponen untuk confirm password, sehingga ketika kita butuh, kita bisa panggil componennya seperti:

import ConfirmsPassword from '@/Components/ConfirmsPassword';
import DangerButton from '@/Components/DangerButton';

export default function YourComponent() {
    function changeEmail() {
    // only gets called if the password has been verified
    }

    return (
    <ConfirmsPassword onConfirm={changeEmail}>
        <DangerButton>Delete account</DangerButton>
    </ConfirmsPassword>
    );
}

Anda bisa pelajari lebih lanjut terkait package ini disini, silakan buat pr jika Anda merasa ada yang kurang. Saya sendiri juga sudah berkontribusi di package ini, agar komunitas tetap menjadi besar.