简体   繁体   中英

React-Laravel(7.2) Component not showing in blade.php

I am trying to use a react component in my my PHP laravel project but the component does not show It keeps showing a blank area but so I tried inserting an h1 tag in the div block of the id='footercomp' but nothing also works in it. I run

composer laravel/ui react
npm install
npm run dev
php artisan ui react

HTML

<footer class="footer-section">
  <div id='footercomp'>

  </div>
</footer>
<script src="js/app.js" type="text/javascript"></script>

app.js

require('./bootstrap');

require('./components/FooterComp')

FooterComp

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

export default class FooterComp{
    render() {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-6 order-1 order-md-2">
                        <div className="footer-social-links">
                            <a href=""><i className="fa fa-pinterest"></i></a>
                            <a href=""><i className="fa fa-facebook"></i></a>
                            <a href=""><i className="fa fa-twitter"></i></a>
                            <a href=""><i className="fa fa-dribbble"></i></a>
                            <a href=""><i className="fa fa-behance"></i></a>
                            <div className="col-md-6 order-2 order-md-1">
                                <div className="copyright">
                                    Copyright &copy;
                                    <script type="fdd38016b2c0a37d3fefa1a8-text/javascript">
                                        document.write(new Date().getFullYear());
                                    </script>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
} 

export default FooterComp

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

Did you try to add app.js in your layout file?

I was having same issue and found out that didn't added app.js

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM