Following are the key points described later in this article:
Paste the code below in an HTML file and open up in a browser. The text, “Hello, Calvin” will get printed.
<!DOCTYPE html>
<html>
<head>
<title>Hello ReactJS!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var HelloMessage = React.createClass({
render: function() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
});
React.render(<HelloMessage name="Calvin"/>, document.getElementById("content"))
</script>
</body>
</html>
In above example, pay attention to some of the following:
React.render(<HelloMessage name="Calvin"/>, document.getElementById("content"))
When working with ReactJS programming, one would want to break page as several components, one containing others, and render the top-level component using the above code. I would illustrate this concept with an example in another article on how to think and program “Hello, Calvin” with a text box entry.
var ClassName = React.createClass({
render: function(){
return(
//To be rendered element/component goes here
);
}
});
var HelloMessage = React.createClass({
render: function() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
});
<script type="text/jsx">
</script>
Hope you found it useful. Please feel free to share/comment.
Last updated: 28th April, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 28th April, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…
Last updated: 22nd April, 2024 As data scientists, we navigate a sea of metrics to…
Last updated: 22nd April, 2024 This post will teach you about the gradient descent algorithm…
Last updated: 19th April, 2024 Among the terminologies used in training machine learning models, the…