how to run laravel and reactjs app on localhost(xampp)
Question
I have an app I am building with reactjs and laravel 5.8 on my localhost(xampp) but I am seeing a blank page.
I did npm run dev on my terminal and refreshed the page but nothing happened.
resources/js/app.js
require('./bootstrap');
require('./components/Example');
resources/views/home.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="css/app.css">
<div id="example"></div>
<script src="/js/app.js"></script>
</body>
resources/js/components/Example.js
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">I got it right</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
I want it display the example component for me on the page. Any help?
1 answers
solution1
0 ACCPTED 2019-10-22 19:54:37
You have to transpile the.js it's right here in laravel docs Laravel-mix even provides .react() method out of the box
Also, do not include assets like so src="/js/app.js" , there is special function for that src="{{ asset('/js/app.js') }} ".
Aaand, insert closing </head> tag and opening <body> tag in your home.blade.php .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.