Technology

Laravel to React

artikel tentang merubah mental model dari laravel ke reactjs

(Updated: ) · 22 min read

Laravel → React: Mental Model untuk Developer PHP yang Ingin Beralih ke JavaScript

Bagi developer PHP, terutama yang sudah cukup lama menggunakan Laravel, berpindah ke ekosistem JavaScript seperti React sering terasa lebih sulit daripada yang sebenarnya.

Masalah utamanya biasanya bukan syntax.

Developer Laravel sebenarnya sudah mengenal banyak konsep yang juga digunakan dalam pengembangan aplikasi React: routing, component, dependency management, state, request API, middleware, validation, authentication, hingga separation of concerns.

Yang berbeda adalah mental model.

Laravel membuat banyak keputusan untuk kita. Struktur folder, lifecycle request, routing, controller, middleware, ORM, validation, hingga templating sudah memiliki pola yang cukup jelas.

React justru memberikan kebebasan yang jauh lebih besar.

Karena itu, cara terbaik untuk belajar React bagi developer Laravel bukan dengan memulai dari:

"Bagaimana cara menulis JavaScript?"

Tetapi dari pertanyaan:

"Konsep Laravel yang selama ini saya gunakan, padanannya di React apa?"

Artikel ini akan membahas transisi tersebut.

1. Hal Pertama yang Harus Dipahami: Laravel dan React Bukan Kompetitor Langsung

Kesalahan pertama yang cukup umum adalah membandingkan:

Laravel vs React

Padahal keduanya memiliki tanggung jawab yang berbeda.

Laravel adalah backend web framework.

React adalah UI library untuk membangun antarmuka aplikasi.

Secara sederhana:

Laravel
├── Routing
├── Controller
├── Middleware
├── Validation
├── Authentication
├── Database
├── ORM
├── Queue
├── API
└── Blade Rendering

Sementara React lebih fokus pada:

React
├── UI
├── Component
├── State
├── Event
├── Rendering
└── Interaction

Dalam arsitektur modern, Laravel dan React bahkan sering digunakan bersama.

Contohnya:

React
   ↓
HTTP Request
   ↓
Laravel API
   ↓
Service
   ↓
Eloquent
   ↓
PostgreSQL / MySQL

React menangani tampilan.

Laravel menangani business logic dan data.

Namun jika ingin menggunakan JavaScript secara full-stack, stack-nya biasanya menjadi seperti:

React / Next.js
      ↓
Node.js Runtime
      ↓
Database

Karena itu, developer Laravel sebaiknya jangan melihat React sebagai "Laravel versi JavaScript".

React lebih tepat dipahami sebagai pengganti sebagian tanggung jawab yang sebelumnya kita kerjakan menggunakan Blade.

2. Dari Blade ke React Component

Untuk developer Laravel, konsep React yang paling mudah dipahami adalah component.

Di Blade kita mungkin memiliki:

<x-button>
    Simpan
</x-button>

atau:

@include('components.button')

Di React:

<Button>Simpan</Button>

Component React pada dasarnya adalah fungsi.

function Button() {
    return <button>Simpan</button>;
}

Atau:

const Button = () => {
    return <button>Simpan</button>;
};

Jika di Laravel kita terbiasa memecah Blade menjadi:

views/
├── layouts/
├── components/
├── users/
├── orders/
└── dashboard/

Di React pola yang sama tetap berlaku.

Misalnya:

src/
├── components/
├── pages/
├── features/
├── layouts/
└── hooks/

Mental model-nya:

Blade Component
      ≈
React Component

Tetapi React Component memiliki kemampuan yang jauh lebih besar karena bukan hanya template.

Component bisa memiliki:

  • state
  • event
  • lifecycle
  • logic
  • request API
  • child component
  • reusable behavior

3. Props Mirip Parameter pada Blade Component

Misalnya di Blade:

<x-alert type="success">
    Data berhasil disimpan
</x-alert>

Di React:

<Alert type="success">
    Data berhasil disimpan
