ReactJS not rendering on Laravel

Question

I am trying to render reactJS a component on my laravel (5.7) but it does not seem to show up. This is what my files look like:

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>React JS</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{asset('css/app.css')}}" rel="stylesheet">

</head>
<body>
    <div id="root"></div>
    <script src="{{asset('js/app.js')}}"></script>
</body>
</html>

Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React from 'react';

class App extends React.Component() {
    render(){
        return (
            <div>
                <h1>Hello</h1>
                <p>What a REAVELation</p>
            </div>
        );
    }

}
export default App;

npm run watch is running and shows no errors.

Please what might I be doing wrong here?

Are there any errors showing up in the browser console?

MaartenDev
– MaartenDev

2019-09-19 18:46:34 +00:00
Commented Sep 19, 2019 at 18:46 — MaartenDev
– MaartenDev, Commented Sep 19, 2019 at 18:46

orbitory · Accepted Answer · 2020-04-16 03:51:41Z

4

Using defer fixed it for me

 <script defer src="js/app.js"></script>

answered Apr 16, 2020 at 3:51

orbitory

1,1205 gold badges17 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pawan Verma Over a year ago

still not working

Amitesh Bharti · Accepted Answer · 2020-08-05 19:59:04Z

1

Use defer : The defer attribute is a boolean attribute.

<script defer type="text/javascript" src="{{ asset('js/app.js') }}"></script>

When present, it specifies that the script is executed when the page has finished parsing.

Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

Source: MDN

Syntex

answered Aug 5, 2020 at 19:59

Amitesh Bharti

16k6 gold badges72 silver badges67 bronze badges

Comments

Mehdiyev · Accepted Answer · 2019-09-19 19:12:47Z

0

You have syntactic bug when you declare class in App.js. You don't use parentheses when you declare class in JavaScript.

class App extends React.Component {
    render(){
        return (
          <div>
            <h1>Hello</h1>
            <p>What a REAVELation</p>
          </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

edited Sep 19, 2019 at 19:12

answered Sep 19, 2019 at 19:06

Mehdiyev

2451 gold badge3 silver badges13 bronze badges

2 Comments

shekwo Over a year ago

Corrected that but still does not render.

Mehdiyev Over a year ago

@radioactive I guess there is also issue with this code <script src="{{asset('js/app.js')}}"></script>. Try to use just relative path to your js file.

Muhammed Fayaz · Accepted Answer · 2022-02-08 11:12:42Z

0

Add this inside the <head> </head>

<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>

One way to solve this issue is by extracting the vendor library code in a separate file. To do so, open the webpack.mix.js file and update its code as follows:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .extract(['react'])
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

answered Feb 8, 2022 at 11:12

Muhammed Fayaz

1011 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

ReactJS not rendering on Laravel

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related