Categories: JavascriptWeb

ReactJS – How to Think & Program Hello World – Part 1

This article represents Hello World example in ReactJS with explanation on how one could think in component-oriented manner when working with ReactJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • Hello World Code Sample
  • Thinking & Programming Hello World
Hello World Code Sample

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>  
Thinking & Programming Hello World

In above example, pay attention to some of the following:

  • There is div with id as “content”. React will rendor the “Hello, Calvin” within this div element. The code related with this is 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.

  • React.render would take the component along with one or more properties/attributes which could be used to pass the input to the component. In above example, React takes input as HelloMessage component and pass the name “Calvin” as property through property, “name”.
  • Once that is done, its time to define HelloMessage component. Following minimal template code is used to define a component:
    var ClassName = React.createClass({
        render: function(){
            return(
               //To be rendered element/component goes here
            );
        }
    });
    
  • Using above code, one would define HelloMessage component as following. This component returns div element in which the property name is referenced using {this.props.name}
    var HelloMessage = React.createClass({
        render: function() {
           return (
             <h1>Hello, {this.props.name}</h1>
           );
        }
    });
    
  • One must note that all of the above code needs to be defined under following:
    <script type="text/jsx">
    </script>
    
That is it. To summarize, keep following in mind:
  • Break the page in components with one component containing other components.
  • Use React.render() method to render the top level component.

Hope you found it useful. Please feel free to share/comment.

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar

Recent Posts

Retrieval Augmented Generation (RAG) & LLM: Examples

Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…

6 days ago

How to Setup MEAN App with LangChain.js

Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…

2 weeks ago

Build AI Chatbots for SAAS Using LLMs, RAG, Multi-Agent Frameworks

Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…

2 weeks ago

Creating a RAG Application Using LangGraph: Example Code

Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…

3 weeks ago

Building a RAG Application with LangChain: Example Code

The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…

3 weeks ago

Building an OpenAI Chatbot with LangChain

Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…

3 weeks ago