Question

我正在尝试使用Laravel 5.5提供的默认React脚手架。

所以我到目前为止的步骤是

安装新的5.5 laravel应用程序
php artisan make：auth
php artisan migrate
php artisan预设反应
npm install

以下两个步骤仅适用于查看我的反应文件，因此我无需在更改后手动构建

npm install react-router@2.8.1
npm run watch
我在默认的注册视图中添加了<Example />。

这应该显示Laravel提供的Example组件，还是我弄错了？

示例组件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-8 col-md-offset-2">
            <div className="panel panel-default">
              <div className="panel-heading">Example Component</div>
                <div className="panel-body">
                  I'm an example component!sdjf
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

我还尝试添加div id: example，但这也不会显示示例组件。

我有chrome反应开发人员工具，它说我的页面正在使用反应，所以那里没有问题。我在视图和开发工具中都没有看到该组件。

构建时我没有错误，所以我不知道它为什么不起作用。

Answer 1

我可能会迟到，但希望它可以帮助任何访问此问题的人。

答案：

在主刀片视图中插入脚本标记（默认值为welcome.blade.php），有点像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="{{asset('js/app.js')}}" defer></script>
  <title>Document</title>
</head>
<body>
  <div id="root"></div>

</body>
</html>

将reactDOM指向root id（默认值为example）以进行常规练习。

如果您有外部CSS，请不要忘记放置它！

Laravel 5.5 React

1 个答案: