Laravel, React and SPAs
Tags: laravel, react, spa
Published: 2020-08-28 02:44:18

Let's start by installing the laravel project first.

```shell
$ laravel new lrspa
```
When you've done, now let's install the laravel ui package so we get the scaffolding from react.
```shell
$ cd lrspa
$ lrspa > composer require laravel/ui
```
Now, when you've done with that, you should have new artisan command its called ui. 

```
$ lrspa > php artisan ui react
```
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
<?php

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

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`.

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

Now open `app.js` inside `resources/js`, and replace with code below.
```jsx
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'));
}

```

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.

```shell
$ lrspa > yarn add react-router-dom
```

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

So now, you have structur like this.

```shell
├── App.js
├── router
│   └── index.js
```

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

```jsx
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;
```

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.

```jsx
import React from 'react';

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

export default Home;
```

Now, open terminal.

```shell
$ lrspa > yarn run dev && php artisan serve
```
Open your browser, `localhost:8080` And done.