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>
);
Related
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
let's say I have a TypeScript object that I declare somewhere on my view:
<script type="text/javascript">
var myTSObject = Module.CustomClass('#someId');
myISObject.bind();
</script>
Now I need to handle a click even from somewhere inside the element holding the <script> tag:
<div id="thisDiv">
<script type="text/javascript">
var myTSObject = Module.CustomClass('#thisDiv');
myISObject.bind();
</script>
<button onClick="myISObject.handleClick()" />
</div>
So far so good, but what if I use the above <div>...</div> block as a template so it when my view is generated, it looks like this:
<div id="thisDiv">
<script type="text/javascript">
var myTSObject = Module.CustomClass('#thisDiv');
myISObject.bind();
</script>
<button onClick="myISObject.handleClick()" />
</div>
<div id="thatDiv">
<script type="text/javascript">
var myTSObject = Module.CustomClass('#thatDiv');
myISObject.bind();
</script>
<button onClick="myISObject.handleClick()" />
</div>
This will understandably fail because now the second myISObject overides the first one. But due to the <div>...</div> block being a template, I can't hardcode the JS variable name. How to handle this accordingly?
set this at the top of your page:
var divnumber=0;
then use this for each div:
divnumber++;
window['myISObject' + divnumber] = ...
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>