Laravel 5.5 React

Question

I am trying to use the default React scaffolding that Laravel 5.5 provides. 我正在尝试使用Laravel 5.5提供的默认React脚手架。

So my steps so far are 所以我到目前为止的步骤是

Install fresh 5.5 laravel application 安装新的5.5 Laravel应用程序
php artisan make:auth php artisan make：auth
php artisan migrate PHP的工匠迁移
php artisan preset react PHP的工匠预设反应
npm install npm安装

The followin 2 steps are just for watchin my react files so I dont have to build manualy after changes 以下2个步骤仅用于监视我的react文件，因此更改后我无需手动构建

npm install react-router@2.8.1 npm install react-router@2.8.1
npm run watch npm run watch
I added <Example /> in the default register view. 我在默认的寄存器视图中添加了<Example /> 。

This should display the Example component provided by Laravel or am I mistaken? 这应该显示Laravel提供的Example组件，还是我弄错了？

Example component: 示例组件：

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

I also tried just adding a div with id: example but this also doesn't display the example component. 我还尝试仅添加id: example div id: example但这也不会显示示例组件。

I have the chrome react developer tools and it says that my page is using react so there is no issue there. 我有chrome react开发人员工具，它说我的页面正在使用react，所以那里没有问题。 I don't see the component in my view nor in my dev tools. 在我的视图和开发工具中都没有看到该组件。

I get no errors when building so I have no clue why it is not working. 构建时没有任何错误，所以我不知道为什么它不起作用。

Answer 1

I might be late but hopefully, it will help anyone that visit this question. 我可能会迟到，但希望能对任何访问此问题的人有所帮助。

Answer: 回答：

Insert your script tag in your master blade view (the default one is welcome.blade.php), kind of like this: 在主刀片视图中插入脚本标签（默认标签为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>

Point the reactDOM to root id (default one is example ) for common practice. 通常情况下，将reactDOM指向root ID（默认为example ）。

If you have external CSS, don't forget to put that too! 如果您有外部CSS，请不要忘记也放上它！

Laravel 5.5 React

问题描述

1 个解决方案

解决方案1
0 2018-05-03 02:47:14

Laravel 5.5 React

问题描述

1 个解决方案

解决方案1 0 2018-05-03 02:47:14

解决方案1
0 2018-05-03 02:47:14