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

React JS is one of the most powerful and popular JavaScript libraries for building dynamic web applications. Whether you're just getting started or brushing up on the fundamentals, this post will walk you through how to build a functional component from scratch—with real examples.

🔧 What Is a Functional Component?
A functional component is simply a JavaScript function that returns JSX. It's lightweight, easy to understand, and highly reusable—making it the perfect entry point for anyone learning React.

💻 Example: Let’s Build One!
Here’s a simple functional component called Greeting that accepts a name prop:

import React from 'react';

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

export default Greeting;

And 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 example demonstrates how props make components reusable and dynamic.

🧠 Bonus: Using ES6 Arrow Function
Prefer arrow functions? Here’s a shorter version of the same component:

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

🛠 How to Set Up a React Project
To run the code, create a React app using:

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

Once your development server is running, add your components and test them in the browser!

📌 Final Thoughts
Functional components are the backbone of modern React development. They’re simple to understand, easy to scale, and pair perfectly with Hooks like useState and useEffect.

If you found this tutorial helpful, check out the full blog post for more insights and examples:

👉 Read the full blog post