
Building a React CRUD App with a Laravel API
CRUD operations are foundational to most web apps. In this guide, we’ll take you through the process of building a CRUD application with React on the client side and a Laravel API on the server side, illustrating how these technologies can be used to create a cohesive and responsive application.
Prerequisites
- Node.js
- Composer
- PHP 8.2
- MySQL
Setup React project
React project structure
React project files
main.jsx
The main.jsx
file is the entry point for a React app. It imports React, ReactDOM, and the App
component. The ReactDOM.createRoot
method is used to render the App
component into the HTML element with the ID root
.
App.jsx
The App.jsx
file sets up routing for a React app. The App
component wraps the application in a Router
using the custom history
, and renders the Route
component for handling routes.
history.js
The history.js
file exports a custom browser history object created with createBrowserHistory
for managing navigation in a React app.
router.jsx
The router.jsx
file sets up routing for a React app with lazy-loaded components. It uses Suspense
to handle loading status, and Switch
to define routes. The root path redirects to /product
, and specific routes handle product-related pages like create, detail, edit
, and delete
.
http.js
The http.js
file configures and exports an Axios instance with a centralized base URL, which is a standard practice for managing API endpoints and default headers set to application/json
.
Create.jsx
The create.jsx
file defines a ProductCreate
component for adding a new product. It uses useState
to manage form data, and handles form submission with create(e)
that sends data via Service.create
and redirects on success. The form includes fields for product name and price, with a cancel link and submit button.
Delete.jsx
The Delete.jsx
file defines a ProductDelete
component for deleting a product. It fetches product details using Service.delete
and displays them in a read-only form. The component uses useEffect
to load product data based on the product ID from the route parameters. The remove(e)
function handles deletion and redirects to /product
upon success.
Detail.jsx
The Detail.jsx
file defines a ProductDetail
component that displays details of a product. It fetches product data using Service.get
based on the product ID from the route parameters and displays it in a read-only form, and provides links to go back to the product list or to edit the product.
Edit.jsx
The Edit.jsx
file defines a ProductEdit
component for updating product details. It fetches the current product data using Service.edit
and populates a form with this data. The form allows users to modify the product's name and price. On form submission, the edit(e)
function updates the product via Service.edit
and redirects to the product list on success.
Index.jsx
The Index.jsx
file defines a ProductIndex
component that displays a list of products in a table. It fetches product data using Service.get
and updates the list on component mount. The table shows product ID, name, and price, with action buttons for viewing, editing, and deleting each product. It also includes a link to create a new product.
Service.js
The Service.js
file defines API methods for handling product operations. It uses an http
instance for making requests:
get(id)
Retrieves a single product by ID or all products if no ID is provided.create(data)
Creates a new product with the provided data or fetches the creation form if no data is provided.edit(id, data)
Updates a product by ID with the provided data or fetches the product details if no data is provided.delete(id, data)
Deletes a product by ID or fetches the product details if no data is provided.
style.css
The CSS adjusts the layout by adding space above the container and spacing out buttons horizontally.
index.html
The HTML serves as the main entry point for an React application, including Bootstrap for styling, Font Awesome for icons, It features a div
with the ID root
where the React app will render.
Setup Laravel API project
Create a testing database named "example" and execute the database.sql file to import the table and data.
Laravel API Project structure
*This project structure will display only the files and folders that we plan to create or modify.
Laravel API Project files
.env
This file is used for Laravel configuration, specifically to store the database connection details.
app.php
This file is a Laravel application configuration file where we have included the API routing setup.
api.php
This api.php
file sets up resourceful API routes for a Laravel application. It uses Route::resource
to automatically create routes for common CRUD operations (index, show, store, update, destroy
) for the /products
endpoint, all mapped to the corresponding methods in ProductController
.
Product.php
This product.php
file defines a Product
model in a Laravel application. It specifies that the model uses the Product
table, sets `id` as the primary key, and allows mass assignment for the `name` and `price` fields.
ProductController.php
The ProductController.php
file in a Laravel application defines methods for managing Product
resources:
index
Retrieves and returns all products.show
Fetches and returns a single product by its ID.store
Creates a new product using the data from the request.update
Updates an existing product with the data from the request.destroy
Deletes a product by its ID.
Run projects
Run React project
Run Laravel API project
Open the web browser and goto http://localhost:5173
You will find this product list page.

Testing
Click the "View" button to see the product details page.

Click the "Edit" button to modify the product and update its details.

Click the "Submit" button to save the updated product details.

Click the "Create" button to add a new product and input its details.

Click the "Submit" button to save the new product.

Click the "Delete" button to remove the previously created product.

Click the "Delete" button to confirm the removal of this product.

Conclusion
In conclusion, we have learned how to create a basic React project using JSX syntax to build views and routing, while connecting it to a Laravel API as the backend. By using Eloquent as the ORM for database operations, we've developed a dynamic front-end that integrates effectively with a powerful backend, providing a strong foundation for building modern, full-stack web applications.
Source code: https://github.com/stackpuz/Example-CRUD-React-18-Laravel-11
Create a React CRUD App in Minutes: https://stackpuz.com