</Alert>

Component-nya:

function Alert({ type, children }) {
    return (
        <div className={`alert alert-${type}`}>
            {children}
        </div>
    );
}

props bisa kita bayangkan sebagai parameter yang dikirim ke component.

Mental model sederhananya:

Blade Component Attributes
           ≈
React Props

Jika menggunakan PHP class:

function alert($type, $message)
{
    // ...
}

React kurang lebih:

function Alert({ type, message }) {
    // ...
}

Props pada React sebaiknya dianggap read-only.

Parent memberikan data kepada child.

Parent Component
       ↓
      Props
       ↓
Child Component

4. Perubahan Terbesar: Memahami State

Inilah konsep yang biasanya membutuhkan sedikit penyesuaian bagi developer Laravel.

Pada aplikasi Laravel tradisional:

User klik tombol
      ↓
Browser mengirim request
      ↓
Laravel Controller
      ↓
Database
      ↓
Blade dirender ulang
      ↓
HTML baru dikirim

Setiap interaksi besar biasanya menghasilkan request baru.

Di React, banyak interaksi terjadi tanpa reload halaman.

Contoh:

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            {count}
        </button>
    );
}

count disebut state.

Ketika state berubah:

State berubah
     ↓
React melakukan render ulang
     ↓
UI diperbarui

Tidak perlu reload halaman.

Tidak perlu request ke server.

Mental model pentingnya adalah:

UI = function(state)

Artinya tampilan adalah representasi dari state saat ini.

Misalnya:

const [isLoading, setIsLoading] = useState(false);

Kemudian:

return (
    <>
        {isLoading ? "Loading..." : "Simpan"}
    </>
);

Jika:

isLoading = true

UI menampilkan:

Loading...

Jika:

isLoading = false

UI menampilkan:

Simpan

Cara berpikir ini sangat fundamental dalam React.

5. Dari Controller ke Event Handler

Di Laravel:

Route::post('/users', [UserController::class, 'store']);

Controller:

public function store(Request $request)
{
    User::create($request->all());

    return redirect()->back();
}

Dalam React, interaksi UI biasanya dimulai dari event handler.

function UserForm() {

    const handleSubmit = () => {
        console.log("form submitted");
    };

    return (
        <button onClick={handleSubmit}>
            Simpan
        </button>
    );
}

Tetapi React tidak menggantikan controller backend.

Biasanya:

React Event Handler
       ↓
API Request
       ↓
Laravel Controller

Contohnya:

async function handleSubmit() {
    await fetch('/api/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: 'Gugun'
        })
    });
}

Laravel:

public function store(Request $request)
{
    $user = User::create(
        $request->validated()
    );

    return response()->json($user);
}

Jadi konsepnya bukan:

Controller Laravel → diganti React

Tetapi:

UI Event
    ↓
React Handler
    ↓
HTTP Request
    ↓
Laravel Controller

6. Dari Form Submit ke Controlled Form

Di Blade:

<form method="POST" action="/users">
    <input name="name">

    <button type="submit">
        Simpan
    </button>
</form>

Browser menangani banyak hal secara otomatis.

Di React biasanya kita mengendalikan nilai input menggunakan state.

function UserForm() {

    const [name, setName] = useState('');

    const handleSubmit = async (event) => {
        event.preventDefault();

        await fetch('/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name
            })
        });
    };

    return (
        <form onSubmit={handleSubmit}>

            <input
                value={name}
                onChange={(event) =>
                    setName(event.target.value)
                }
            />

            <button type="submit">
                Simpan
            </button>

        </form>
    );
}

Perhatikan:

value={name}

dan:

onChange={(event) => setName(event.target.value)}

State menjadi single source of truth.

Input
  ↓
onChange
  ↓
State
  ↓
UI

Pola ini akan sering ditemukan dalam aplikasi React.

7. Routing: Laravel Route vs React Router

Laravel developer pasti familiar dengan:

Route::get('/users', ...);

Route::get('/users/{id}', ...);

