Let's start by installing the laravel project first.
$ laravel new lrspa
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
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
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.
<!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.
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.
- Install react router
- Make router file
open your command line again, and install react router.
$ 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.
├── App.js
├── router
│ └── index.js
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;
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;
Now, open terminal.
$ lrspa > yarn run dev && php artisan serve
Open your browser, localhost:8080 And done.
Top comments (0)