Dapatkan diskon up to 40% untuk pembelian di bulan Ramadhan.

Jetstream Dengan React Dan Typescript

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

3 min read

Published on 16 Nov, 2022 (updated: 19 Nov, 2022)

Written by Irsyad A. Panjaitan

Fill in LaravelPackage

ArticlesJetstream Dengan React Dan Typescript

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 Laravel breeze.

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
bashCopy

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
bashCopy

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
bashCopy

Kemudian install packagenya.

npx [email protected] install
bashCopy

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
bashCopy

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 :)
bashCopy

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

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

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> ); }
tsxCopy

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.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
1

Share on