Laravel & React: Tạo một ứng dụng CRUD đơn giản

Thứ Hai, 16/11/2020

Tram Ho

Bài viết này dành cho những bạn nào đang bắt tay vào học cách sử dụng kết hợp Laravel và React.
Qua việc làm 1 app CRUD, các bạn sẽ hiểu được luồng hoạt động cơ bản. Bắt đầu nào!

1. Backend:

1.1. Khởi tạo

Đầu tiên, chúng ta sử dụng composer để khởi tạo project với Laravel phiên bản mới nhất (ở đây của mình là Laravel 8):

composer create-project --prefer-dist laravel/laravel laravel-react-crud

1 2	composer create-project --prefer-dist laravel/laravel laravel-react-crud

Di chuyển vào thư mục chứa project:

cd laravel-react-crud

1 2	cd laravel-react-crud

1.2. Config database

Để kết nối app với database, ta mở file .env và sửa một số thông tin của DB_DATABASE, DB_USERNAME, DB_PASSWORD sao cho phù hợp với database của mình.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=crud

DB_USERNAME=root

DB_PASSWORD=

1.3. Tạo Model, Controller và Route

php artisan make:model Expense --migration --resource --controller

1 2	php artisan make:model Expense --migration --resource --controller

Vào thư mục database/migrations và mở file migration vừa được tạo lên, sửa code như sau:

<span class="token operator">&lt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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>

<?php

use IlluminateDatabaseMigrationsMigration;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateSupportFacadesSchema;

class CreateExpensesTable extends Migration

{

/**

* Run the migrations.

* @return void

*/

public function up()

{

Schema::create('expenses', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->text('description');

$table->integer('amount');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

*/

public function down()

{

Schema::dropIfExists('expenses');

}

Ta vừa viết migration để tạo bảng Expense, với các trường như sau:
{bảng contact}

Chạy câu lệnh migrate để tạo bảng trong database:

php artisan migrate

1 2	php artisan migrate

Migrate chạy thành công sẽ hiển thị như sau:

Sau khi migrate thành công, bảng Expense sẽ xuất hiện trong database.
Tiếp theo, ta thêm các routes vào file routes/api.php để kết nối với Controllers. File này sau đó sẽ có nội dung như sau:

<span class="token operator">&lt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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">&gt;</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>

<?php

use IlluminateHttpRequest;

use IlluminateSupportFacadesRoute;

/*

|--------------------------------------------------------------------------

| 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!

*/

Route::middleware('auth:api')->get('/user', function (Request $request) {

return $request->user();

});

Route::get('/expenses', '<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>')->name('expenses.all');

Route::post('/expenses', '<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>')->name('expenses.store');

Route::get('/expenses/{expense}', '<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>')->name('expenses.show');

Route::put('/expenses/{expense}', '<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>')->name('expenses.update');

Route::delete('/expenses/{expense}', '<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>')->name('expenses.destroy');

Mình đang sử dụng Laravel 8, trong phiên bảng này, thuộc tính $namespace trong RouteServiceProvider mặc định được đặt là null. Do đó, sẽ không có prefix namespace nào được thực hiện bởi Laravel. Định nghĩa controller route (trong file routes/api.php sẽ được xác định bằng cú pháp chuẩn của PHP như sau:

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>

Route::get('/expenses', [ExpenseController::class, 'index'])

Tuy nhiên, mình quen sử dụng prefix giống Laravel 7.x nên sẽ thêm thuộc tính $namespace vào RouteServiceProvider (app/Providers/RouteServiceProvider.php) như sau:

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">&gt;</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">&gt;</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">&gt;</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>

Route::prefix('api')

->middleware('api')

->namespace('AppHttpControllers')

->group(base_path('routes/api.php'));

Tiếp theo, ta định nghĩa từng hành động trong file app/Http/Controllers/ExpenseController.php

<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">&gt;</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">&gt;</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">=&gt;</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
            <span class="token string">'amount'</span> <span class="token operator">=&gt;</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
            <span class="token string">'description'</span> <span class="token operator">=&gt;</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">&gt;</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">&gt;</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">=&gt;</span> <span class="token string">'expense created'</span><span class="token punctuation">,</span> 
        <span class="token string">'expense'</span> <span class="token operator">=&gt;</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">&gt;</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">=&gt;</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
            <span class="token string">'amount'</span> <span class="token operator">=&gt;</span> <span class="token string">'required'</span><span class="token punctuation">,</span>
            <span class="token string">'description'</span> <span class="token operator">=&gt;</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">&gt;</span>name <span class="token operator">=</span> $request<span class="token operator">-</span><span class="token operator">&gt;</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">&gt;</span>amount <span class="token operator">=</span> $request<span class="token operator">-</span><span class="token operator">&gt;</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">&gt;</span>description <span class="token operator">=</span> $request<span class="token operator">-</span><span class="token operator">&gt;</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">&gt;</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">&gt;</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">=&gt;</span> <span class="token string">'expense updated!'</span><span class="token punctuation">,</span>
            <span class="token string">'expense'</span> <span class="token operator">=&gt;</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">&gt;</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">&gt;</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">=&gt;</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>

class ExpenseController extends Controller

{

/**

* Display a listing of the resource.

* @return IlluminateHttpResponse

*/

public function index()

{

$expenses = Expense::all();

return response()->json($expenses);

}

/**

* Store a newly created resource in storage.

* @param IlluminateHttpRequest $request

* @return IlluminateHttpResponse

*/

public function store(Request $request)

{

$request->validate([

'name' => 'required',

'amount' => 'required',

'description' => 'required' //optional if you want this to be required

]);

$expense = Expense::create($request->all());

return response()->json(['message'=> 'expense created',

'expense' => $expense]);

}

/**

* Display the specified resource.

* @param AppExpense $expense

* @return IlluminateHttpResponse

*/

public function show(Expense $expense)

{

return $expense;

}

/**

* Show the form for editing the specified resource.

* @param AppExpense $expense

* @return IlluminateHttpResponse

*/

/**

* Update the specified resource in storage.

* @param IlluminateHttpRequest $request

* @param AppExpense $expense

* @return IlluminateHttpResponse

*/

public function update(Request $request, Expense $expense)

{

'name' => 'required',

'amount' => 'required',

]);

$expense->name = $request->name();

$expense->amount = $request->amount();

$expense->description = $request->description();

$expense->save();

'message' => 'expense updated!',

'expense' => $expense

]);

}

/**

* Remove the specified resource from storage.

* @param AppExpense $expense

* @return IlluminateHttpResponse

*/

public function destroy(Expense $expense)

{

$expense->delete();

'message' => 'expense deleted'

]);

}

