React — это мощная библиотека для создания пользовательских интерфейсов, но для полноценного приложения часто требуется серверная часть, которая будет обрабатывать логику, хранить данные и предоставлять API. В этой статье мы рассмотрим, как подключить серверный фреймворк, такой как Laravel (PHP) или Django (Python), к проекту на React. Мы создадим простое приложение, где React будет фронтендом, а фреймворк — бэкендом. Статья подойдет для начинающих и тех, кто хочет быстро настроить связку.

Шаг 1. Настройка React-приложения

Если у вас еще нет React-проекта, создайте его с помощью create-react-app:

1. Установите Node.js, если он еще не установлен.
2. В терминале выполните:

   npx create-react-app my-app
   cd my-app
   npm start

3. Откройте браузер по адресу http://localhost:3000 — вы увидите стандартное React-приложение.

Это будет наш фронтенд. Теперь добавим серверную часть.

Шаг 2. Выбор и настройка серверного фреймворка

Мы рассмотрим два популярных фреймворка: Laravel и Django. Выберите один из них в зависимости от ваших предпочтений.

Вариант 1: Laravel (PHP)

1. Установка Laravel
   Убедитесь, что у вас установлен PHP и Composer. Выполните:

   composer create-project laravel/laravel backend
   cd backend
   php artisan serve

   Сервер запустится на http://localhost:8000.
2. Настройка API
   Создайте простой маршрут для API. Откройте файл routes/api.php и добавьте:

   <?php
   Route::get('/hello', function () {
       return response()->json(['message' => 'Привет от Laravel!']);
   });

   Проверьте: откройте http://localhost:8000/api/hello — вы увидите JSON-ответ.

Вариант 2: Django (Python)

1. Установка Django
   Убедитесь, что у вас установлен Python. Выполните:

   pip install django djangorestframework
   django-admin startproject backend
   cd backend
   python manage.py migrate
   python manage.py runserver

   Сервер запустится на http://localhost:8000.
2. Настройка API
   • Создайте приложение:

     python manage.py startapp api

   • В файле api/views.py добавьте:

     from rest_framework.decorators import api_view
     from rest_framework.response import Response
     
     @api_view(['GET'])
     def hello(request):
         return Response({'message': 'Привет от Django!'})

   • В файле backend/urls.py добавьте маршрут:

     from django.urls import path
     from api.views import hello
     
     urlpatterns = [
         path('api/hello/', hello),
     ]

   • Проверьте: откройте http://localhost:8000/api/hello — вы увидите JSON-ответ.

Шаг 3. Подключение React к бэкенду

Теперь свяжем фронтенд и бэкенд через API-запросы.

1. Установка Axios
   В React-проекте установите библиотеку для HTTP-запросов:

   npm install axios

2. Создание компонента
   Откройте src/App.js и замените его содержимое на:

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';
   
   function App() {
     const [message, setMessage] = useState('');
   
     useEffect(() => {
       // Замените URL на ваш сервер (Laravel: http://localhost:8000/api/hello, Django: http://localhost:8000/api/hello)
       axios.get('http://localhost:8000/api/hello')
         .then(response => {
           setMessage(response.data.message);
         })
         .catch(error => {
           console.error('Ошибка:', error);
         });
     }, []);
   
     return (
       <div>
         <h1>Сообщение от сервера:</h1>
         <p>{message}</p>
       </div>
     );
   }
   
   export default App;

3. Решение проблемы CORS
   • Для Laravel: Установите middleware или добавьте заголовки в app/Http/Kernel.php.
   • Для Django: Установите django-cors-headers:

     pip install django-cors-headers

     В settings.py добавьте:

     INSTALLED_APPS = [..., 'corsheaders']
     MIDDLEWARE = [..., 'corsheaders.middleware.CorsMiddleware']
     CORS_ALLOWED_ORIGINS = ['http://localhost:3000']

4. Запуск
   Убедитесь, что оба сервера работают:
   • React: npm start (на http://localhost:3000).
   • Laravel: php artisan serve или Django: python manage.py runserver.
   Откройте браузер — вы увидите сообщение от бэкенда.

Шаг 4. Тестирование и доработка

• Попробуйте добавить больше маршрутов на бэкенде (например, POST-запросы для отправки данных).
• На фронтенде создайте формы или кнопки для взаимодействия с API.
• Пример POST-запроса в React:

  const sendData = () => {
    axios.post('http://localhost:8000/api/send', { text: 'Привет!' })
      .then(response => console.log(response.data));
  };

Заключение

Теперь у вас есть базовая связка React с Laravel или Django! Вы можете расширять приложение, добавляя базу данных, авторизацию и сложные маршруты. Laravel и Django отлично подходят для API, а React — для динамичного интерфейса. Удачи в разработке!