时间戳

首页 > 解决方案 > 如何在 localhost(xampp) 上运行 laravel 和 reactjs 应用程序

php - 如何在 localhost(xampp) 上运行 laravel 和 reactjs 应用程序

问题描述

我在我的 localhost(xampp) 上有一个使用 reactjs 和 laravel 5.8 构建的应用程序，但我看到一个空白页。

我在终端上执行了 npm run dev 并刷新了页面，但什么也没发生。

资源/js/app.js

require('./bootstrap');
require('./components/Example');

资源/视图/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>

资源/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'));
}

我希望它在页面上为我显示示例组件。有什么帮助吗？

标签： phpreactjslaravellaravel-5

解决方案

您必须在 laravel 文档中转换 .js 文件 Laravel-mix 甚至提供.react()开箱即用的方法

另外，不要包含这样的资产src="/js/app.js"，src="{{ asset('/js/app.js') }}“.

Aaand，</head>在<body>您的home.blade.php.

推荐阅读