React Hello World App using Functional Component

April 4, 2026

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

Create a React app
Define a functional component
Return JSX
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.

📌 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.