React SPA juga memiliki konsep routing.

Misalnya menggunakan React Router:

<Route path="/users" element={<UserList />} />

<Route path="/users/:id" element={<UserDetail />} />

Secara konsep:

Laravel Route
      ≈
React Router

Tetapi lifecycle-nya berbeda.

Laravel:

URL
 ↓
HTTP Request
 ↓
Laravel Router
 ↓
Controller
 ↓
HTML

React SPA:

URL berubah
 ↓
React Router
 ↓
Component berubah
 ↓
UI dirender

Tidak selalu ada request HTML baru ke server.

8. Dari $request ke State dan API

Laravel developer terbiasa dengan:

$request->name
$request->email
$request->password

Di React data tersebut biasanya berasal dari state:

const [form, setForm] = useState({
    name: '',
    email: '',
    password: ''
});

Kemudian dikirim ke server:

await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(form)
});

Laravel kemudian tetap membaca:

$request->name;
$request->email;
$request->password;

Jadi data flow-nya:

React State

{
    name,
    email,
    password
}

       ↓ JSON

Laravel Request

$request->name
$request->email
$request->password

Ini adalah jembatan penting antara frontend React dan backend Laravel.

9. Dari Eloquent ke API Data

Developer Laravel sangat terbiasa dengan:

$users = User::all();

Di Blade:

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

Jika menggunakan React, Laravel biasanya mengembalikan JSON.

return response()->json(
    User::all()
);

React kemudian mengambil datanya.

const [users, setUsers] = useState([]);

useEffect(() => {

    fetch('/api/users')
        .then(response => response.json())
        .then(data => setUsers(data));

}, []);

Render:

return (
    <ul>

        {users.map(user => (
            <li key={user.id}>
                {user.name}
            </li>
        ))}

    </ul>
);

Mental mapping-nya:

@foreach
   ↓
array.map()

Blade:

@foreach ($users as $user)

React:

users.map(user => ...)

Conditional Blade:

@if ($user->active)

React:

{user.active && (
    <span>Active</span>
)}

10. Blade Directive vs JSX

Developer Laravel biasanya membutuhkan sedikit waktu untuk terbiasa dengan JSX.

Contoh Blade:

<h1>{{ $user->name }}</h1>

React:

<h1>{user.name}</h1>

Blade:

@if ($user->active)

    Active

@endif

React:

{user.active && (
    <span>Active</span>
)}

Blade:

@foreach ($users as $user)

    <div>
        {{ $user->name }}
    </div>

@endforeach

React:

{users.map(user => (

    <div key={user.id}>
        {user.name}
    </div>

))}

Jika sudah terbiasa dengan Blade, sebenarnya JSX cukup mudah dipahami.

Perbedaannya adalah JSX memungkinkan JavaScript hidup langsung di dalam struktur UI.

11. Composer vs NPM

Laravel developer sangat familiar dengan:

composer install

dan:

composer require laravel/sanctum

Di JavaScript ecosystem, analoginya adalah:

npm install

atau:

pnpm install

Menambahkan package:

npm install axios

atau:

pnpm add axios

Mental mapping:

Composer
   ≈
NPM / PNPM

composer.json
   ≈
package.json

vendor/
   ≈
node_modules/

Contoh package.json:

{
    "dependencies": {
        "react": "...",
        "react-dom": "...",
        "axios": "..."
    }
}

Mirip dengan:

{
    "require": {
        "laravel/framework": "...",
        "laravel/sanctum": "..."
    }
}

12. Artisan vs NPM Scripts

Laravel:

php artisan serve

React/Vite:

npm run dev

Laravel:

php artisan test

JavaScript project:

npm run test

Konfigurasi command biasanya berada pada:

{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "test": "vitest"
    }
}

Jadi:

Artisan Command
       ≈
NPM Script

Walaupun secara arsitektur keduanya tidak sepenuhnya sama.

13. Service Container vs Module Import

Laravel memiliki dependency injection:

public function __construct(
    UserService $userService
) {
    $this->userService = $userService;
}

JavaScript banyak menggunakan module import:

import { userService } from './services/userService';

Kemudian:

userService.getUsers();

JavaScript modern sangat bergantung pada:

import

dan:

export

Contohnya:

export function getUsers() {
    // ...
}

Di file lain:

import { getUsers } from './users';

Bagi developer PHP, konsep ini tidak asing jika sudah terbiasa menggunakan:

use App\Services\UserService;

14. Namespace PHP vs JavaScript Modules

PHP:

namespace App\Services;

class UserService
{
}

Kemudian:

use App\Services\UserService;

JavaScript:

export class UserService {

}

Kemudian:

import { UserService }
from './services/UserService';

Mental model:

PHP Namespace
      ≈
JavaScript Module

Walaupun implementasi dan mekanismenya berbeda.

15. Middleware Tetap Berada di Backend

Developer Laravel jangan terburu-buru mencoba memindahkan seluruh konsep middleware ke React.

Laravel:

Route::middleware('auth')->group(function () {

});

Middleware merupakan bagian dari keamanan backend.

React bisa melakukan:

if (!user) {
    return <Navigate to="/login" />;
}

Tetapi ini hanya UX protection.

Bukan security.

User tetap bisa memanggil API menggunakan:

curl

atau Postman.

Karena itu authorization tetap harus dilakukan di server.

React
│
├── Hide menu
├── Redirect user
└── Disable button

Laravel
│
├── Authentication
├── Authorization
├── Policy
└── Permission enforcement

Prinsip penting:

Frontend boleh menentukan apa yang terlihat oleh pengguna, tetapi backend harus menentukan apa yang boleh dilakukan pengguna.

16. Dari Session-Based App ke API-Based Application

Laravel tradisional sering menggunakan:

Browser
   ↓
Laravel Session
   ↓
Blade

Saat menggunakan React, arsitektur sering berubah menjadi:

React
   ↓
API
   ↓
Laravel
   ↓
Database

Authentication bisa menggunakan:

Session Cookie
Sanctum
OAuth
OIDC
JWT

Untuk aplikasi React + Laravel dalam first-party application, cookie-based authentication seperti Laravel Sanctum sering menjadi pilihan yang nyaman.

Yang berubah bukan hanya teknologi.

Boundary aplikasi menjadi lebih jelas.

Frontend

Presentation
Interaction
State UI

────────────── API ──────────────

Backend

Authentication
Authorization
Business Logic
Database
Validation

17. Validation: Jangan Memilih Frontend atau Backend

Laravel:

$request->validate([
    'name' => ['required'],
    'email' => ['required', 'email']
]);

React juga bisa melakukan validation.

Misalnya:

if (!name) {
    setError('Nama wajib diisi');
}

Tetapi frontend validation tidak menggantikan backend validation.

Gunakan keduanya.

Frontend Validation
        ↓
Better User Experience

Backend Validation
        ↓
Data Integrity + Security

React:

"Email tidak valid"

Laravel:

"Request ini memang tidak boleh masuk"

18. Konsep yang Paling Penting: Data Flow

Developer Laravel biasanya berpikir dalam request lifecycle.

Request
  ↓
Route
  ↓
Middleware
  ↓
Controller
  ↓
Service
  ↓
Model
  ↓
Response

Developer React harus terbiasa berpikir dalam data flow.

State
 ↓
Component
 ↓
UI
 ↓
User Action
 ↓
Event
 ↓
State berubah
 ↓
UI berubah

Contohnya:

products = []

React menampilkan:

Loading...

API selesai:

products = [
  Product A,
  Product B
]

React kemudian menampilkan:

Product A
Product B

Tidak ada command khusus:

refreshUI();

Kita cukup mengubah state.

React yang melakukan sinkronisasi UI.

19. useEffect: Konsep yang Sering Membingungkan Developer Backend

Misalnya component pertama kali tampil dan kita ingin mengambil data.

useEffect(() => {

    fetchUsers();

}, []);