Tiếp theo, ta chỉ định những thuộc tính có thể được thay đổi nội dung trong database (mass-assign) bằng cách thêm các thuộc tính đó vào biến $fillable trong file app/Models/Expense.php:

<span class="token operator">&lt;</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>

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Product extends Model

{

/**

* The attributes that are mass assignable.

* @var array

*/

protected $fillable = [

'name', 'description', 'amount'

];

}

Vậy là xong phần back-end, bây giờ ta chạy ứng dụng bằng câu lệnh php artisan serve, sau đó mở Postman để thử.

1.4. Test API bằng Postman

Do chưa có dữ liệu gì nên ta sẽ gọi đến api http://localhost:8000/api/expenses/ bằng phương thức POST trước.

Nhập url của API vào và chọn phương thức POST.
Để truyền dữ liệu vào API, chọn Body -> x-www-form-urlencoded và thêm các trường (KEY) cùng với giá trị (VALUE) của các trường đó.

API sẽ được gọi và lưu các giá trị này vào database. Khi lưu thành công, kết quả sẽ hiện ra như sau:

Bây giờ database đã có dữ liệu, ta gọi API GET để lấy dữ liệu ra xem sao:

Kết quả ra giống với dữ liệu vừa được ghi vào.

Các bạn có thể thử với những API còn lại

2. Frontend

2.1. Khởi tạo

Backend đã xong, giờ chúng ta hoàn thành nốt frontend, sử dụng ReactJS. Chạy câu lệnh sau để tạo khung sườn cơ bản (scaffold) cho React:

composer require laravel/ui
php artisan ui react

composer require laravel/ui

php artisan ui react

Sau đó compile assets bằng các lệnh sau:

npm install
npm run dev

npm install

npm run dev

Tiếp theo, ta cài đặt một số dependency cần thiết:

npm install <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>
npm install react-bootstrap
npm install sweetalert2 --save

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. Tạo components

Ở đây ta sẽ tạo các components và sử dụng axios để gọi API, tương tác với phía backend.
Trong thư mục components, tạo 3 components sau:

create-expense.component.js
edit-expense.component.js
expenses-listing.component.js
và một component con:
ExpenseTableRow.js

Tiếp theo, nhập nội dung cho các file này:

create-expense.component.js:

<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">=&gt;</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">&lt;</span>div className<span class="token operator">=</span><span class="token string">"form-wrapper"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</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">&gt;</span>
        <span class="token operator">&lt;</span>Row<span class="token operator">&gt;</span> 
            <span class="token operator">&lt;</span>Col<span class="token operator">&gt;</span>
             <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Name"</span><span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>Name<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
             <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span>
            
            <span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">&gt;</span>
            
            <span class="token operator">&lt;</span>Col<span class="token operator">&gt;</span>
             <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Amount"</span><span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>Amount<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</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">&gt;</span>
             <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">&gt;</span>  
           
        <span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">&gt;</span>
            

        <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"description"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>Description<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span>
       
        <span class="token operator">&lt;</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">&gt;</span>
          Add Expense
        <span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>br<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>br<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>br<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>br<span class="token operator">&gt;</span>

      <span class="token operator">&lt;</span>ExpensesList<span class="token operator">&gt;</span> <span class="token operator">&lt;</span><span class="token operator">/</span>ExpensesList<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

100

101

102

import React, { Component } from "react";

import Form from 'react-bootstrap/Form'

import Button from 'react-bootstrap/Button'

import Row from 'react-bootstrap/Row';

import Col from 'react-bootstrap/Col';

import axios from 'axios'

import ExpensesList from './expenses-listing.component';

import Swal from 'sweetalert2';

export default class CreateExpense extends Component {

constructor(props) {

super(props)

// Setting up functions

this.onChangeExpenseName = this.onChangeExpenseName.bind(this);

this.onChangeExpenseAmount = this.onChangeExpenseAmount.bind(this);

this.onChangeExpenseDescription = this.onChangeExpenseDescription.bind(this);

this.onSubmit = this.onSubmit.bind(this);

// Setting up state

this.state = {

description: '',

amount: ''

}

onChangeExpenseName(e) {

}

onChangeExpenseAmount(e) {

}

onChangeExpenseDescription(e) {

}

onSubmit(e) {

e.preventDefault()

const expense = {

amount: this.state.amount,

description: this.state.description

};

axios.post('http://localhost:8000/api/expenses/', expense)

.then(res => console.log(res.data));

// console.log(`Expense successfully created!`);

// console.log(`Name: ${this.state.name}`);

// console.log(`Amount: ${this.state.amount}`);

// console.log(`Description: ${this.state.description}`);

Swal.fire(

'Good job!',

'Expense Added Successfully',

'success'

)

this.setState({name: '', amount: '', description: ''})

}

render() {

return (<div className="form-wrapper">

<Row>

<Col>

<Form.Group controlId="Name">

<Form.Label>Name</Form.Label>

<Form.Control type="text" value={this.state.name} onChange={this.onChangeExpenseName}/>

</Form.Group>

</Col>

<Col>

<Form.Label>Amount</Form.Label>

<Form.Control type="number" value={this.state.amount} onChange={this.onChangeExpenseAmount}/>

</Form.Group>

</Col>

</Row>

<Form.Label>Description</Form.Label>

<Form.Control as="textarea" type="textarea" value={this.state.description} onChange={this.onChangeExpenseDescription}/>

</Form.Group>

Add Expense

</Button>

</Form>

</div>);

}

edit-expense.component.js:

<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">=&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">&lt;</span>div className<span class="token operator">=</span><span class="token string">"form-wrapper"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</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">&gt;</span>
        <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Name"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>Name<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</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">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Amount"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>Amount<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</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">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Description"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>Description<span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</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">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">&gt;</span>

        <span class="token operator">&lt;</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">&gt;</span>
          Update Expense
        <span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import Form from 'react-bootstrap/Form'

import Button from 'react-bootstrap/Button';

import axios from 'axios';

export default class EditExpense extends Component {

super(props)

// State

this.state = {

amount: '',

description: ''

}

componentDidMount() {

axios.get('http://localhost:8000/api/expenses/' + this.props.match.params.id)

amount: res.data.amount,

description: res.data.description

});

})

.catch((error) => {

console.log(error);

})

}

this.setState({ description: e.target.value })

}

e.preventDefault()

const expenseObject = {

description: this.state.description

};

axios.put('http://localhost:8000/api/expenses/' + this.props.match.params.id, expenseObject)

.then((res) => {

console.log(res.data)

console.log('Expense successfully updated')

}).catch((error) => {

console.log(error)

})

// Redirect to Expense List

this.props.history.push('/expenses-listing')

}

render() {

<Form.Control type="text" value={this.state.name} onChange={this.onChangeExpenseName} />

</Form.Group>

<Form.Control type="number" value={this.state.amount} onChange={this.onChangeExpenseAmount} />

</Form.Group>

<Form.Control type="text" value={this.state.description} onChange={this.onChangeExpenseDescription} />

</Form.Group>

Update Expense

</Button>

</Form>

</div>);

}

