DRY, KISS & YAGNI: Clean Code for Kids (with React.js)

👧🏽👦🏾 Once upon a time in Codeville...

There were three young coders: Folden, Kevin, and Tchaca.

They were best friends and loved building things with code - especially React.js!

One sunny day, they decided to build a magical React Treehouse App.

But before they started, their wise old mentor, Mr. Byte, gave them 3 magic rules:

---

🌱 Rule 1: DRY - “Don’t Repeat Yourself”

"Every time you repeat code," said Mr. Byte, "a bug fairy grows stronger!"

What it means:

Write your code once, and reuse it when you can.

❌ Bad Example (Too much repeating!):

// Repeating the same button!
<button>Play</button>
<button>Play</button>
<button>Play</button>

✅ Good Example (DRY code):

const PlayButton = () => <button>Play</button>;

function App() {
  return (
    <>
      <PlayButton />
      <PlayButton />
      <PlayButton />
    </>
  );
}

---

🍭 Rule 2: KISS - “Keep It Super Simple”

"Simple code is like LEGO - easy to snap together!" said Mr. Byte.

What it means:

Make your code easy to read and understand. Don’t try to be fancy!

❌ Bad Example (Too complicated for no reason):

const Calc = ({ a, b }) => (((a + b) * 2) / 4) + a - b;

✅ Good Example (KISS version):

function calculateMagicNumber(a, b) {
  const sum = a + b;
  const doubled = sum * 2;
  const quarter = doubled / 4;
  const result = quarter + a - b;
  return result;
}

---

🐣 Rule 3: YAGNI - “You Aren’t Gonna Need It”

"Don’t build a rocket if you just need a bike," laughed Mr. Byte.

What it means:

Only write the code you actually need - not what you might need later.

❌ Bad Example (Too much code too soon!):

function App() {
  const [userRole, setUserRole] = useState("admin"); // Not used yet
  const [theme, setTheme] = useState("light");       // Not used either

  return <h1>Welcome to the Treehouse!</h1>;
}

✅ Good Example (YAGNI version):

function App() {
  return <h1>Welcome to the Treehouse!</h1>;
}

---

🎉 The Result

By using DRY, KISS, and YAGNI, the friends finished their React Treehouse app in no time!
It was clean, fast, and everyone in Codeville loved it.

✨ And remember: Clean code is kind code - for your future self and your friends.

🧙 Summary for Young Wizards

Rule	What It Means	Superpower
DRY	Don’t repeat your code	Makes your code tidy 🧹
KISS	Keep it super simple	Easy to understand 🧠
YAGNI	Only build what you need now	Saves time and energy 💪

---

Happy coding, little React hero! 🌈👩🏽‍💻👦🏻‍💻

Made with ❤️ by Mr. Byte.