CODEWITHSUNDEEP
reactjslaravel-5.8
andres castellanos
andres castellanos

Reputation: 79

React doesn't show component in Laravel 5.8 blade

I'm using a basic React installation on Laravel 5.8. My blade hoolaMundo.blade.php identifies the file css/app.css and js/app.js, but it doesn't show anything in the browser.

holaMundo

    <html>
        <head>
            <link href="/css/app.css" rel="stylesheet">
        </head>
        <body>
            <div id="Example"></div>
        </body>
    </html>
    <script src="/js/app.js"></script>

Component

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import Main from "../../assets/js/components/Example";
    
    class Example extends Component {
        render() {
            return (
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-md-8">
                            <div className="card">
                                <div className="card-header">Example Component</div>
    
                                <div className="card-body">I'm an example component!</div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
    
    export default Example;
    
    if (document.getElementById('Example')) {
        ReactDOM.render(<Example />, document.getElementById('Example'));
    }

Web Result

enter image description here

extra information

node -v :14.7.0 php -v : 7.3.5 npm -v: 4.14.7 Done npm install npm dev run

Upvotes: 1

Views: 940

Answers (1)

Snake_py
Snake_py

Reputation: 582

I would usually use the comment section, due to my insufficent reputation I'll need to type a big answere.

  1. thing, it would be greate to see your mix file? Did you use .react? https://laravel.com/docs/5.8/mix#react

  2. Laravel does sometimes behave odd, no ofense I love it, but I would recommend using the asset function to refrence your styles scripts etc. Then you make sure everything is send out properly.

  3. I would put the script tag within the html tag.

  4. it would be great to know how you installed react? Did you use larvel or node way?

  5. How I do it. I usually cd into my resource/js folder and install it via

    npm i create-react-app myapp

Then I go into laravel mix and paste in:

.react('resources/js/myapp/index.js', 'public/js/myapp.js');

If you cannot run npm i create-react-app myapp then yoou need to install it first. Checkout here: https://www.npmjs.com/package/create-react-app

Upvotes: 1

Related Questions