Laravel With React.js

author
February 17, 2022

 




Controller/Model/Migration/Route

php artisan make:model blog -mcr

Migration
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class Blogs extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('blogs', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('detail');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('blogs');
}
}


Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class blog extends Model
{
use HasFactory;
protected $primaryKey = 'id';
protected $table = 'blogs';
}


Route
Route::get('/blogs', [BlogController::class,'index'])
->name('blogs');
Controller
<?php
namespace App\Http\Controllers;
use App\Models\blog;
use Illuminate\Http\Request;
class BlogController extends Controller
{
public function index(Request $request)
{
return view('blogs');
}
}


resources/views
blogs.blade.php
@section('title')
Home
@endsection
@section('styles')
@endsection
@extends('layouts.master')
@section('container')
<div id="blog"></div>
@endsection
@section('scripts')
<script src="{{ asset('js/Blog1.js') }}"></script>
@endsection

master.blade.php

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-bar-block .w3-bar-item {padding:20px}
</style>
<body>
@include('layouts.sidemenu')
@include('layouts.header')
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
@yield('container')
<hr>
@include('layouts.footer')
<!-- End page content -->
</div>
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/Home1.js') }}"></script>
@yield('scripts')
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>

head.blade.php

<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">&#9776;</div>
<div class="w3-right w3-padding-16">Mail</div>
<div class="w3-center w3-padding-16">My Food</div>
</div>
</div>

footer.blade.php

<!-- Footer -->
<footer class="w3-row-padding w3-padding-32">
<div class="w3-third">
<h3>FOOTER</h3>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</div>
<div class="w3-third">
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<!-- <img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px"> -->
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<!-- <img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px"> -->
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<div class="w3-third w3-serif">
<h3>POPULAR TAGS</h3>
<p>
<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>
</p>
</div>
</footer>


sidemenu.blade.php

<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-bar-item w3-button">Close Menu</a>
<a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">Food</a>
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">About</a>
</nav>

Blog1.js

// require('../app');
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Blog from '../components/Blog2';
class App extends Component {
render() {
return (
<Router>
<div>
<h1>Hello Bro ! This Blog Head</h1>
<Routes>
<Route exact path="/blogs" element={<Blog />} />
</Routes>
{/* <React.Fragment>
<Home/>
</React.Fragment> */}
</div>
</Router>
);
}
}
if (document.getElementById('blog')) {
ReactDOM.render(<App />, document.getElementById('blog'));
}

Blog2.js

import React, { Component } from "react";
class Blog extends Component {
state={}
render() {
return (
<div>
<h1>Blog Content</h1>
</div>
);
}
}
export default Blog;

webpack.mix.js

const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/

mix.js('resources/js/app.js', 'public/js')
.js('resources/js/views/Blog1.js', 'public/js')
.extract(['react'])
.postCss('resources/css/app.css', 'public/css', [
]);

npm run dev

php artisan serve