Como listar registro do banco de dados com Laravel 11 e React
Neste tutorial, será apresentado como listar registros do banco de dados utilizando Laravel 11 + Breeze + React e como criar a paginação.
Primeiramente, será demonstrado como recuperar os registros do banco de dados com Laravel.
Em seguida, será explicado como criar a página para exibir a lista.
Por fim, será mostrado como implementar a paginação com Laravel.
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 enviar e-mail recuperar senha no Breeze e Laravel 11".
Criada a rota no arquivo "routes/web.php".
Route::get('/users', [UserController::class, 'index'])->name('users.index');Criado o método "index" na controller "app/Http/Controllers/UserController.php". O método é responsável em recuperar os registros do banco de dados e também carregar a view.
public function index(): Response
{
$users = User::paginate(2);
return Inertia::render('Users/UserIndex', ['users' => $users]);
}Criada a view com React no Laravel, em "resources/js/Pages/Users/UserIndex.js" para exibir os registros recuperados do banco de dados.
import Pagination from '@/Components/Pagination';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
export default function UserIndex({ auth, users }) {
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">Listar</h3>
<div className="flex space-x-4">
Cadastrar
</div>
</div>
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 tracking-wider">ID</th>
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 tracking-wider">Nome</th>
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 tracking-wider">E-mail</th>
<th className="px-6 py-3 text-center text-sm font-medium text-gray-500 tracking-wider">Ações</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
{users.data.map((user) => (
<tr key={user.id}>
<td className="px-6 py-2 text-sm text-gray-500 tracking-wider">
{user.id}
</td>
<td className="px-6 py-2 text-sm text-gray-500 tracking-wider">
{user.name}
</td>
<td className="px-6 py-2 text-sm text-gray-500 tracking-wider">
{user.email}
</td>
<td className="px-6 py-2 text-center text-sm text-gray-500 tracking-wider">
Visualizar Editar Apagar
</td>
</tr>
))}
</tbody>
</table>
{/* Paginação */}
<Pagination links={users.links} currentPage={users.current_page} />
</div>
</div>
</AuthenticatedLayout>
);
}
Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!