ReactJS 未在 Laravel 上呈现答案

【问题标题】：ReactJS not rendering on LaravelReactJS 未在 Laravel 上呈现
【发布时间】：2020-01-20 20:30:50
【问题描述】：

我正在尝试在我的 laravel (5.7) 上渲染 reactJS 一个组件，但它似乎没有出现。这是我的文件的样子：

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>React JS</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{asset('css/app.css')}}" rel="stylesheet">

</head>
<body>
    <div id="root"></div>
    <script src="{{asset('js/app.js')}}"></script>
</body>
</html>

Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React from 'react';

class App extends React.Component() {
    render(){
        return (
            <div>
                <h1>Hello</h1>
                <p>What a REAVELation</p>
            </div>
        );
    }

}
export default App;

npm run watch 正在运行并且没有显示错误。

请问我在这里做错了什么？

【问题讨论】：

浏览器控制台中是否出现任何错误？

标签： javascript reactjs laravel

【解决方案1】：

使用 defer 为我修复了它

 <script defer src="js/app.js"></script>

【讨论】：

【解决方案2】：

使用 defer : defer 属性是一个布尔属性。

<script defer type="text/javascript" src="{{ asset('js/app.js') }}"></script>

如果存在，它指定在页面完成解析时执行脚本。

注意：defer 属性仅适用于外部脚本（仅应在存在 src 属性时使用）。

来源：MDN

语法

【讨论】：

【解决方案3】：

在 App.js 中声明类时存在语法错误。在 JavaScript 中声明类时不要使用括号。

class App extends React.Component {
    render(){
        return (
          <div>
            <h1>Hello</h1>
            <p>What a REAVELation</p>
          </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

已更正但仍无法呈现。
@radioactive 我猜这个代码<script src="{{asset('js/app.js')}}"></script>也有问题。尝试仅使用 js 文件的相对路径。

【解决方案4】：

在<head> </head>中添加这个

<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>

解决此问题的一种方法是将供应商库代码提取到单独的文件中。为此，请打开 webpack.mix.js 文件并更新其代码，如下所示：

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .extract(['react'])
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

【讨论】：