Налаштування React з Vite у Laravel - javascript.org.ua

Laravel надає потужну екосистему для розробки повного стеку, і з введенням Vite інтеграція фронтенд-фреймворків, таких як React, стала більш ефективною. У цьому посібнику ми розглянемо процес налаштування React в проекті Laravel з використанням Vite.

Пререквізити

Перед тим як почати, переконайтеся, що у вас встановлено наступне:

Node.js
Composer
Laravel 10 або новішу версію

Крок 1: Встановлення Laravel

Якщо у вас ще немає проекту Laravel, створіть новий:

composer create-project laravel/laravel laravel-react  
cd laravel-react

Крок 2: Встановлення Laravel Breeze з підтримкою React

Laravel Breeze надає зручний спосіб налаштування автентифікації та фронтенд-структури. Ми встановимо його з підтримкою React:

composer require laravel/breeze --dev  
php artisan breeze:install react  
npm install && npm run dev

Це встановить необхідні залежності та налаштує Vite для роботи з React.

Крок 3: Встановлення додаткових залежностей

Встановіть React та React DOM вручну, якщо вони відсутні:

npm install react react-dom

Крок 4: Оновлення конфігурації Vite

Відкрийте файл vite.config.js і переконайтеся, що в ньому підключено плагін для React:

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(),  
 ],  
});

Крок 5: Створення компонента React

Перейдіть до resources/js і створіть новий компонент React:

resources/js/components/ExampleComponent.jsx

import React from 'react';

export default function ExampleComponent() {  
 return (  
   <div>Hello from React!</div>  
 );  
}

Крок 6: Оновлення `app.jsx`

Змініть файл resources/js/app.jsx, щоб підключити ваш компонент React:

import React from 'react';  
import ReactDOM from 'react-dom/client';  
import ExampleComponent from './components/ExampleComponent';

const rootElement = document.getElementById('app');  
if (rootElement) {  
  const root = ReactDOM.createRoot(rootElement);  
  root.render(<ExampleComponent />);  
}

Крок 7: Додавання Blade-шаблону

Створіть шаблон Blade, де буде рендеритись React:

resources/views/react.blade.php

@vite(['resources/js/app.jsx'])

Крок 8: Визначення маршруту

Відкрийте routes/web.php та додайте маршрут для Blade-шаблону:

use Illuminate\Support\Facades\Route;

Route::get('/react', function () {  
 return view('react');  
});

Крок 9: Запуск додатку

Запустіть сервер розробки:

php artisan serve

Запустіть Vite в окремому терміналі:

npm run dev

Тепер відкрийте браузер і перейдіть за адресою http://127.0.0.1:8000/react, ви повинні побачити "Hello from React!".

Висновок

Ви успішно інтегрували React з Laravel, використовуючи Vite! Це налаштування надає сучасний досвід розробки з гарячою заміною модулів (HMR), швидкими часами збірки та ефективним робочим процесом для створення фронтенд-додатків у Laravel.

Для подальших удосконалень подумайте про інтеграцію React Router, бібліотек управління станом або API-запитів через контролери Laravel. Щасливого кодування!

Перекладено з: Setting Up React with Vite in Laravel