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):
1 2 | composer create-project --prefer-dist laravel/laravel laravel-react-crud |
Move to the directory containing the project:
1 2 | cd laravel-react-crud |
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 2 3 4 5 6 7 | DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud DB_USERNAME=root DB_PASSWORD= |
1.3. Create Model, Controller and Route
1 2 | php artisan make:model Expense --migration --resource --controller |
Go to the database / migrations directory and open the newly created migration, edit the code as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token operator"><</span> <span class="token operator">?</span> php use IlluminateDatabaseMigrationsMigration <span class="token punctuation">;</span> use IlluminateDatabaseSchemaBlueprint <span class="token punctuation">;</span> use IlluminateSupportFacadesSchema <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">CreateExpensesTable</span> <span class="token keyword">extends</span> <span class="token class-name">Migration</span> <span class="token punctuation">{</span> <span class="token comment">/** * Run the migrations. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Schema <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token string">'expenses'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">Blueprint $table</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> $table <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">bigIncrements</span> <span class="token punctuation">(</span> <span class="token string">'id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $table <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token string">'name'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $table <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">text</span> <span class="token punctuation">(</span> <span class="token string">'description'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $table <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token string">'amount'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $table <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">timestamps</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Reverse the migrations. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">down</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Schema <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">dropIfExists</span> <span class="token punctuation">(</span> <span class="token string">'expenses'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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:
1 2 | php artisan migrate |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="token operator"><</span> <span class="token operator">?</span> php use IlluminateHttpRequest <span class="token punctuation">;</span> use IlluminateSupportFacadesRoute <span class="token punctuation">;</span> <span class="token comment">/* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | is assigned the "api" middleware group. Enjoy building your API! | */</span> Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">middleware</span> <span class="token punctuation">(</span> <span class="token string">'auth:api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token string">'/user'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">Request $request</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">user</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token string">'/expenses'</span> <span class="token punctuation">,</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token string">'expenses.all'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">post</span> <span class="token punctuation">(</span> <span class="token string">'/expenses'</span> <span class="token punctuation">,</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token string">'expenses.store'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token string">'/expenses/{expense}'</span> <span class="token punctuation">,</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token string">'expenses.show'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">put</span> <span class="token punctuation">(</span> <span class="token string">'/expenses/{expense}'</span> <span class="token punctuation">,</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token string">'expenses.update'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token keyword">delete</span> <span class="token punctuation">(</span> <span class="token string">'/expenses/{expense}'</span> <span class="token punctuation">,</span> <span class="token string">' <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> '</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token string">'expenses.destroy'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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:
1 2 | Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token string">'/expenses'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> ExpenseController <span class="token operator">:</span> <span class="token operator">:</span> <span class="token keyword">class</span> <span class="token punctuation">,</span> <span class="token string">'index'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> |
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:
1 2 3 4 5 | Route <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">prefix</span> <span class="token punctuation">(</span> <span class="token string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">middleware</span> <span class="token punctuation">(</span> <span class="token string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">namespace</span> <span class="token punctuation">(</span> <span class="token string">'AppHttpControllers'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">group</span> <span class="token punctuation">(</span> <span class="token function">base_path</span> <span class="token punctuation">(</span> <span class="token string">'routes/api.php'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Next, we define each action in the app / Http / Controllers / ExpenseController.php file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <span class="token keyword">class</span> <span class="token class-name">ExpenseController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span> <span class="token punctuation">{</span> <span class="token comment">/** * Display a listing of the resource. * * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> $expenses <span class="token operator">=</span> Expense <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">all</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">json</span> <span class="token punctuation">(</span> $expenses <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Store a newly created resource in storage. * * @param IlluminateHttpRequest $request * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span> <span class="token punctuation">(</span> <span class="token parameter">Request $request</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">validate</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">'name'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token punctuation">,</span> <span class="token string">'amount'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token punctuation">,</span> <span class="token string">'description'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token comment">//optional if you want this to be required</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $expense <span class="token operator">=</span> Expense <span class="token operator">:</span> <span class="token operator">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">all</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">'message'</span> <span class="token operator">=></span> <span class="token string">'expense created'</span> <span class="token punctuation">,</span> <span class="token string">'expense'</span> <span class="token operator">=></span> $expense <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Display the specified resource. * * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">show</span> <span class="token punctuation">(</span> <span class="token parameter">Expense $expense</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> $expense <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Show the form for editing the specified resource. * * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token comment">/** * Update the specified resource in storage. * * @param IlluminateHttpRequest $request * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">update</span> <span class="token punctuation">(</span> <span class="token parameter">Request $request <span class="token punctuation">,</span> Expense $expense</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">validate</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">'name'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token punctuation">,</span> <span class="token string">'amount'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token punctuation">,</span> <span class="token string">'description'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token comment">//optional if you want this to be required</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $expense <span class="token operator">-</span> <span class="token operator">></span> name <span class="token operator">=</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">name</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $expense <span class="token operator">-</span> <span class="token operator">></span> amount <span class="token operator">=</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">amount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $expense <span class="token operator">-</span> <span class="token operator">></span> description <span class="token operator">=</span> $request <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">description</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> $expense <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">save</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">'message'</span> <span class="token operator">=></span> <span class="token string">'expense updated!'</span> <span class="token punctuation">,</span> <span class="token string">'expense'</span> <span class="token operator">=></span> $expense <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Remove the specified resource from storage. * * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">destroy</span> <span class="token punctuation">(</span> <span class="token parameter">Expense $expense</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> $expense <span class="token operator">-</span> <span class="token operator">></span> <span class="token keyword">delete</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token string">'message'</span> <span class="token operator">=></span> <span class="token string">'expense deleted'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Next, we specify properties that can be mass-assignable by adding those properties to the $ fillable variable in the app / Models / Expense.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token operator"><</span> <span class="token operator">?</span> php namespace App <span class="token punctuation">;</span> use IlluminateDatabaseEloquentModel <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Product</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span> <span class="token punctuation">{</span> <span class="token comment">/** * The attributes that are mass assignable. * * @var array */</span> <span class="token keyword">protected</span> $fillable <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'name'</span> <span class="token punctuation">,</span> <span class="token string">'description'</span> <span class="token punctuation">,</span> <span class="token string">'amount'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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:
1 2 3 | composer require laravel/ui php artisan ui react |
Then compile assets with the following commands:
1 2 3 | npm install npm run dev |
Next, we install some necessary dependencies:
1 2 3 4 | npm install <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> npm install react-bootstrap npm install sweetalert2 --save |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Form <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Form'</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span> <span class="token keyword">import</span> Row <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Row'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Col <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Col'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> <span class="token keyword">import</span> ExpensesList <span class="token keyword">from</span> <span class="token string">'./expenses-listing.component'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Swal <span class="token keyword">from</span> <span class="token string">'sweetalert2'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">CreateExpense</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token comment">// Setting up functions</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseName <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onChangeExpenseName</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseAmount <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onChangeExpenseAmount</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseDescription <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onChangeExpenseDescription</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onSubmit <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onSubmit</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Setting up state</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> description <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> amount <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseName</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseAmount</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> amount <span class="token operator">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseDescription</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> description <span class="token operator">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onSubmit</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> e <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> expense <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> name <span class="token punctuation">,</span> amount <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> amount <span class="token punctuation">,</span> description <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> description <span class="token punctuation">}</span> <span class="token punctuation">;</span> axios <span class="token punctuation">.</span> <span class="token function">post</span> <span class="token punctuation">(</span> <span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token punctuation">,</span> expense <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">res</span> <span class="token operator">=></span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> res <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// console.log(`Expense successfully created!`);</span> <span class="token comment">// console.log(`Name: ${this.state.name}`);</span> <span class="token comment">// console.log(`Amount: ${this.state.amount}`);</span> <span class="token comment">// console.log(`Description: ${this.state.description}`);</span> Swal <span class="token punctuation">.</span> <span class="token function">fire</span> <span class="token punctuation">(</span> <span class="token string">'Good job!'</span> <span class="token punctuation">,</span> <span class="token string">'Expense Added Successfully'</span> <span class="token punctuation">,</span> <span class="token string">'success'</span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> amount <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> description <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"form-wrapper"</span> <span class="token operator">></span> <span class="token operator"><</span> Form onSubmit <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onSubmit <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> Row <span class="token operator">></span> <span class="token operator"><</span> Col <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Group controlId <span class="token operator">=</span> <span class="token string">"Name"</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> Name <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Control type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> name <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseName <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Group <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Col <span class="token operator">></span> <span class="token operator"><</span> Col <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Group controlId <span class="token operator">=</span> <span class="token string">"Amount"</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> Amount <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Control type <span class="token operator">=</span> <span class="token string">"number"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> amount <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseAmount <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Group <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Col <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Row <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Group controlId <span class="token operator">=</span> <span class="token string">"description"</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> Description <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Control <span class="token keyword">as</span> <span class="token operator">=</span> <span class="token string">"textarea"</span> type <span class="token operator">=</span> <span class="token string">"textarea"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> description <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseDescription <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Group <span class="token operator">></span> <span class="token operator"><</span> Button variant <span class="token operator">=</span> <span class="token string">"primary"</span> size <span class="token operator">=</span> <span class="token string">"lg"</span> block <span class="token operator">=</span> <span class="token string">"block"</span> type <span class="token operator">=</span> <span class="token string">"submit"</span> <span class="token operator">></span> Add Expense <span class="token operator"><</span> <span class="token operator">/</span> Button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token operator">></span> <span class="token operator"><</span> br <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> br <span class="token operator">></span> <span class="token operator"><</span> br <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> br <span class="token operator">></span> <span class="token operator"><</span> ExpensesList <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> ExpensesList <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
edit-expense.component.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Form <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Form'</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">EditExpense</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseName <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onChangeExpenseName</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseAmount <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onChangeExpenseAmount</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseDescription <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onChangeExpenseDescription</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onSubmit <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">onSubmit</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// State</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> amount <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> description <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> axios <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> match <span class="token punctuation">.</span> params <span class="token punctuation">.</span> id <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> res <span class="token punctuation">.</span> data <span class="token punctuation">.</span> name <span class="token punctuation">,</span> amount <span class="token operator">:</span> res <span class="token punctuation">.</span> data <span class="token punctuation">.</span> amount <span class="token punctuation">,</span> description <span class="token operator">:</span> res <span class="token punctuation">.</span> data <span class="token punctuation">.</span> description <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseName</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseAmount</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> amount <span class="token operator">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseDescription</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> description <span class="token operator">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onSubmit</span> <span class="token punctuation">(</span> <span class="token parameter">e</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> e <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> expenseObject <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> name <span class="token punctuation">,</span> amount <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> amount <span class="token punctuation">,</span> description <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> description <span class="token punctuation">}</span> <span class="token punctuation">;</span> axios <span class="token punctuation">.</span> <span class="token function">put</span> <span class="token punctuation">(</span> <span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> match <span class="token punctuation">.</span> params <span class="token punctuation">.</span> id <span class="token punctuation">,</span> expenseObject <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">res</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> res <span class="token punctuation">.</span> data <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Expense successfully updated'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token comment">// Redirect to Expense List </span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">'/expenses-listing'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"form-wrapper"</span> <span class="token operator">></span> <span class="token operator"><</span> Form onSubmit <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onSubmit <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Group controlId <span class="token operator">=</span> <span class="token string">"Name"</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> Name <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Control type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> name <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseName <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Group <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Group controlId <span class="token operator">=</span> <span class="token string">"Amount"</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> Amount <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Control type <span class="token operator">=</span> <span class="token string">"number"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> amount <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseAmount <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Group <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Group controlId <span class="token operator">=</span> <span class="token string">"Description"</span> <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> Description <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Label <span class="token operator">></span> <span class="token operator"><</span> Form <span class="token punctuation">.</span> Control type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> description <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onChangeExpenseDescription <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token punctuation">.</span> Group <span class="token operator">></span> <span class="token operator"><</span> Button variant <span class="token operator">=</span> <span class="token string">"danger"</span> size <span class="token operator">=</span> <span class="token string">"lg"</span> block <span class="token operator">=</span> <span class="token string">"block"</span> type <span class="token operator">=</span> <span class="token string">"submit"</span> <span class="token operator">></span> Update Expense <span class="token operator"><</span> <span class="token operator">/</span> Button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Form <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
ExpenseTableRow.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">ExpenseTableRow</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> deleteExpense <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">deleteExpense</span> <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">deleteExpense</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> axios <span class="token punctuation">.</span> <span class="token function">delete</span> <span class="token punctuation">(</span> <span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> obj <span class="token punctuation">.</span> id <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">res</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Expense removed deleted!'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> tr <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> obj <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> obj <span class="token punctuation">.</span> amount <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> obj <span class="token punctuation">.</span> description <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token operator"><</span> Link className <span class="token operator">=</span> <span class="token string">"edit-link"</span> to <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"/edit-expense/"</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> obj <span class="token punctuation">.</span> id <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> Button size <span class="token operator">=</span> <span class="token string">"sm"</span> variant <span class="token operator">=</span> <span class="token string">"info"</span> <span class="token operator">></span> Edit <span class="token operator"><</span> <span class="token operator">/</span> Button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Link <span class="token operator">></span> <span class="token operator"><</span> Button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> deleteExpense <span class="token punctuation">}</span> size <span class="token operator">=</span> <span class="token string">"sm"</span> variant <span class="token operator">=</span> <span class="token string">"danger"</span> <span class="token operator">></span> Delete <span class="token operator"><</span> <span class="token operator">/</span> Button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
account-listing.component.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Table <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Table'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> ExpenseTableRow <span class="token keyword">from</span> <span class="token string">'./ExpenseTableRow'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">ExpenseList</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> expenses <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> axios <span class="token punctuation">.</span> <span class="token function">get</span> <span class="token punctuation">(</span> <span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> expenses <span class="token operator">:</span> res <span class="token punctuation">.</span> data <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">DataTable</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> expenses <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">res <span class="token punctuation">,</span> i</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span> ExpenseTableRow obj <span class="token operator">=</span> <span class="token punctuation">{</span> res <span class="token punctuation">}</span> key <span class="token operator">=</span> <span class="token punctuation">{</span> i <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"table-wrapper"</span> <span class="token operator">></span> <span class="token operator"><</span> Table striped bordered hover <span class="token operator">></span> <span class="token operator"><</span> thead <span class="token operator">></span> <span class="token operator"><</span> tr <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Name <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Amount <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Description <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Action <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> thead <span class="token operator">></span> <span class="token operator"><</span> tbody <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">DataTable</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> tbody <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Table <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Create a landing page using the resources / js / app.js file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Nav <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Nav"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Navbar <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Navbar"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Container"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Row <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Row"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Col <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Col"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">"bootstrap/dist/css/bootstrap.css"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token keyword">as</span> Router <span class="token punctuation">,</span> Switch <span class="token punctuation">,</span> Route <span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> EditExpense <span class="token keyword">from</span> <span class="token string">"./components/edit-expense.component"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> ExpensesList <span class="token keyword">from</span> <span class="token string">"./components/expenses-listing.component"</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> CreateExpense <span class="token keyword">from</span> <span class="token string">"./components/create-expense.component"</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Router <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">></span> <span class="token operator"><</span> header className <span class="token operator">=</span> <span class="token string">"App-header"</span> <span class="token operator">></span> <span class="token operator"><</span> Navbar <span class="token operator">></span> <span class="token operator"><</span> Container <span class="token operator">></span> <span class="token operator"><</span> Navbar <span class="token punctuation">.</span> Brand <span class="token operator">></span> <span class="token operator"><</span> Link to <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"/create-expense"</span> <span class="token punctuation">}</span> className <span class="token operator">=</span> <span class="token string">"nav-link"</span> <span class="token operator">></span> Expense manager <span class="token operator"><</span> <span class="token operator">/</span> Link <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Navbar <span class="token punctuation">.</span> Brand <span class="token operator">></span> <span class="token operator"><</span> Nav className <span class="token operator">=</span> <span class="token string">"justify-content-end"</span> <span class="token operator">></span> <span class="token operator"><</span> Nav <span class="token operator">></span> <span class="token operator"><</span> Link to <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"/create-expense"</span> <span class="token punctuation">}</span> className <span class="token operator">=</span> <span class="token string">"nav-link"</span> <span class="token operator">></span> Create Expense <span class="token operator"><</span> <span class="token operator">/</span> Link <span class="token operator">></span> <span class="token operator"><</span> Link to <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">"/expenses-listing"</span> <span class="token punctuation">}</span> className <span class="token operator">=</span> <span class="token string">"nav-link"</span> <span class="token operator">></span> Expenses List <span class="token operator"><</span> <span class="token operator">/</span> Link <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Nav <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Nav <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Container <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Navbar <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> header <span class="token operator">></span> <span class="token operator"><</span> Container <span class="token operator">></span> <span class="token operator"><</span> Row <span class="token operator">></span> <span class="token operator"><</span> Col md <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">12</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"wrapper"</span> <span class="token operator">></span> <span class="token operator"><</span> Switch <span class="token operator">></span> <span class="token operator"><</span> Route exact path <span class="token operator">=</span> <span class="token string">'/'</span> component <span class="token operator">=</span> <span class="token punctuation">{</span> CreateExpense <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> Route path <span class="token operator">=</span> <span class="token string">"/create-expense"</span> component <span class="token operator">=</span> <span class="token punctuation">{</span> CreateExpense <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> Route path <span class="token operator">=</span> <span class="token string">"/edit-expense/:id"</span> component <span class="token operator">=</span> <span class="token punctuation">{</span> EditExpense <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> Route path <span class="token operator">=</span> <span class="token string">"/expenses-listing"</span> component <span class="token operator">=</span> <span class="token punctuation">{</span> ExpensesList <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Switch <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Col <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Row <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Container <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Router <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'app'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> ReactDOM <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token operator"><</span> App <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">,</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'app'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Then, edit the body of the resources / views / welcome.blade.php file to connect to the app.js file via id “app”:
1 2 3 4 5 | <span class="token operator"><</span> body <span class="token operator">></span> <span class="token operator"><</span> div id <span class="token operator">=</span> <span class="token string">"app"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> script src <span class="token operator">=</span> <span class="token string">"{{asset('js/app.js')}}"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> body <span class="token operator">></span> |
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:
- https://codesource.io/build-a-crud-application-using-laravel-and-react/
- https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-1example.html
- https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-2example.html
- https://www.itsolutionstuff.com/post/laravel-5-simple-crud-application-using-reactjs-part-3example.html