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: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…