DemianKost/Test.jsx

## app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

## app.jsx
import React from 'react'
import {createRoot} from 'react-dom/client' //here
import {createInertiaApp } from '@inertiajs/inertia-react'
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />) //and here
    },
})

## package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@inertiajs/inertia-react": "^0.8.1",
        "@inertiajs/react": "^1.0.0",
        "@vitejs/plugin-react": "^3.1.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

## Test.jsx
import React, { useState } from 'react';

const Test = () => {
    return (
        <h1>This is test component</h1>
    )
}

export default Test

## vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        react(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

## web.php
<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('Test');
});
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Laravel</title>
	@viteReactRefresh
	@vite(['resources/css/app.css', 'resources/js/app.jsx'])
	@inertiaHead
	</head>
	<body>
	@inertia
	</body>
	</html>
	import React from 'react'
	import {createRoot} from 'react-dom/client' //here
	import {createInertiaApp } from '@inertiajs/inertia-react'
	import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'

	createInertiaApp({
	resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/*/.jsx')),
	setup({ el, App, props }) {
	createRoot(el).render(<App {...props} />) //and here
	},
	})
	{
	"private": true,
	"scripts": {
	"dev": "vite",
	"build": "vite build"
	},
	"devDependencies": {
	"axios": "^1.1.2",
	"laravel-vite-plugin": "^0.7.2",
	"lodash": "^4.17.19",
	"postcss": "^8.1.14",
	"vite": "^4.0.0"
	},
	"dependencies": {
	"@inertiajs/inertia-react": "^0.8.1",
	"@inertiajs/react": "^1.0.0",
	"@vitejs/plugin-react": "^3.1.0",
	"react": "^18.2.0",
	"react-dom": "^18.2.0"
	}
	}
	import React, { useState } from 'react';

	const Test = () => {
	return (
	<h1>This is test component</h1>
	)
	}

	export default Test
	import { defineConfig } from 'vite';
	import laravel from 'laravel-vite-plugin';
	import react from '@vitejs/plugin-react';

	export default defineConfig({
	plugins: [
	react(),
	laravel({
	input: ['resources/css/app.css', 'resources/js/app.js'],
	refresh: true,
	}),
	],
	});
	<?php

	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	/*
	\|--------------------------------------------------------------------------
	\| Web Routes
	\|--------------------------------------------------------------------------
	\|
	\| Here is where you can register web routes for your application. These
	\| routes are loaded by the RouteServiceProvider within a group which
	\| contains the "web" middleware group. Now create something great!
	\|
	*/

	Route::get('/', function () {
	return Inertia::render('Test');
	});