Laravel как бэкенд и React Native как фронт для мобилок — идея здравая. На бумаге выглядит просто: Laravel даёт API, React Native показывает кнопочки. На деле же ты получаешь два проекта, два мира, и вечный бой с CORS, версиями Node и бесконечными багами на Android-эмуляторе.
Разработка мобильных приложений с Laravel и React Native — это не магия «одна кодовая база для всего». Это скорее два костыля, скрученные изолентой. С одной стороны, Laravel, где у тебя REST или GraphQL API. С другой — React Native, где всё всегда падает после обновления npm.
Если у тебя был опыт с фронтом и бэком, то всё норм. Если ты думаешь, что «оно само как-то заработает» — жди боли.
1. Laravel как бэкенд
Начинаешь с классики:
composer create-project --prefer-dist laravel/laravel laravel-react-native-example
Laravel будет твоим API-сервером. Тут всё просто: модели, контроллеры, routes/api.php. Самая скучная часть, но без неё никуда.
2. React Native как морда
Ставишь CLI (если npm не сдох по дороге):
npm install -g react-native-cli
react-native init ReactNativeApp
Вот тут начинается веселье: Android Studio весит как половина Windows, эмулятор глючит, Metro bundler жрёт память. В общем, готовься.
3. Настройка API в Laravel
Маршрут в routes/api.php:
Route::get('/data', 'DataController@index');
Контроллер:
php artisan make:controller DataController
И метод:
public function index()
{
return response()->json(['data' => 'Hello from Laravel!']);
}
На этом этапе всё будет выглядеть, как будто работает. Не обольщайся.
4. React Native достаёт данные
Тут или fetch, или axios:
fetch('http://127.0.0.1:8000/api/data')
.then(response => response.json())
.then(data => console.log(data));
И если ты на эмуляторе Android, то 127.0.0.1 — это не твой Laravel, а сам эмулятор. Привет, первая ловушка.
5. UI в React Native
Компоненты React Native просты как молоток:
import React from 'react';
import { View, Text } from 'react-native';
const App = () => (
<View>
<Text>Hello from React Native!</Text>
</View>
);
export default App;
На демо это смотрится мило. В реальном проекте у тебя будет миллион экранов, где половина стилей конфликтует, а вторая половина рендерится криво на Android 8.
6. Тестирование и отладка
Да, React Native даёт DevTools. Но готовься: половина времени уйдёт на ребилды и перезапуск Metro, потому что после каждого изменения проект обиделся и больше не запускается.
Заключение
Laravel + React Native — норм связка, если нужен быстрый кроссплатформенный мобильник. Но не строй иллюзий: это не «одна кодовая база для всего», а два проекта с разными головными болями.
Laravel — скучный, предсказуемый бэкенд. React Native — эмоциональная американская горка, где ты то радуешься, что код работает и на iOS, и на Android, то материшься из-за бага, который фиксится только шаманством с кэшем.
Хочешь реальный кроссплатформенный опыт? Готовься тратить время не на бизнес-логику, а на борьбу с инструментами.
0 комментариев