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?
Using defer fixed it for me
<script defer src="js/app.js"></script>
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
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>
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', [
//
]);
Related
I'm learning React. I added them to my website with html script tag:
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWebsitewithReact</title>
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#2e2e2e">
</head>
<body>
<div class="navbar">
Home
Plugins
</div>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
This is the error I get :
Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
I have tried to visit and the error is:
createRoot(...): Target container is not a DOM element
I checked the documentation and everything seems fine
EDIT:
first in your file index.js you need to add in first line:
import React from 'react';
import ReactDOM from 'react-dom/client';
because without imported these library you can't use elements of React and ReactDOOM.
and in your index.html you need to replace this:
<script src="js/index.js"></script>
to this:
<script src="js/index.js" type="text/babel" data-type="module"></script>
I wish I solved your problem.
This code is working fine when running locally. When I upload this in 000webhost and use the path of bundle.js in WordPress page then facing this error.
I am getting the above-mentioned error without _registerComponent. Everywhere there is a solution for the error with _registerComponent.
Also I am getting the value of document.getElementById("app") as null.
app.js
import React from "../node_modules/react/index";
import { render } from "../node_modules/react-dom/index";
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
var app = document.getElementById("app");
console.log("app",document.getElementById("app"))
render(<App/>, app);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
Code used in WordPress
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
As you are not using index.html in wordpress you will need to add root container div for react to use to render your application. Try adding div for app in wordpress html i.e <div id="app"></div>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
Try this, in app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
ReactDOM.hydrate(
<App />,
document.getElementById('app')
);
Your variable "app" is undefined. Try this
render(<App />, document.getElementById('app'));
Trying to use only Single File Components with Laravel. The components are mounted but events do not fire. Inside ExampleComponent I have a button #click="test" that does not fire.
It worked previously when I directly used the ExampleComponent within the blade template but after incorporating an App.vue component the events stopped.
Blade Template
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('/js/app.js') }}""></script>
<script src="/js/app.js"></script>
</body>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import App from './components/App.vue'
Vue.use(Buefy)
Vue.component('navbar', require('./components/Navbar.vue'));
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
App.vue
<template>
<div id="app">
<ExampleComponent/>
</div>
</template>
<script>
import ExampleComponent from './ExampleComponent.vue'
export default {
components: {
ExampleComponent
}
}
</script>
ExampleComponent.vue
<template>
<div style="background-color: #f7faff">
<navbar></navbar>
<button #click="test">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
test() {
console.log("TEST")
}
},
mounted() {
console.log("Component mounted.");
}
};
</script>
Your Blade Template seems to have conflicting Javascript files that are loaded.
<script src="{{ mix('/js/app.js') }}""></script>
Should be the only script you are loading. That way, Laravel Mix can always compile the latest changes to your app.js file. See if that helps, because your .vue and .js files look wired up correctly.
I experienced a similar problem, only to find that I had made an unnecessary import in the app.js
I am new to React and would at the moment like to run everything using CDNs. It seems that similar questions to avoid the same error I am getting ("Uncaught SyntaxError: Unexpected token <") are solved by including ''. But that is not working in this example when I run this very basic React app. Does it not work because Babel cannot transcompile the script from this same file?
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script type="text/babel"></script>
<div id="app"></div>
</head>
<body>
<script>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
class Template extends React.Component{
render(){
return(
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
}
}
//ReactDom function starting
var AppRoot = document.getElementById('app')
ReactDOM.render(<Template/>, AppRoot)
</script>
</body>
</html>
Use Reactjs version 16. Create class-based component then render it. Use this documentary for better understanding. Link
You have to add type='text/babel' to your script. I also recommend to use at least react 16 if you want to start learning. You might also want to make sure to use UMD versions of react and reactDOM to make sure they run in the browser.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
I just started learning React and trying to get Render() to work.
I couldn't get the content to be added to my html page.
This is my index.html
<html>
<head>
<script async src="/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
and this is my main.js
import React from 'react';
import ReactDOM from 'react-dom';
class Layout extends React.Component{
render(){
return (
<h1>It works!</h1>
);
}
}
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(<Layout />, document.getElementById('app'));
});
I have tried not using a js referenced code, but both do not work.
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app'));
</script>
</body>
</html>
To render the dom you just need to put the script tag after the element you want to render on.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React app</title>
</head>
<body>
<div id="app"></div>
<script src="app.min.js"></script>
</body>
</html>
In main.js:
ReactDOM.render(<App />, document.getElementById('app'))
No need to put a event listener that way.