Laravel 5 Simple Crud Application Using Reactjs Part 1

itsolutionstuff.
com
Laravel 5 - Simple CRUD Application Using ReactJS - Part 1
Hardik Savani
6-8 minutes
By Hardik Savani | December 10, 2017 | Category : PHP Laravel Javascript Bootstrap jQuery MySql JSON
Node JS Ajax React JS Axios
In this post, i want to share with you how to create crud(Create Read Update Delete) application with react js in
PHP Laravel framework. In this example you can learn how to built setup for laravel reactjs application, I also
used axios post request, get request, put request and delete request for insert update delete application.
we always would like to prefer make setup for any javascript framework like vuejs, angularjs, reactjs etc. here i
share with you basic setup for react and laravel with crud application. You have to just follow following 9 step as
listed bellow:
1) Step 1 : Install Laravel 5.5
2) Step 2 : Database Configuration
3) Step 3 : Create products Table and Model
4) Step 4 : Create Web Route and API Route
5) Step 5 : Create ProductController
6) Step 6 : Install Configuration For ReactJS
7) Step 7 : Create React Components Files
8) Step 8 : Create Main Blade File
9) Step 9 : Run Project
After successfully all step you will get crud application like as bellow screen shot i attached.
Preview:
Step 1 : Install Laravel 5.5
we are going from scratch, So we require to get fresh Laravel 5.5 version application using bellow command,
So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Database Configuration
In second step, we should make database configuration for example database name, username, password etc
for our crud application of laravel 5.5. So let's open .env file and fill all details like as bellow:
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)
Step 3: Create products Table and Model
we are going to create crud application for products table with react js. so we have to create migration for
products table using Laravel 5.5 php artisan command, so first fire bellow command:
php artisan make:migration create_products_table
After this command you will find one file in following path database/migrations and you have to put bellow
code in your migration file for create products table.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProductsTable extends Migration
/**
* Run the migrations.
* @return void
*/
public function up()
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('body');
$table->timestamps();
});
/**
* Reverse the migrations.
* @return void
*/
public function down()
Schema::dropIfExists('products');
}
After creating table we have to create model for "products" table so just run bellow command and create new
model:
php artisan make:model Product
Ok, so after run bellow command you will find app/Product.php and put bellow content in Product.php file:
app/Product.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
/**
* The attributes that are mass assignable.
* @var array
*/
protected $fillable = [
'title', 'body'
];
Step 4: Create Web Route and API Route
In this is step we need to add web route and also api route for products. so open your routes/web.php file and
add following route.
routes/web.php
Route::get('/', function () {
return view('welcome');
});
routes/api.php
Route::resource('products', 'ProductController');
Step 5 : Create ProductController
In this step, we need create new controller as ProductController. So run bellow command and create new
controller. bellow controller for create resource controller.
php artisan make:controller ProductController -resource
After bellow command you will find new file in this path app/Http/Controllers/ProductController.php.
In this controller will write code for following method:
1)index()
2)store()
3)edit()
4)update()
5)destroy()
So, let's copy bellow code and put on ProductController.php file.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
/**
* Display a listing of the resource.
* @return \Illuminate\Http\Response
*/
public function index()
$products = Product::all();
return response()->json($products);
/**
* Store a newly created resource in storage.
* @param \Illuminate\Http\Request $request
*/
public function store(Request $request)
$product = new Product([
'title' => $request->get('title'),
'body' => $request->get('body')
]);
$product->save();
return response()->json('Product Added Successfully.');
/**
* Show the form for editing the specified resource.
* @param int $id
*/
public function edit($id)
$product = Product::find($id);
return response()->json($product);
/**
* Update the specified resource in storage.
* @param \Illuminate\Http\Request $request

* @param int $id
*/
public function update(Request $request, $id)
$product->title = $request->get('title');
$product->body = $request->get('body');
$product->save();
return response()->json('Product Updated Successfully.');
/**
* Remove the specified resource from storage.
* @param int $id
*/
public function destroy($id)
$product->delete();
return response()->json('Product Deleted Successfully.');
Next we have following rest of step :
6) Step 6 : Install Configuration For ReactJS
7) Step 7 : Create React Components Files
8) Step 8 : Create Main Blade File
9) Step 9 : Run Project
You can see above left step on next link, so click bellow next button.

Laravel 5 Simple Crud Application Using Reactjs Part 1

Uploaded by

Copyright:

Available Formats

Laravel 5 Simple Crud Application Using Reactjs Part 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laravel 5 Simple Crud Application Using Reactjs Part 1

Uploaded by

Copyright:

Available Formats

itsolutionstuff.

Laravel 5 - Simple CRUD Application Using ReactJS - Part 1

1) Step 1 : Install Laravel 5.5

2) Step 2 : Database Configuration

3) Step 3 : Create products Table and Model

4) Step 4 : Create Web Route and API Route

5) Step 5 : Create ProductController

6) Step 6 : Install Configuration For ReactJS

7) Step 7 : Create React Components Files

8) Step 8 : Create Main Blade File

9) Step 9 : Run Project

Step 1 : Install Laravel 5.5

composer create-project --prefer-dist laravel/laravel blog

Step 2: Database Configuration

DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 3: Create products Table and Model

php artisan make:migration create_products_table

class CreateProductsTable extends Migration

* Run the migrations.

public function up()

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

* Reverse the migrations.

public function down()

php artisan make:model Product

class Product extends Model

* The attributes that are mass assignable.

Step 4: Create Web Route and API Route

Step 5 : Create ProductController

php artisan make:controller ProductController -resource

In this controller will write code for following method:

So, let's copy bellow code and put on ProductController.php file.

class ProductController extends Controller

* Display a listing of the resource.

public function index()

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

public function store(Request $request)

$product = new Product([

'title' => $request->get('title'),

'body' => $request->get('body')

return response()->json('Product Added Successfully.');

* Show the form for editing the specified resource.

* @param int $id

public function edit($id)

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

public function update(Request $request, $id)

return response()->json('Product Updated Successfully.');

* Remove the specified resource from storage.

* @param int $id

public function destroy($id)

return response()->json('Product Deleted Successfully.');

Next we have following rest of step :

6) Step 6 : Install Configuration For ReactJS

7) Step 7 : Create React Components Files

8) Step 8 : Create Main Blade File