DEV Community

Irsyad A. Panjaitan
Irsyad A. Panjaitan

Posted on • Updated on

Laravel, React and SPAs

Let's start by installing the laravel project first.

$ laravel new lrspa
Enter fullscreen mode Exit fullscreen mode

When you've done, now let's install the laravel ui package so we get the scaffolding from react.

$ cd lrspa
$ lrspa > composer require laravel/ui
Enter fullscreen mode Exit fullscreen mode

Now, when you've done with that, you should have new artisan command its called ui.

$ lrspa > php artisan ui react
Enter fullscreen mode Exit fullscreen mode

After you do artisan ui, you should be commanded to run npm install && npm run dev.

When everything has done. Now we can continue to modify the route.

Open web.php and replace all with these.

<?php

use Illuminate\Support\Facades\Route;
Route::view('/{any}', 'app')->where('any', '.*');
Enter fullscreen mode Exit fullscreen mode

When you the route is very simple, it will allow you to make any of url you want, why we do that ? just because we want to use the react-router-dom.

Now, you can remove all files inside the resources/views, and make one file app.blade.php.

Open the file and type basic markup with id root.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel React JS SPA</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <div id="root">
        <App></App>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now open app.js inside resources/js, and replace with code below.

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router'
function App() {
    return (
        <div>
            <Router/>
        </div>
    );
}

export default App;

if (document.getElementById('root')) {
    ReactDOM.render(<App />, document.getElementById('root'));
}

Enter fullscreen mode Exit fullscreen mode

Now, if you see the structur of code, there are two thing we have to do.

  1. Install react router
  2. Make router file

open your command line again, and install react router.

$ lrspa > yarn add react-router-dom
Enter fullscreen mode Exit fullscreen mode

Now, inside resources/js, you can create new folder router and inside make new file index.js

So now, you have structur like this.

├── App.js
├── router
│   └── index.js
Enter fullscreen mode Exit fullscreen mode

Now, open router/index.js and make the router.

import React from 'react';
import { Switch, BrowserRouter, Route } from 'react-router-dom';
import Home from '../views/Home'
import About from '../views/About'
import Contact from '../views/Contact'
import Navbar from '../components/Navbar';
function Router(props) {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                <div className="py-4">
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/about" component={About} />
                        <Route path="/contact" component={Contact} />
                    </Switch>
                </div>
            </BrowserRouter>
        </div>
    );
}

export default Router;
Enter fullscreen mode Exit fullscreen mode

If you see the code, so many things you have to do, like make views folder inside js directory, and make Navbar.js inside component folder. So do that now.

Inside views folder, make 3 files, Home.js, About.js and Contact.js. After you've done with that, then write any of code like so.

import React from 'react';

function Home(props) {
    return (
        <div className="container">
            Home
        </div>
    );
}

export default Home;
Enter fullscreen mode Exit fullscreen mode

Now, open terminal.

$ lrspa > yarn run dev && php artisan serve
Enter fullscreen mode Exit fullscreen mode

Open your browser, localhost:8080 And done.

Top comments (0)