Laravel & React: Create a simple CRUD application

Tram Ho

This article is intended for those of you who are starting to learn how to use Laravel and React in combination. By making a CRUD app, you will understand the basic flow of operations. Start!

1. Backend:

1.1. Initialization

First, we use composer to initialize the project with the latest version of Laravel (here I am Laravel 8):

Move to the directory containing the project:

1.2. Config database

To connect the app to the database, we open the .env file and edit some information of DB_DATABASE, DB_USERNAME, DB_PASSWORD to match with our database.

1.3. Create Model, Controller and Route

Go to the database / migrations directory and open the newly created migration, edit the code as follows:

We just wrote migration to create Expense table, with the following fields: {contact table}

Run the migrate command to create the table in the database:

Migrate running successfully will display the following:

After the migration is successful, the Expense table will appear in the database. Next, we add routes to the routes / api.php file to connect with the Controllers. This file will then have the following content:

I am using Laravel 8, in this table session, the $ namespace property in RouteServiceProvider is set to null by default. Hence, there will be no prefix namespace implemented by Laravel. Defining the controller route (in routes / api.php file will be determined by the standard PHP syntax as follows:

However, I am used to using a prefix like Laravel 7.x, so I will add the $ namespace property to RouteServiceProvider (app / Providers / RouteServiceProvider.php) as follows:

Next, we define each action in the app / Http / Controllers / ExpenseController.php file

Next, we specify properties that can be mass-assignable by adding those properties to the $ fillable variable in the app / Models / Expense.php file:

That’s it, the back-end, now we run the application with the command php artisan serve , then open Postman to try it.

1.4. Test API using Postman

Since there is no data, we will call api http: // localhost: 8000 / api / account / with the POST method first.

Enter the API url and select the POST method. To pass the data into the API, choose Body -> x-www-form-urlencoded and add the fields (KEY) with the value (VALUE) of those fields.

The API will be called and stored these values ​​in the database. When successfully saved, the results will appear as follows:

Now that the database has data, we call API GET to get the data:

The output is the same as the data just written.

You can try with the rest of the APIs

2. Frontend

2.1. Initialization

Backend is done, now we have finished the frontend node, using ReactJS. Run the following command to create a scaffold for React:

Then compile assets with the following commands:

Next, we install some necessary dependencies:

2.2. Create components

Here we will create components and use axios to call the API, interacting with the backend. In the components directory, create the following 3 components:

  • create-expense.component.js
  • edit-expense.component.js
  • account-listing.component.js and a child component:
  • ExpenseTableRow.js

Next, enter the content for these files:

create-expense.component.js:

edit-expense.component.js:

ExpenseTableRow.js:

account-listing.component.js:

Create a landing page using the resources / js / app.js file:

Then, edit the body of the resources / views / welcome.blade.php file to connect to the app.js file via id “app”:

Then, we use the npm run watch command to run the front-end.

3. Achievements

We have both the Backend and the Frontend done. Now open http: // localhost: 8000 / up and see the result.

Here is the full code: https://github.com/dantokoro/laravel-react-crud.git Have a great time studying.

References:

  1. https://codesource.io/build-a-crud-application-using-laravel-and-react/
  2. https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-1example.html
  3. https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-2example.html
  4. https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-3example.html
Share the news now

Source : Viblo