I've been going through a react.js tutorial, with a simple hello world example. I can't find a reason why the following shouldn't work, but I keep getting this error.
Uncaught Error: Invariant Violation: React.render(): Invalid component element.
I have the following code. It seems to work if I do React.createElement, but not for the JSX elements.
<!doctype html>
<html>
<head>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
document.body.onload = function(){
console.log("shuff")
var HelloWorld = React.createClass({
render: function(){
return <div>Hello, Ian Shuff!</div>;
}
});
React.render( new HelloWorld(), document.getElementById("test"))
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
You should pass to render <HelloWorld />, not new HelloWorld()
React.render(<HelloWorld />, document.getElementById("test"))
Example
jsx-in-depth
Or you can use React.createElement, like so
React.render(React.createElement(HelloWorld, null), document.getElementById("test"))
Example
Related
This question already has answers here:
Template literals like 'some ${string}' or "some ${string}" are not working
(7 answers)
Closed 5 years ago.
I'm learning React using a textbook and the string replacer ${} from this particular example doesn't work and can't figure out why. I've double checked any typos to make sure. Other examples from the book has worked fine so far.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Hello extends React.Component {
constructor (props) {
super(props)
this.clickHandler = this.clickHandler.bind(this) //isolates 'this' of Hello class from other 'this'
}
clickHandler (e) {
const name = this.props.name
window.alert('Hello, ${name}') //!!this doesn't work....
}
render () {
return (
<div onClick={this.clickHandler}>Say Hello</div>
)
}
}
ReactDOM.render((<Hello name="Johnny" />),document.getElementById("root"))
</script>
</body>
</html>
use back-tick
window.alert(`Hello, ${name}`)
See the code here: http://plnkr.co/edit/xIRiq10PSYRsvNE0YWx7?p=preview.
I'm getting the following 2 errors.
Route must provide either a path or regex property
[$compile:ctreq]
http://errors.angularjs.org/1.5.3/$compile/ctreq?p0=ngOutlet&p1=ngOutlet
index.html
<!DOCTYPE html>
<html ng-app="favMoviesList">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js</script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="module.js"></script>
<script src="movies-list-component.js"></script>
<script src="movie-rating-component.js"></script>
<script src="movie-app-component.js"></script>
</head>
<body>
<movie-app></movie-app>
</body>
</html>
module.js
(function(){
var module = angular.module("favMoviesList",["ngComponentRouter"]);
module.value("$routerRootComponent","movieApp");
module.component("appAbout",{
template:"This is about page"
});
}());
movie-app-component.js
(function(){
var module = angular.module("favMoviesList");
module.component("movieApp",{
templateUrl:"movie-app-component.html",
$routeConfig:[
{ path:"/list",component:"movieList",name:"List"},
{ path:"/about",component:"appAbout",name:"About"},
{ paht:"/**", redirectTo:["List"] }]
});
}());
You made a typo: paht should be path.
The second error is because your controller 'ngOutlet', required by directive 'ngOutlet', can't be found.
HTML code:
<div id="content"></div>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-core/6.1.19/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>
JSX code:
// create class
var HelloWord = React.createClass({
render: function () {
return (
<div>
<p>Hello Word!</p>
</div>
);
}
});
// show content
ReactDOM.render(
<HelloWord></HelloWord>, document.getElementById('content')
);
Console message after run:
Uncaught TypeError: Cannot read property 'keys' of undefined
Why?
I also ran into the same issue and while surfing the internet I found that there was a problem with the babel-core version that I used. I replaced that with another and got my code to work.
Try this
HTML
<div id="content"></div>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>
JSX
var HelloWord = React.createClass({
render: function () {
return (
<div>
<p>Hello Word!</p>
</div>
);
}
});
// show content
ReactDOM.render(
<HelloWord></HelloWord>, document.getElementById('content')
);
It should work for you too.
Update:
You can use babel-standalone package for babel compilation with the newer version since babel-browser is deprecated.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="test-component.html">
</head>
<body>
<test-component id ="host">
<p>test</p>
</test-component>
</body>
</html>
And here is the test-component.html file:
<template id = "template">
<p> this is the shadow dom</p>
<content select = "p"></content>
</template>
<script>
var test_component = document.registerElement("test-component", {
prototype: Object.create(HTMLElement.prototype,{
createdCallback:{
value: function(){
var host = document.querySelector("#host");
var root = host.createShadowRoot();
var template = document.querySelector("#template");
var content = document.importNode(template.content, true);
root.appendChild(content);
}
}
})
});
</script>
for some reason I'm getting an error on this line:
var content = document.importNode(template.content, true);
The error is:
Uncaught TypeError: Cannot read property 'content' of null
Anyone know why this is happening?
in test-component.html try this way to get template
var template = document.currentScript.ownerDocument.querySelector("#template");
I had the same issue. I have a placeholder that acts as a navigation system for web components. The first component displayed (hard written in the html page) was loaded correctly thanks to Sigma's tip, but I couldn't get the second component (created through an event from the first component) to load correctly.
Here is how I did:
<template id="my-component-template">
Hello World!
</template>
<script>
(function() {
// Keep track of the document that contains the template
let doc = document.currentScript.ownerDocument;
window.customElements.define('my-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = doc.querySelector('#my-component-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
});
})();
</script>
As I know you can't use template so.
First of all you can move your template into index.html then your sample will work fine:
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="test-component.html">
</head>
<body>
<template id = "template">
<p> this is the shadow dom</p>
<content select = "p"></content>
</template>
<test-component id ="host">
<p>test</p>
</test-component>
</body>
</html>
Live sample from http://webcomponents.org: jsbin
Another option - create your shadow dom without using templates:
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="test-component.html">
</head>
<body>
<test-component id ="host">
<p>test</p>
</test-component>
</body>
</html>
<!--test-component.html-->
<script>
var test_component = document.registerElement("test-component", {
prototype: Object.create(HTMLElement.prototype,{
createdCallback:{
value: function() {
var host = document.querySelector("#host");
var root = host.createShadowRoot();
var paragraph = document.createElement("p");
paragraph.innerHTML = "this is shadow dom";
var content = document.importNode(paragraph, true);
root.appendChild(content);
}
}
});
});
</script>
I'm playing around with ReactJS. I have defined three components, which are nested:
UserProfile.jsx
var React = require('react');
var UserProfile = React.createClass({
getInitialState: function() {
return {
username: "zuck"
};
},
render: function() {
return (
<UserProfile>
<ProfileImage username={this.props.username}/>
<ProfileLink username={this.props.username}/>
</UserProfile>
);
}
});
React.render(<UserProfile username="zuck"/>, document.body);
module.exports = UserProfile;
ProfileLink.jsx
var React = require('react');
var ProfileLink = React.createClass({
render: function() {
return (
{this.props.username}
);
}
});
module.exports = ProfileLink;
ProfileImage.jsx
var React = require('react');
var ProfileImage = React.createClass({
render: function() {
return (
<img src="//graph.facebook.com/{this.props.username}/picture"/>
);
}
});
module.exports = ProfileImage;
My html file basically only includes the three jsx files (btw, is there a way to bundle all these into a single request during development?)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React FB Link</title>
</head>
<body>
<script type="text/javascript" src="UserProfile.jsx"></script>
<script type="text/javascript" src="ProfileLink.jsx"></script>
<script type="text/javascript" src="ProfileImage.jsx"></script>
</body>
</html>
I'm using beefy to handle and serve the JSX files, using beefy *.jsx 8000 -- -t reactify.
The resulting files are (in truncated form):
UserProfile.jsx
ProfileLink.jsx
ProfileImage.jsx
Loading the html page results in an error:
Uncaught ReferenceError: ProfileImage is not defined
with reference to line 15 in UserProfile.jsx:
React.createElement(ProfileImage, {username: this.props.username}),
You might need to load ProfileImage.jsx and ProfileLink.jsx before your UserProfile.jsx since right now the page is parsing Userprofile.jsx first and it doesn't know what ProfileImage mean (because you haven't loaded it yet)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React FB Link</title>
</head>
<body>
<script type="text/javascript" src="ProfileLink.jsx"></script>
<script type="text/javascript" src="ProfileImage.jsx"></script>
<script type="text/javascript" src="UserProfile.jsx"></script>
</body>
</html>
You can use any module bundler to bundle up your files (Browserify, Gulp, Webpack) into one single file as entry point