React Function Components

Welcome, fellow code explorer! Today, we embark on an exciting journey of React function components. Buckle up, put on your coding hat, and let’s dive into the wonderful world of React magic! 🧙‍♂️✨

What on Earth is a Function-Based Component?🤔

Alright, imagine you're a wizard (because coding is kind of like magic, right?). In the enchanted land of React, a function-based component is like a spell—a special JavaScript function that creates magical user interface elements for your web pages. It's a concise and charming way to build reusable pieces of your website.

Why Function-Based Components Now?

Once upon a time, React developers mainly used class-based components. But then, in React version 16.8, a magical update called "Hooks" arrived. Hooks turned function components into superheroes, giving them the power to manage the state and do all sorts of amazing tricks. That's when function-based components stole the spotlight and became the cool kids in town.🦸‍♂️✨

Before Hooks, class components were the stars. But they were a bit like old-fashioned wizards—they had some complexities and rituals that made them less appealing. The arrival of Hooks made function components trendy and brought joy to the coding kingdom.🌟

Let's Craft Some Magic: Creating a React Function Component ✨

1. With Arrow Function Magic

import React from 'react';

const MagicComponent = () => {
  return <div>Abra Kadabra! I am a magic component with an arrow function!</div>;
};

export default MagicComponent;

2. Without Arrow, Still Magical

import React from 'react';

function MagicComponentWithoutArrow() {
  return <div>Presto Change-o! I am a magic component without an arrow function!</div>;
}

export default MagicComponentWithoutArrow;

Exporting, Importing, and Displaying Magic Spells 📦

3. Exporting the Magic

When you're done crafting your magic spell (component), you export it for others to use.

export default MagicComponent;

4. Importing the Magic

In another part of your enchanted land, you import the magic for use.

import MagicComponent from './MagicComponent';

5. Displaying the Magic

Now, cast the spell and watch the magic unfold!

function EnchantedApp() {
  return (
    <div>
      <h1>Welcome to the Enchanted App</h1>
      <MagicComponent />
    </div>
  );
}

export default EnchantedApp;

Naming Conventions: A Bit of Magic Elegance🌟🔮

To keep things classy in the magic realm.

• Component Naming: Use PascalCase for your magical components—like MagicComponent.
• File Naming: Match your component name in the filename with PascalCase —MagicComponent.jsx.

A Funny Finale: Time to Wave Your Coding Wand🎉🧙‍♂️

And there you have it, brave coder! You've crafted your first React function components and ventured through the magical kingdom of JSX. Give yourself a pat on the back, and remember, coding is an adventure, and you're the hero of your own story. Happy coding!🚀