replace vuejs with reactjs with jetsream laravel setup. So you can use and create inertiajs laravel app with reactjs
composer create-project laravel/laravel example-app
cd example-app
composer require laravel/jetstreamphp artisan jetstream:install inertia{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@inertiajs/react": "^1.0.14",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.2",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.7",
"axios": "^1.6.1",
"laravel-vite-plugin": "^0.8.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.jsx',
refresh: true,
}),
react()],
})npm install[
import "./bootstrap";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
createInertiaApp({
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob("./Pages/**/*.jsx")
),
setup({ el, App, props, plugin }) {
createRoot(el)
.render(<App {...props} />);
},
progress: {
color: "#4B5563",
},
});import { Head } from '@inertiajs/react'
export default function Welcome() {
return (
<>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello welcome to your first <span style={{color:'green'}}>react-Inertia</span> and <span style={{color:'red'}}>jetstream laravel</span> app!</p>
<a href='https://www.linkedin.com/in/pkfan/'>created by pkfan [linkedin] </a>
</>
)
}<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@routes
@viteReactRefresh
@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>npm run dev
OR
npm run buildyou can check all jetstream link from (.vue) js files and then use those links in reactjs
e.g.
1) route.get('login',data)
2) <Link href='login' />
use these links in react to handle all jetstream (fortify) auth