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
Related
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 expecting to see "Hi", but thought not getting any error, also nothing is being rendered on screen. Please, help!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
function myApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<myApp />
</div>
);
ReactDOM.render(elem, document.getElementById('div1'));
</script>
</div>
</body>
</html>
You need to use MyApp instead of myApp.
Reason:
If a React Component name starts with a lowercase letter, 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.
Check the working example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
function MyApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<MyApp />
</div>
);
ReactDOM.render(elem, document.getElementById('div1'));
</script>
</div>
</body>
</html>
m of myApp must be uppercase.
Your code should be like this:
function MyApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<MyApp />
</div>
);
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
I have this index.html :
<html>
<head>
<title>Sample App</title>
<link href="./src/css/bootstrap.min.css" rel="stylesheet" />
<link href="./src/css/bootstrap.dashboard.css" rel="stylesheet">
</head>
<body>
<div id='root'>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./src/js/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:26665/signalr/hubs"></script>
<script type="text/javascript" src="/static/bundle.js"></script>
<script type="text/javascript">
$(function() {
var myHub = $.connection.signalRTwitchBotParserHub;
myHub.client.OnNewMessage = function (data) {
// Call AppActions.dispatchMessage(message);
};
$.connection.hub.url = "http://localhost:26665/signalr";
$.connection.hub.start()
});
</script>
</body>
How can I call a React-created class from there? I would like to replace the // Call AppActions.dispatchMessage(message);
You could do something like the following. What that does is create an instance of YourReactClass that renders itself as a child of your div with the id of root. It also passes the message as a property into the react instance so that it can make use of that data. Note that I added key="rootclass" to ensure that every time this code is called, React continues to reuse the DOM nodes created by the react class instead of removing the old nodes and adding new ones.
React.render((<YourReactClass key="rootclass" message={message} />), document.getElementById('root'));
You can include React onto the page by adding
<script src="https://fb.me/react-0.13.3.min.js"></script>
See the full list of downloads for other includable options (such as the JSX Transformer).