ExpenseTableRow.js:

<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">=&gt;</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">=&gt;</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">&lt;</span>tr<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>td<span class="token operator">&gt;</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">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>td<span class="token operator">&gt;</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">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>td<span class="token operator">&gt;</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">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>td<span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</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">&gt;</span>
                       <span class="token operator">&lt;</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">&gt;</span>Edit<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</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">&gt;</span>Delete<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span><span class="token operator">/</span>td<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import Button from 'react-bootstrap/Button';

import axios from 'axios';

export default class ExpenseTableRow extends Component {

super(props);

this.deleteExpense = this.deleteExpense.bind(this);

}

deleteExpense() {

axios.delete('http://localhost:8000/api/expenses/' + this.props.obj.id)

console.log('Expense removed deleted!')

console.log(error)

})

}

render() {

return (

<tr>

<td>{this.props.obj.name}</td>

<td>{this.props.obj.amount}</td>

<td>{this.props.obj.description}</td>

<td>

</Link>

<Button onClick={this.deleteExpense} size="sm" variant="danger">Delete</Button>

</td>

</tr>

);

}

expenses-listing.component.js:

<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">=&gt;</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">=&gt;</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">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token operator">&lt;</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">&gt;</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">&lt;</span>div className<span class="token operator">=</span><span class="token string">"table-wrapper"</span><span class="token operator">&gt;</span> 
      <span class="token operator">&lt;</span>Table striped bordered hover<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>thead<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>tr<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span>Name<span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span>Amount<span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span>Description<span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>th<span class="token operator">&gt;</span>Action<span class="token operator">&lt;</span><span class="token operator">/</span>th<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>tr<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>thead<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>tbody<span class="token operator">&gt;</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">&lt;</span><span class="token operator">/</span>tbody<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>Table<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import axios from 'axios';

import Table from 'react-bootstrap/Table';

import ExpenseTableRow from './ExpenseTableRow';

export default class ExpenseList extends Component {

super(props)

this.state = {

expenses: []

};

}

componentDidMount() {

expenses: res.data

});

})

}

DataTable() {

return this.state.expenses.map((res, i) => {

return <ExpenseTableRow obj={res} key={i} />;

});

}

render() {

return (<div className="table-wrapper">

<thead>

<tr>

<th>Amount</th>

<th>Description</th>

<th>Action</th>

</tr>

</thead>

<tbody>

{this.DataTable()}

</tbody>

</Table>

</div>);

}

Tạo landing page bằng file resources/js/app.js:

<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">&lt;</span>Router<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>header className<span class="token operator">=</span><span class="token string">"App-header"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Navbar<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Container<span class="token operator">&gt;</span>

            <span class="token operator">&lt;</span>Navbar<span class="token punctuation">.</span>Brand<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</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">&gt;</span>
              Expense manager
              <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>Navbar<span class="token punctuation">.</span>Brand<span class="token operator">&gt;</span>

            <span class="token operator">&lt;</span>Nav className<span class="token operator">=</span><span class="token string">"justify-content-end"</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>Nav<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
                  Create Expense
                <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
                  Expenses List
                <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span><span class="token operator">/</span>Nav<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>Nav<span class="token operator">&gt;</span>

          <span class="token operator">&lt;</span><span class="token operator">/</span>Container<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Navbar<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>header<span class="token operator">&gt;</span>

      <span class="token operator">&lt;</span>Container<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Row<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</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">&gt;</span>
            <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"wrapper"</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>Switch<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
              <span class="token operator">&lt;</span><span class="token operator">/</span>Switch<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>Container<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">&gt;</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">&lt;</span>App <span class="token operator">/</span><span class="token operator">&gt;</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>

import React from "react";

import ReactDOM from 'react-dom';

import Nav from "react-bootstrap/Nav";

import Navbar from "react-bootstrap/Navbar";

import Container from "react-bootstrap/Container";

import Row from "react-bootstrap/Row";

import Col from "react-bootstrap/Col";

import "bootstrap/dist/css/bootstrap.css";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import EditExpense from "./components/edit-expense.component";

import ExpensesList from "./components/expenses-listing.component";

import CreateExpense from "./components/create-expense.component";

function App() {

return (<Router>

<Navbar.Brand>

Expense manager

</Link>

</Navbar.Brand>

<Nav>

Create Expense

</Link>

Expenses List

</Link>

</Nav>

</Container>

</Navbar>

</header>

<Row>