Laravel ReactJs: Изменения не отражаются после изменений в моем файле js(actjs)

Я использую Reactjs в Laravel. Здесь я внес некоторые изменения в свой React Component, и когда я обновляю свой браузер, тогда изменения не отображаются.

файлы:

  1. ресурсы / виды /welcome.blade.php

    <!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>arjunphp.com | Laravel 5.6 with React JS</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

  2. ресурсы / актив / JS / app.js

    /**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Example');

  3. ресурсы / / активы JS / компоненты / example.js

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button'

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 tomas!
                            </div>
                            <Button size="small" color="primary" href="#" target="_blank">
                                Go To Course
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

Я добавляю кнопку в этот компонент, когда обновляю браузер, изменения не отображаются в браузере.

Снимок экрана:

введите описание изображения здесь

Источник

7 ответов

Вы скомпилировали код act.js, если нет:

npm run dev

и очистить кеш браузера, чтобы увидеть изменения

Документация Laravel

Помните, что вы должны запускать команду npm run dev каждый раз, когда вы меняете компонент Vue. Или вы можете запустить команду npm run watch, чтобы отслеживать и автоматически перекомпилировать ваши компоненты каждый раз, когда они модифицируются.

нужно реагировать тоже.

Источник

Попробуйте этот метод, он называется Live Reloading.

С Live Reloading вы можете получить обновленный браузер при сохранении вашего файла.js.

  1. Идти к webbpack.mix.js и добавьте это внизу:

    mix.browserSync('localhost:8000');

Параметр внутри зависит от вашего php ремесленника URL-адрес и порт.

  1. Бежать npm run watch установить зависимость, необходимую для метода browserSync.
  2. Бежать php artisan serve а также npm run watch (на разных cmd)

Надеюсь, это поможет.

Не забывайте аплодировать, если это работа.

источник: https://medium.com/@michael.tandio/easy-setup-hot-loader-for-react-laravel-with-laravel-mix-8f68a1393624

Источник

Для обновления кода после любых изменений в файле выполните эту команду

npm run watch

Источник

После обновления вашего компонента запустите эту команду в вашей консоли:

npm run dev

После этого вам необходимо запустить приложение и обновить браузер.

Источник

Если вы используете хром. откройте вкладку инкогнито и используйте вкладку инкогнито, она автоматически очищает кеш при перезагрузке

Источник

Шаг 1: сначала вы должны написать в терминале:

      npm install
npm run dev

Шаг 2: по истечении этого времени, всякий раз, когда вы что-либо обновляете, просто напишите:

      npm run watch

я думаю все ок

Источник

Просто запустите эту команду в консоли:

npm run

браузер теперь будет автоматически обновляться в соответствии с изменениями файлов

Источник
Другие вопросы по тегам