1
votes

ReactJS ne rend pas sur Laravel

J'essaye de rendre reactJS un composant sur mon laravel (5.7) mais il ne semble pas apparaître. Voici à quoi ressemblent mes fichiers:

welcome.blade.php

import React from 'react';

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

}
export default App;

Example.js

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

Application .js

<!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>

npm run watch est en cours d'exécution et ne montre aucune erreur.

S'il vous plaît, que puis-je faire de mal ici?

laravel javascript reactjs

1 commentaires

Y a-t-il des erreurs dans la console du navigateur?

3 Réponses :

0
votes

Vous avez un bogue syntaxique lorsque vous déclarez une classe dans App.js. Vous n'utilisez pas de parenthèses lorsque vous déclarez une classe en JavaScript.

<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>

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

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

2 commentaires

Corrigé mais ne rend toujours pas.

@radioactive Je suppose qu'il y a aussi un problème avec ce code . Essayez de n'utiliser que le chemin relatif de votre fichier js.

3
votes

L'utilisation de différer l'a corrigé pour moi

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

0 commentaires

1
votes

Utiliser defer : l'attribut defer est un attribut booléen.

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

Lorsqu'il est présent, il spécifie que le script est exécuté lorsque la page a fini l'analyse.

/ p>

Remarque: L'attribut defer est uniquement pour les scripts externes (ne doit être utilisé que si l'attribut src est présent).

Source: MDN

Syntex

0 commentaires