🟦 React Questions
1. What is the key prop in React?
Like name tags at a party:
Unique keys help React keep track of list items when they move, change, or get added/removed.
{friends.map(f => <li key={f.id}>{f.name}</li>)}
2. Controlled vs Uncontrolled Components
Like volume you control vs speaker that auto-adjusts:
- Controlled: React manages the value.
const [vol, setVol] = useState(50);
<input value={vol} onChange={e => setVol(e.target.value)} />
- Uncontrolled: The browser manages the value and you “peek” when you need.
<input ref={ref} />
3. React Hooks
Like a remote control for your app:
const [lightsOn, setLightsOn] = useState(false);
useEffect(() => {
if(lightsOn) document.body.style.background = "yellow";
}, [lightsOn]);
4. Virtual DOM
Like changing a draft copy before updating the real poster:
React compares changes in memory first, then only updates the edits on the real site.
5. Context API
Like the Wi-Fi password for everyone in your house:
Any device (component) gets it directly, no need to ask every time.
const WifiContext = React.createContext("mywifi");
<WifiContext.Provider value="mywifi">
<MyDevice />
</WifiContext.Provider>
6. useEffect
Like setting a daily reminder:
Runs code after something changes.
useEffect(() => { alert("Water your plant!"); }, []);
7. Error boundary
Like a power safety switch:
Catches errors so the whole app doesn’t crash.
🟨 JavaScript Questions
1. let, var, const
Like keys:
-
let: a key for a guest -
var: a shared key -
const: your private key
let a = 1; var b = 2; const c = 3;
2. == vs ===
Like comparing apples vs exact apple:
-
==: loose comparison -
===: strict comparison
'6' == 6 // true
'6' === 6 // false
3. Template literals
Like stickers on envelopes:
const friend = "Alex";
console.log(`Hi, ${friend}!`);
4. Closures
Like a backpack remembering snacks for later:
function backpack() {
let snack = "cookie";
return function getSnack() { return snack; }
}
const grab = backpack();
grab(); // "cookie"
5. Promise
Like ordering pizza, then eating when it’s delivered:
const pizza = new Promise(res => setTimeout(() => res("🍕"), 1000));
pizza.then(msg => console.log(msg)); // 🍕 after a second
6. Arrow functions
Like writing quick to-do sticky notes:
const sayHi = name => `Hi, ${name}!`;
7. Array map
Like decorating cookies with icing:
["plain","plain"].map(c => c + " icing"); // ["plain icing","plain icing"]
8. JavaScript data types
Like sorting your backpack:
let n = 5; // number
let s = "hello"; // string
let a = [1,2,3]; // array
9. null vs undefined
Like:
-
null: lunchbox is empty -
undefined: you forgot your lunchbox
🟩 Frontend Questions
1. Semantic HTML
Like labeling kitchen containers:
<header>Menu</header>
<main>Recipes</main>
<footer>Contact</footer>
2. CSS Box Model
Like a gift box:
div { margin:10px; padding:8px; border:2px solid; }
Inner gift, bubble wrap, box, bows.
3. Responsive Design
Like clothes that fit everyone (media queries):
@media (max-width:600px) { body { font-size: 14px; } }
4. Inline vs Block Elements
Block: Suitcase (takes all space), Inline: Sunglasses (fits inside line)
5. JavaScript in HTML
Like telling a friend to say hi when someone visits:
<script> alert("Hello visitor!"); </script>
6. localStorage vs sessionStorage
Like sticky notes on fridge (localStorage) vs note on your hand (sessionStorage):
localStorage.setItem("theme", "dark");
sessionStorage.setItem("theme", "light");
7. Accessibility
Like writing a guide in braille for every guest:
<img src="smile.png" alt="Smiling face" />
<label for="email">Email</label>
<input type="email" id="email" />
8. Debugging
Like checking ingredient labels—use console.log and browser DevTools (F12) before serving your site.
Learning is so much easier when you connect code to real life!
Comment below for your favorite analogies or if you want more everyday code stories!
Top comments (0)