Laravel and React.js Implementation on CRUD

Mirza Waleed

Mirza Waleed


As digital experiences increasingly shape customer relationships, building adaptable applications is imperative. Yet striking the right balance of flexibility, performance and maintainability poses an ongoing challenge.

This article outlines a framework for empowering success through reusable interfaces, responsive APIs and intuitive interactions when leveraging Laravel and React together. Without backstory, we’ll demonstrate patterns for elegant extensibility and measurable impact.

Whether enhancing existing solutions or architecting ambitious new ventures, apply these principles to streamline delivery of transformational experiences. Leverage the synergies of modern full-stack techniques, cultivated from years at the forefront, to command your market.

Clients demand agility, quality and speed. Equip yourselves to meet these needs by exploring how Laravel and React powerfully combine – a synergy that can strengthen any digital solution.

Setting Up the Project

First install Laravel using Composer:

composer create-project laravel/laravel crud-app

Then in the new directory, install Create React App:

npm install –save create-react-app

npx create-react-app client

Project Scaffolding

Set up the basic file structure:

- backend/ (Laravel API)

- app/

- routes/

- ...

- frontend/ (React app)

- src/

- public/

- ...

- docker-compose.yaml


This separates the API and frontend for cleaner development.

Creating the Data Model

Generate a migration to setup the items table:

php artisan make:migration create_items_table

Add id, name, description columns. Migrate the database.

Item Model

Define the Item model, fields, and validation rules:

// app/Models/Item.php

class Item extends Model


// ...

protected $fillable = ['name', 'description'];

public function rules() {

return [

'name' => 'required|max:255',

// etc





Item Controller

Scaffold an ItemController resource controller to handle API requests.

Building the API

Item Controller

Define RESTful actions like index(), show(), store(), etc. Interact with Item model.

// app/Http/Controllers/ItemController.php

class ItemController extends Controller {

public function index() {

return Item::all();


public function store() {

// validate, create, return


// other methods



API Routes

Configure API routes to the ItemController:

// routes/api.php

Route::apiResource('items', ItemController::class);


This lays the foundation for the backend before connecting frontend.

Connecting to the API with React

In the frontend directory, install dependencies:

npm install

Create src/setupProxy.js to proxy API requests to the backend:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {

app.use(proxy('/api', { target: 'http://localhost:8000' }))



Making API Requests with Axios

Install Axios:

npm install axios

Create a src/api/items.js file to make requests:

import axios from 'axios'

export const getItems = () => axios.get('/api/items')

export const addItem = item =>'/api/items', item)


Displaying Items

Create a component to fetch and display all items:

// ItemList.js

import { getItems } from '../api/items'

export default function ItemList() {

const [items, setItems] = useState([])

useEffect(() => {


}, [])

return <ul>{ => <li>{}</li>)}</ul>



ItemDetail Component

Receive an item id to display details:

// ItemDetail.js

export default function ItemDetail({id}) {

const [item, setItem] = useState({})

useEffect(() => {

// fetch item 

}, [id])

return <div>Details: {}</div> 



Adding Items

Render a form to create a new item:

// ItemCreate.js

export default function ItemCreate() {

const submit = async item => {

await addItem(item)


return (

<form onSubmit={submit}>

// form inputs





This connects the frontend to retrieve, display and modify data from the Laravel API.


Updating Items

The ItemEdit component receives an item via props:

// ItemEdit.js

export default function ItemEdit({item}) {

const [currentItem, setCurrentItem] = useState(item);

return (





onChange={e => setCurrentItem({...currentItem, name:})}


// other fields

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





Patch Request on Submit

On form submit, make a PATCH request to update the item:

const submit = async e => {


await axios.patch(`/api/items/${}`, currentItem);

// redirect or refresh data



Deleting Items

In ItemDetail, add a delete button that calls a handleDelete function:

export default function ItemDetail({ item }) {

const handleDelete = async () => {

// delete logic


return (


<button onClick={handleDelete}>Delete</button>





Delete Request Method

Make a DELETE request to remove the item:

const handleDelete = async () => {

try {

await axios.delete(`/api/items/${}`);

} catch (err) {



// refresh data



This allows full CRUD functionality via the React front-end and Laravel API.



php artisan make:migration create_users_table

Create a User model with required fields like name, email, password:

// app/Models/User.php

class User extends Authenticatable


use Notifiable;

//Fillable fields

protected $fillable = [

'name', 'email', 'password',


// Validation rules 

public function rules()


return [

'name' => 'required',

'email' => 'required|email|unique:users', 

'password' => 'required'





Register new users via the registration controller/view.


Build out LoginController methods and views for authentication. Return a token on login for future requests.

Protecting Routes

Add middleware to routes/controllers to check for authenticated users, ie:



Route::get('/dashboard', function(){




Styling and Deploying

Configure CSS Modules in React for component-scoped styles.

Deploy Scripts

Set up scripts to build & deploy frontend to public directory and deploy backend to server:

"deploy:frontend": "npm run build && cp -r build/* ../backend/public/",

"deploy:backend": "cd ../backend && php artisan deploy"


Deploying Frontend and Backend

Run deploy scripts to deploy both projects at once for easy updates.

This allows building full-stack CRUD apps with user authentication secured at the route level.


Creating full-stack applications that integrate powerful backend frameworks with flexible frontends is a very effective approach for building dynamic and well-architected solutions. This guide demonstrated how to leverage Laravel and React together to construct a complete and fully-featured CRUD application.

By separating concerns into coordinated frontend and backend halves, enormous gains in productivity and sustainability can be realized. Laravel’s robust feature set handles all API logic and database interactions cleanly. In parallel, React constructs intuitive interfaces entirely decoupled from these services. Both sides are able to progress independently yet integrate seamlessly.

This loose coupling not only accelerates delivery but fosters thriving ecosystems around each layer. Development zooms ahead as specialists contribute most value where expertise lies. Future enhancements emerge organically from a foundation designed for evolution rather than stagnation.

By standardizing authentication at the route level, a consistent authorization model prevails throughout. Users and roles regulate access consistently in every dimension. Security translates from policy to implementation without compromise.

Ready To Start Your Project