Jetstream 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.

1laravel new jet-react --jet --stack=inertia
2
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:

1 Will your application use teams? (yes/no) [no]:
2 > no
3
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.

1cd jet-react
2
bashCopy

Kemudian install packagenya.

1npx [email protected] install
2
bashCopy

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

1› Warning: This installer assumes a FRESH install of Laravel Jetstream using the Inertia + Vue option.
2›Warning: This will overwrite multiple files in this project, do you wish to continue?
3Continue? (y/n): y
4
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:

1Clearing node_modules
2Removing vue dependencies
3Installing dev dependencies
4Installing dependencies
5Running install again
6Replacing vite.config.js
7Creating tsconfig.json
8Setting prettier config in package.json
9Replacing .vue glob in tailwind.config.js
10Replacing js folder
11Replacing app.blade.php
12Installation complete. Enjoy :)
13
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:

1import useTypedPage from '@/hooks/useTypedPage';
2
3export default function YourComponent() {
4    const { props } = useTypedPage<{ canViewThisPage: boolean; }>();
5
6    // our custom type is hinted here as well 
7    // as the inertia global props such as `user`
8    const { canViewThisPage, user } = props;
9}
10
tsxCopy

Begitu juga ketika Anda menggunakan route nya.

1import useRoute from '@/hooks/useRoute';
2
3export default function YourComponent() {
4    const route = useRoute();
5
6    return <a href={route('login')}>Login</a>;
7}
8
tsxCopy

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

1import ConfirmsPassword from '@/Components/ConfirmsPassword';
2import DangerButton from '@/Components/DangerButton';
3
4export default function YourComponent() {
5    function changeEmail() {
6    // only gets called if the password has been verified
7    }
8
9    return (
10    <ConfirmsPassword onConfirm={changeEmail}>
11        <DangerButton>Delete account</DangerButton>
12    </ConfirmsPassword>
13    );
14}
15
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.