🚀 Unlock the Power of React JS: Build a Functional Component in Minutes!

React JS has revolutionized the way we build modern web applications. If you’re new to React or want a refresher on creating functional components, this post will guide you through it step by step—with a live example included!

🎯 Why React JS?

• 🧠 Component-based architecture
• ⚡ Fast performance with Virtual DOM
• 🔁 Reusable code
• 🎨 Rich ecosystem for UI/UX

📦 What is a Functional Component?

A functional component is a JavaScript function that returns a React element (JSX). It’s the simplest way to create components in React.

💻 Example: Creating a Simple Functional Component

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

Now, use this component in your main app file:

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(
  <Greeting name="Ankur" />,
  document.getElementById('root')
);

✅ Output:

Hello, Ankur!

This is a dynamic and reusable component. You can change the name prop to anything you want!

🧠 Bonus: Using ES6 Arrow Function

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

Both styles are valid. Choose what suits your coding style.

🛠️ Project Setup (Quick Notes):

Use Create React App to set up your project:

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

Add your component files in the src/ folder. Use the App.js or index.js to render them.

📢 Final Thoughts

Functional components are the heart of modern React. With hooks and clean syntax, they are perfect for beginners and pros alike. Try experimenting with props, JSX, and styles to create something amazing!

✅ What’s Next?

• Dive into useState, useEffect, and other hooks
• Build a simple project like a Todo App or Calculator
• Learn about React Router for page navigation

🏷️ Tags:

react js functional components frontend development javascript react hooks web development create react app