CODEWITHSUNDEEP
javascriptreactjslaravel
shekwo
shekwo

Reputation: 1447

ReactJS not rendering on Laravel

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?

Upvotes: 1

Views: 3968

Answers (4)

Muhammed Fayaz
Muhammed Fayaz

Reputation: 101

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', [
        //
    ]);

Upvotes: 0

Amitesh Bharti
Amitesh Bharti

Reputation: 15713

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

Upvotes: 1

orbitory
orbitory

Reputation: 1120

Using defer fixed it for me

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

Upvotes: 4

Mehdiyev
Mehdiyev

Reputation: 245

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>

Upvotes: 0

Related Questions