Secara sederhana bisa dibaca:

Setelah component tampil, jalankan fetchUsers().

Tetapi jangan berpikir bahwa useEffect adalah:

Controller

atau:

Middleware

useEffect digunakan untuk melakukan sinkronisasi dengan sesuatu di luar proses render React.

Misalnya:

  • request API
  • browser event
  • timer
  • third-party library
  • external subscription

Contoh:

useEffect(() => {

    document.title = `Users: ${users.length}`;

}, [users]);

Setiap users berubah:

users berubah
      ↓
effect dijalankan

Namun developer React modern sebaiknya tidak menggunakan useEffect untuk semua logic.

Gunakan hanya ketika memang berhubungan dengan external system atau synchronization.

20. Salah Satu Perubahan Besar: Server State vs Client State

Pada awal belajar React, developer sering memasukkan semua data ke:

useState()

Padahal ada dua jenis state yang perlu dibedakan.

Client State

State yang hanya berkaitan dengan UI.

Contoh:

Sidebar open?
Modal open?
Selected tab?
Dark mode?

Gunakan:

useState()

atau state manager jika kompleks.

Server State

Data yang berasal dari backend.

Contohnya:

users
orders
products
invoices
customers

Untuk data seperti ini, aplikasi modern biasanya menggunakan tools seperti TanStack Query.

Contoh:

const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: getUsers
});

TanStack Query mengurus:

  • loading
  • cache
  • refetch
  • retry
  • stale data
  • synchronization

Ini mirip memiliki layer yang khusus mengatur hubungan frontend dengan API.

21. React Bukan Tentang Redux

Beberapa developer yang pertama kali belajar React menemukan tutorial seperti:

React
+
Redux
+
Redux Saga
+
Reselect
+
Axios

Kemudian menganggap React sangat kompleks.

Padahal aplikasi modern tidak harus dimulai dari Redux.

Mulailah dari:

React
↓
useState
↓
Props
↓
TanStack Query

Baru tambahkan global state jika memang dibutuhkan.

Misalnya:

Zustand
Redux Toolkit
Jotai

Untuk banyak aplikasi bisnis, kombinasi:

React
+
TanStack Query
+
Zustand

sudah sangat nyaman.

22. Struktur Project React untuk Developer Laravel

Developer Laravel biasanya menyukai struktur project yang predictable.

Struktur feature-based cukup mudah dipahami:

src/
│
├── components/
│   ├── Button.jsx
│   ├── Modal.jsx
│   └── Input.jsx
│
├── features/
│   │
│   ├── users/
│   │   ├── api/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── pages/
│   │
│   └── orders/
│       ├── api/
│       ├── components/
│       ├── hooks/
│       └── pages/
│
├── layouts/
│
├── lib/
│
├── routes/
│
└── app.jsx

Jika dibandingkan Laravel:

Laravel

app/
├── Http/
├── Models/
├── Services/
└── Policies/

resources/
└── views/

routes/

React lebih bebas.

Namun semakin besar aplikasi, semakin penting kita membuat convention sendiri.

23. Contoh Arsitektur Laravel + React

Misalnya kita membangun aplikasi laundry.

Backend:

Laravel

POST /api/orders
GET  /api/orders
GET  /api/orders/{id}
PUT  /api/orders/{id}

React:

pages/
├── OrderList.jsx
├── OrderDetail.jsx
└── OrderCreate.jsx

Request API:

export async function getOrders() {

    const response =
        await fetch('/api/orders');

    return response.json();
}

Query:

function OrderList() {

    const {
        data: orders,
        isLoading
    } = useQuery({
        queryKey: ['orders'],
        queryFn: getOrders
    });

    if (isLoading) {
        return <div>Loading...</div>;
    }

    return (
        <div>

            {orders.map(order => (

                <OrderCard
                    key={order.id}
                    order={order}
                />

            ))}

        </div>
    );
}

Laravel tetap menangani:

OrderController
OrderService
OrderPolicy
Order Model
Database Transaction

React menangani:

Order List
Order Form
Order Detail
Modal
Loading
Notification
Interaction

Boundary-nya menjadi sangat jelas.

24. Mapping Laravel ke React Ecosystem

Untuk mempermudah transisi, berikut mental mapping yang bisa digunakan:

Laravel / PHP React / JavaScript
Blade JSX
Blade Component React Component
Component Attribute Props
PHP Variable let / const
Array Array / Object
@foreach .map()
@if conditional expression
Composer NPM / PNPM
composer.json package.json
vendor node_modules
PHP Namespace ES Module
use App\... import ...
Blade Form React Form
Session UI State React State
Laravel Route React Router, untuk client-side routing
HTTP Client fetch / Axios
Backend Collection JavaScript Array
Controller response JSON API data
Queue/Event backend Tetap backend
Eloquent Tetap backend / ORM JavaScript jika pindah full-stack
Laravel Validation Backend validation
React Form Validation Frontend validation
Redis Cache Tetap server infrastructure

Tabel tersebut bukan mapping satu-ke-satu secara teknis.

Tujuannya adalah membantu membangun mental model.

25. JavaScript yang Harus Dikuasai Sebelum React

Developer PHP tidak perlu menguasai seluruh JavaScript sebelum mulai React.

Tetapi ada beberapa konsep yang wajib nyaman digunakan.

const dan let

const name = 'Gugun';

let count = 0;

count++;

Biasanya gunakan const sebagai default.

Gunakan let ketika nilainya memang perlu direassign.

Object

PHP:

$user = [
    'name' => 'Gugun',
    'email' => 'gugun@example.com'
];

JavaScript:

const user = {
    name: 'Gugun',
    email: 'gugun@example.com'
};

Mengaksesnya:

user.name

Array

PHP:

$users = [
    'Andi',
    'Budi',
    'Citra'
];

JavaScript:

const users = [
    'Andi',
    'Budi',
    'Citra'
];

map

const users = [
    { id: 1, name: 'Andi' },
    { id: 2, name: 'Budi' }
];

const names = users.map(
    user => user.name
);

React sangat sering menggunakan map().

Destructuring

const user = {
    name: 'Gugun',
    email: 'gugun@example.com'
};

const {
    name,
    email
} = user;

Daripada:

const name = user.name;
const email = user.email;

React menggunakan destructuring hampir di mana-mana.

Spread Operator

const user = {
    name: 'Gugun',
    email: 'gugun@example.com'
};

Update:

const updatedUser = {
    ...user,
    name: 'Gugun M'
};

Hasilnya:

{
    name: 'Gugun M',
    email: 'gugun@example.com'
}

Konsep ini sangat penting untuk state React.

Arrow Function

PHP:

function ($user) {
    return $user['name'];
}

JavaScript:

(user) => {
    return user.name;
}

Bisa dipersingkat:

user => user.name

Async/Await

PHP:

$response = $client->get('/users');

JavaScript:

const response =
    await fetch('/api/users');

const users =
    await response.json();

Frontend hampir selalu melakukan operasi asynchronous.

Karena itu Promise, async, dan await wajib dipahami.

26. Jangan Membawa Semua Kebiasaan Laravel ke React

Kesalahan umum saat berpindah teknologi adalah mencoba membuat teknologi baru terlihat persis seperti teknologi lama.

Contohnya membuat struktur:

controllers/
models/
services/
views/

di React hanya karena Laravel memiliki struktur tersebut.

React memiliki mental model berbeda.

React lebih cocok berpikir berdasarkan:

Feature
↓
Component
↓
State
↓
Data
↓
Interaction

Misalnya:

features/
└── orders/
    ├── OrderList.jsx
    ├── OrderForm.jsx
    ├── OrderDetail.jsx
    ├── order.api.js
    └── order.hooks.js

Daripada memaksakan MVC frontend.

27. React Mengubah Cara Kita Melihat UI

Di jQuery atau Blade tradisional, kita sering berpikir:

$("#loading").show();

$("#button").hide();

$("#result").html(data);

Artinya kita memberi perintah kepada DOM:

tampilkan ini
sembunyikan itu
ubah text ini

React berbeda.

Kita tidak mengatakan:

sembunyikan loading

Kita mengatakan:

isLoading = false

Kemudian React menghitung bagaimana UI seharusnya terlihat.

Contoh:

return (
    <>
        {isLoading && (
            <Loading />
        )}

        {!isLoading && (
            <UserList />
        )}
    </>
);

Ini disebut declarative UI.

Bukan:

Bagaimana cara mengubah UI?

Tetapi:

Dengan state saat ini, UI seharusnya terlihat seperti apa?

Perubahan mental model ini adalah salah satu hal paling penting ketika belajar React.

28. Laravel Developer Justru Memiliki Banyak Keuntungan

Developer Laravel sebenarnya memiliki fondasi yang sangat kuat untuk masuk ke React.

Anda sudah mengerti:

  • routing
  • HTTP
  • REST API
  • authentication
  • authorization
  • database
  • validation
  • separation of concerns
  • design pattern
  • dependency management
  • testing
  • application architecture

Sehingga yang perlu dipelajari bukan lagi:

"Bagaimana aplikasi web bekerja?"

Tetapi:

"Bagaimana browser-side application bekerja?"

Ini jauh lebih mudah daripada belajar web development dari nol.

29. Learning Path yang Disarankan

Tidak perlu belajar seluruh JavaScript ecosystem sekaligus.

Gunakan urutan berikut.

Tahap 1 — JavaScript Fundamental

Kuasai:

const / let
array
object
function
arrow function
map
filter
find
destructuring
spread operator
module import/export
Promise
async/await

Jangan langsung masuk Redux.

Tahap 2 — React Fundamental

Pelajari:

Component
JSX
Props
State
Event
Conditional rendering
List rendering
Form
useState
useEffect

Targetnya adalah bisa membuat:

CRUD sederhana

Tahap 3 — React + Laravel API

Buat project:

Laravel REST API
       +
React Frontend

Contohnya:

Employee Management
Inventory
Todo App
Expense Tracker
Order Management

Implementasikan:

Login
CRUD
Pagination
Search
Validation
Authorization

Tahap 4 — Server State

Pelajari:

TanStack Query

Pahami:

query
mutation
cache
invalidate
loading
error
refetch

Ini akan mengubah cara kita mengelola data API.

Tahap 5 — Routing

Gunakan:

React Router

Pelajari:

nested route
layout
route parameter
protected route

Tahap 6 — State Management

Baru setelah benar-benar dibutuhkan, pelajari:

Zustand

atau:

Redux Toolkit

Jangan memasukkan semua state ke global state.

Tahap 7 — TypeScript

Setelah cukup nyaman dengan JavaScript dan React, masuk ke TypeScript.

Contoh:

type User = {
    id: number;
    name: string;
    email: string;
};

Kemudian:

function UserCard({
    user
}: {
    user: User
}) {
    return (
        <div>
            {user.name}
        </div>
    );
}

Untuk aplikasi skala besar, TypeScript sangat membantu.

Developer PHP yang pernah menggunakan strict typing biasanya relatif cepat beradaptasi.

30. Bagaimana Jika Ingin Pindah Full JavaScript?

Jika tujuan akhirnya bukan sekadar React, tetapi ingin berpindah dari Laravel menuju JavaScript full-stack, learning path-nya sebaiknya:

JavaScript
      ↓
React
      ↓
TypeScript
      ↓
Node.js
      ↓
Next.js / Backend Framework
      ↓
ORM
      ↓
Database

Beberapa pilihan backend JavaScript:

Express
Fastify
NestJS
Hono
Next.js

Untuk developer Laravel, NestJS sering terasa familiar karena memiliki konsep seperti:

Controller
Service
Module
Guard
Interceptor
Dependency Injection

Sedangkan jika menginginkan framework ringan:

Hono

atau:

Fastify

bisa sangat menarik.

31. Laravel Developer Mungkin Lebih Nyaman Memulai dari Next.js

Ada satu hal menarik.

Bagi developer Laravel, terkadang Next.js lebih mudah dipahami daripada React SPA murni.

Karena Next.js memberikan struktur yang lebih opinionated.

React murni:

React
+
Router
+
Data fetching
+
Build tool
+
Architecture decision

Next.js menyediakan lebih banyak konvensi.

Contohnya:

app/
├── users/
│   ├── page.tsx
│   └── [id]/
│       └── page.tsx
│
└── layout.tsx

Developer Laravel bisa melihat kemiripannya dengan:

Route
+
Controller
+
View

Walaupun konsep implementasinya tetap berbeda.

Jika targetnya membangun aplikasi full-stack JavaScript modern, jalur:

Laravel
↓
JavaScript
↓
React
↓
Next.js

cukup natural.

32. Hal yang Tidak Perlu Ditinggalkan dari Laravel

Belajar React bukan berarti Laravel harus ditinggalkan.

Bahkan stack:

Laravel API
+
React

adalah kombinasi yang sangat solid.

Laravel sangat kuat pada:

Authentication
Authorization
Queue
Scheduling
Eloquent
Database migration
Validation
Email
Notification
Business Logic
API

React sangat kuat pada:

Interactive UI
Complex form
Dashboard
SPA
Dynamic interface
Reusable components
Frontend state

Tidak ada kewajiban memilih salah satu.

Gunakan teknologi berdasarkan problem yang ingin diselesaikan.

33. Cara Berpikir Sebelum dan Sesudah React

Developer Laravel tradisional mungkin berpikir:

Route apa?

Controller mana?

Data apa yang dikirim ke Blade?

View mana?

Setelah masuk React, tambahkan pertanyaan:

Apa component-nya?

Siapa pemilik state?

Data berasal dari mana?

Apakah data ini client state atau server state?

Apa yang menyebabkan component berubah?

Apa yang terjadi ketika user berinteraksi?

Inilah perubahan terbesar.

Bukan syntax.

Bukan PHP menjadi JavaScript.

Tetapi perubahan dari:

Request-oriented thinking

menjadi kombinasi:

Request-oriented thinking
+
State-oriented thinking
+
Component-oriented thinking

34. Kesimpulan

Bagi developer Laravel, pindah ke React sebenarnya tidak berarti memulai lagi dari nol.

Sebagian besar konsep fundamental software engineering tetap sama.

Yang berubah adalah layer tempat kita bekerja dan cara kita memandang UI.

Jika Laravel mengajarkan kita berpikir:

Request
↓
Controller
↓
Business Logic
↓
Database
↓
Response

React mengajarkan kita berpikir:

State
↓
Component
↓
UI
↓
Interaction
↓
State berubah

Ketika kedua mental model tersebut sudah dipahami, kita bisa melihat web application secara jauh lebih lengkap:

USER
                     │
                     ↓
              React Component
                     │
                  State
                     │
                 API Call
                     │
                     ↓
              Laravel Route
                     │
                Middleware
                     │
               Controller
                     │
                 Service
                     │
                 Eloquent
                     │
                     ↓
                 Database

Developer Laravel sebenarnya sudah menguasai setengah dari diagram tersebut.

Yang perlu dilakukan hanyalah mempelajari bagian di atas HTTP request: bagaimana browser mengelola state, component, event, dan rendering.

Karena itu, jangan memulai perjalanan belajar React dengan pertanyaan:

"Bagaimana caranya meninggalkan PHP?"

Mulailah dengan:

"Bagaimana cara melengkapi kemampuan backend saya dengan pemahaman frontend modern?"

Ketika pola pikir tersebut sudah terbentuk, perpindahan dari Laravel ke React tidak lagi terasa seperti berpindah dunia.

Kita hanya sedang melihat aplikasi web yang sama dari sisi yang berbeda.

Share this article

Twitter/X LinkedIn