I'm trying to display elements written in a js file using react, here's the class:
import React from 'react'
import ReactDOM from "react-dom";
const e = React.createElement;
class StartPage extends React.Component {
render() {
return(
<div>
<h2>...0</h2>
<h3>...1</h3>
<p>...3</p>
<p>...2</p>
<div id="current_date_time"></div>
<h:link outcome="main">Go to main page</h:link>
</div>
)
}
}
const domContainer = document.querySelector('#test');
ReactDOM.render(StartPage, domContainer);
here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script type="text/js" src="js/start.js"></script>
</head>
<body>
<div id="test"/>
</body>
</html>
But there is nothing on startup, there are no error messages in the console, what am I doing wrong?
The h:link is not a valid HTML element and by looks of it it's not defined anywhere.
The StartPage in render must be component invocation, so instead use this - <StartPage />
Here's a working CodeSandbox - https://codesandbox.io/s/affectionate-williamson-xtxwn?file=/src/index.js
Related
here is angular code
testing.component.ts
import { Component, NgZone, OnInit } from '#angular/core';
import {data} from '../../assets/data.js';
import { IPost } from '../_models/IPost.js';
import {WindowRefService} from '../WindowRef.service';
#Component({
selector: 'app-testing',
templateUrl: './testing.component.html',
styleUrls: ['./testing.component.css']
})
export class TestingComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
callInIframe() {
console.log('Call In Iframe');
}
}
In routine manner such code does not lunch in any container like iframe, however I want to lunch in iframe. Something like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!--Angular app load in iframe , below code -->
<iframe src="/" frameborder="0" width="100%" height="900px"></iframe>
<script>
**I want to Call Angular method here**
</script>
</body>
</html>
how can I Call callInIframe() in script tag of index.html. #gzoechi
You can add the iframe on the template of the main component instead of the index.html
app.component.html
<hello name="{{ name }}"></hello>
<p>
this is an iframe for may website on an angular project
</p>
<iframe src="https://mansourcodes.com/"></iframe>
See Example
https://stackblitz.com/edit/angular-ivy-nqec9u?file=src/app/app.component.html
This question already has answers here:
ReactJs CreateClass is not a function
(7 answers)
Closed 5 years ago.
I am trying to render a component from other component, but failing miserable, Can someone please help me with code and help me understand what i am doing wrong?
Also, using the following example, can someone help me understand when to use type=text/jsx or type=text/babel?
<body>
<div class="container">
<h1>Flask React</h1>
<br>
<div id="content"></div>
</div>
<!-- scripts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script type="text/jsx">
/*** #jsx React.DOM */
var realPython = React.createClass({
render: function() {
return (<realPython1 />);
}
});
var realPython1 = React.createClass({
render: function() {
return (<h2>Greetings, from Real Python!</h2>);
}
});
ReactDOM.render(
React.createElement(realPython, null),
document.getElementById('content')
);
</script>
</body>
Hey man I did some refactoring on your code, maybe take a look at the react docs they are pretty awesome eitherway here's your code
<html>
<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">
<!-- scripts -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var RealPython = React.createClass({
render: function() {
return <RealPython1 />
}
});
var RealPython1 = React.createClass({
render: function() {
return <h2>Greetings, from Real Python!</h2>;
}
});
ReactDOM.render(
React.createElement(RealPython),
document.getElementById('content')
);
</script>
</body>
First you probably don't want to be using jstransform any longer, it has been deprecated: https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
Instead you should use a transpiler like babel: https://babeljs.io/
Once you are transpiling your code then you just write javascript so you can just use script type "text/javascript" instead of either "text/jsx" or "text/babel".
Below is an example of how to render a component within a component.
class SubComponent extends React.Component {
render() {
return <div>
<h2>A cool sub-component</h2>
</div>;
}
}
class Application extends React.Component {
render() {
return <div>
<h2>Greetings, from Real Python!</h2>
<SubComponent />
</div>;
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<Application />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></app>
I am tring to do react using below code but I am not getting html
element in the browser. There is no error in the console.
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var reactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<reactTest />,document.getElementById('test'));
</script>
</body>
</html>
Can someone please help on this.
If a React Class name starts with a lowercase letter then no methods inside the class get called, i.e. nothing Renders, and you don't get any error message in the Browser console,
because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter, so always use Upper Case.
Instead of reactTest use this: ReactTest it will work.
As per DOC:
User-Defined Components Must Be Capitalized.
When an element type starts with a lowercase letter, it refers to a
built-in component like <div> or <span> and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like <Foo /> compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.
Check the working code:
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById('test'));
</script>
</body>
</html>
The following works fine, try it :
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById('test'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test" ></div>
const Some = ()=> <div />
<Some />
will work,
but
const some = () => <div />
<some />
won't work
I am tring to do react using below code but I am not getting html
element in the browser. There is no error in the console.
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var reactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<reactTest />,document.getElementById('test'));
</script>
</body>
</html>
Can someone please help on this.
If a React Class name starts with a lowercase letter then no methods inside the class get called, i.e. nothing Renders, and you don't get any error message in the Browser console,
because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter, so always use Upper Case.
Instead of reactTest use this: ReactTest it will work.
As per DOC:
User-Defined Components Must Be Capitalized.
When an element type starts with a lowercase letter, it refers to a
built-in component like <div> or <span> and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like <Foo /> compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.
Check the working code:
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById('test'));
</script>
</body>
</html>
The following works fine, try it :
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById('test'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test" ></div>
const Some = ()=> <div />
<Some />
will work,
but
const some = () => <div />
<some />
won't work
Just started learning React and I'm following a guide to build a basic single page app. I'm getting this error:
Warning: Failed context type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at <**shortened url I was forced to remove**>
in e
The url that was pointed to was: https://github.com/facebook/prop-types/blob/master/README.md#difference-from-reactproptypes-dont-call-validator-functions
That "in e" is not a mistake on my part.
I'm also seeing this error but suspect its caused by the other:
TypeError: r.props.history is undefined
As I'm new to React I don't even know where to begin. I know there were some issues with react-router and PropType validators in earlier versions of react-router (I'm using 4.1.1).
This is my current index.html - the only file in my project:
<!DOCTYPE html>
<html>
<head>
<title>React! React! React!</title>
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var App = React.createClass({
render: function(){
return (
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li>Home</li>
<li>Stuff</li>
<li>Contact</li>
</ul>
<div className="content">
</div>
</div>
)
}
})
var destination = document.querySelector("#container");
ReactDOM.render(
<ReactRouter.Router>
<ReactRouter.Route path="/" component={App}>
</ReactRouter.Route>
</ReactRouter.Router>,
destination
);
</script>
</body>
</html>
Your issues is on the way you are calling the Router.
Since version 4+, React Router uses BrowserRouter, from the React Router DOM package.
Just add React Router DOM from the UMD bundle and your code should work:
<!DOCTYPE html>
<html>
<head>
<title>React! React! React!</title>
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var ReactRouter = window.ReactRouterDOM
var App = React.createClass({
render: function() {
return (
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li>Home</li>
<li>Stuff</li>
<li>Contact</li>
</ul>
<div className="content">
</div>
</div>
)
}
})
var destination = document.querySelector("#container");
ReactDOM.render(
<ReactRouter.BrowserRouter>
<ReactRouter.Route path="/" component={App}/>
</ReactRouter.BrowserRouter>,
destination
);
</script>
</body>
</html>
Further reference on: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom
This has more to do with the React version that you are using please use the latest version, the prop-types package has some incompatibility issues please check here, if you are starting learning React I suggest to start with create-react-app
schweller, i do not believe both react-router and react-router-dom are needed in this case. only react-router-dom is necessary.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>