Como criar a página visualizar com Laravel 11 e React
Neste tutorial, será apresentado como criar a página de visualização com Laravel 11 + Breeze + React.
Primeiramente, será demonstrado como enviar o ID do registro na URL utilizando React.
Em seguida, será explicado como recuperar as informações do usuário no banco de dados com Laravel.
Por fim, será mostrado como implementar a página com Laravel, React e Breeze para visualizar os detalhes do usuário.
Download do código fonte desenvolvido na aula: Download
PlayList sobre Laravel 11 + Breeze + React 11: Acessar
Receber as aulas gratuitas do curso de Laravel: Acessar
Para começar, é utilizado como base o projeto da aula "Como listar registro do banco de dados com Laravel 11 e React".
Criada a rota no arquivo "routes/web.php".
Route::get('/user/{user}', [UserController::class, 'show'])->name('users.show');Criado o método "show" na controller "app/Http/Controllers/UserController.php". O método é responsável em recuperar as informações do registro do banco de dados e também carregar a view.
public function show(User $user): Response
{
// dd($user);
return Inertia::render('Users/UserShow', ['user' => $user]);
}Criada a view com React no Laravel, em "resources/js/Pages/Users/UserShow.js" para exibir as informações do registro recuperado do banco de dados.
import PrimaryButton from '@/Components/Button/PrimaryButton';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link } from '@inertiajs/react';
export default function UserIndex({ auth, user }) {
return (
<AuthenticatedLayout
user={auth.user}
header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Usuário</h2>}
>
<Head title="Usuário" />
<div className="py-4 max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="overflow-hidden bg-white shadow-lg sm:rounded-lg dark:bg-gray-800">
<div className="flex justify-between items-center m-4">
<h3 className="text-lg">Visualizar</h3>
<div className="flex space-x-4">
<Link href={route('users.index')}>
<PrimaryButton>Listar</PrimaryButton>
</Link>
</div>
</div>
{/* Imprimir os dados do usuário */}
<div className="bg-gray-50 text-sm dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div className="mb-4">
<p className="text-md font-semibold text-gray-700 dark:text-gray-200">ID</p>
<p className="text-gray-600 dark:text-gray-400">{user.id}</p>
</div>
<div className="mb-4">
<p className="text-md font-semibold text-gray-700 dark:text-gray-200">Nome</p>
<p className="text-gray-600 dark:text-gray-400">{user.name}</p>
</div>
<div className="mb-4">
<p className="text-md font-semibold text-gray-700 dark:text-gray-200">E-mail</p>
<p className="text-gray-600 dark:text-gray-400">{user.email}</p>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!