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>
Related
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
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
I started in the React official tutorial but when I try to run the first example, it does not render or anything.
I'm running it in using Apache (Xampp htdocs). It doesn't show anything, even errors.
This question should've a duplicate but I can't find any. Also, I can't find any other tutorial that uses v0.14.3, I think, because those tutorials still imports JSXTransformer.js. I could be wrong.
So far this is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>
As you are using script type text/babel you should include babel to your app, you can include it for example from public cdn (add it after react-dom.js), like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
However better use tools like webpack or browserify
forgive me i've searched everywhere and I'm new in reactjs and trying out examples. I have an error
Uncaught ReferenceError: mountNode is not defined
I am following the example from here http://facebook.github.io/react/tips/initial-ajax.html
and my code looks like this
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/javascripts/reactjs/react.js"></script>
<script src="/javascripts/reactjs/JSXTransformer.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div id="example"></div>
<script src="/javascripts/reactjs/build/helloworld.js"></script>
<script type="text/jsx">
/** #jsx React.DOM */
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
React.renderComponent( <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode );
</script>
</body>
</html>
Thank you in advance!
You need to tell React where to mount the <UserGist /> component. You probably want to replace mountNode with document.getElementById('example') to refer to your <div id="example"></div> element:
React.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById('example')
);
Being the accepted answer done, I'd like to add one thing: Don't forget to include references to all necessaries js's libs in your html head section if you are testing this out of "kit examples folder"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://npmcdn.com/react#15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>