React Hello World App using Functional Component

📌 INTRODUCTION

React is one of the most popular JavaScript libraries used for building modern web applications.

In this program, we will learn how to:

• Create a basic React application
• Use a functional component
• Display “Hello, World!” on the screen

👉 This is the first and most important React program for beginners.

---

📘 PROBLEM STATEMENT

👉 Write a program to display “Hello, World!” using a functional component in React.

---

💡 CONCEPTS USED

• React Functional Components
• JSX (JavaScript XML)
• Component Rendering

---

⚙️ PREREQUISITES

Make sure you have:

• Node.js installed
• npm or yarn installed

---

🧠 LOGIC EXPLANATION

1. Create a React app
2. Define a functional component
3. Return JSX
4. Render it on the screen

---

🚀 STEP 1: CREATE REACT APP

Open terminal and run:

npx create-react-app hello-app
cd hello-app
npm start

---

💻 STEP 2: WRITE CODE

Open src/App.js and replace with:

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 When you run the app, you will see:

Hello, World!

---

🔍 STEP-BY-STEP EXPLANATION

• function App() → defines a functional component
• return() → returns JSX
• <h1> → HTML element inside JSX
• export default App → makes component usable

---

⚡ USING ARROW FUNCTION (MODERN WAY)

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default App;

---

🎯 WHY FUNCTIONAL COMPONENTS?

• Simple and easy to write
• Less code compared to class components
• Used with React Hooks (useState, useEffect)
• Industry standard

---

📚 REAL-WORLD USE CASE

• Building UI components
• Creating reusable elements
• Designing full React applications

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is a functional component in React?

👉 A JavaScript function that returns JSX.

---

Q2. What is JSX?

👉 JSX is a syntax that allows writing HTML inside JavaScript.

---

Q3. Difference between functional and class components?

👉 Functional components are simpler and use hooks, while class components use lifecycle methods.

---

Q4. What is export default?

👉 It allows the component to be imported in other files.

---

Q5. Can we use arrow functions in React components?

👉 Yes, it is the modern and preferred way.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Arrow Function – Program 1
👉 Template Literals – Program 2
👉 Destructuring Assignment – Program 3
👉 Spread Operator – Program 4

---

📌 CONCLUSION

This is the foundation of React development. Once you understand functional components, you can easily move to advanced topics like state management and hooks.

👉 Practice creating multiple components to strengthen your understanding.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites