🚀 Day 4 of Learning React — Understanding children Props Today I hit one of those small mistakes, big lesson moments while working with React. I was passing content inside a component like this: <Button>Next ➡</Button> But nothing showed up on the UI. 🤯 After debugging, I realized the issue wasn’t React… it was me. 👉 I had written childern instead of children. 💡 So what exactly is children in React? children is a special prop in React that allows you to pass content inside a component. function Button({ children }) { return <button>{children}</button>; } This makes your components: 🔁 Reusable 🎯 Flexible 🧩 Composable 🧠 Why it matters Instead of hardcoding content: ❌ Bad: <button>Click Me</button> ✅ Better: <Button>Click Me</Button> <Button>Submit</Button> <Button>Next ➡</Button> One component → multiple use cases. 🔥 My Key Takeaway Sometimes bugs are not about logic… they are about attention to detail. A single typo (childern) can break your UI silently. 🛠️ Debugging Habit I’m Building Whenever something doesn’t render: console.log(props); This simple step can save a lot of time. Day 4 done ✔️ Learning React is slowly shifting from confusion → clarity. #ReactJS #FrontendDevelopment #JavaScript #100DaysOfCode #LearningInPublic
Understanding React Children Props
More Relevant Posts
-
Most people who say they “know React”… Can’t solve basic real-world questions. Not because they’re dumb— But because they’ve only watched tutorials, not tested themselves. I’ve been speaking to a few learners, and the gap is obvious: 👉 Knowing concepts ≠ Applying them So I built a React quiz that exposes exactly where you stand. No fluff. No guessing. Just real scenarios. Think you’re actually good at React? Comment “Test me” and I’ll send it to you.
To view or add a comment, sign in
-
🚀 Day 30/30 – What 30 Days of React Taught Me 30 days ago, I started this journey to learn React consistently. Today, I completed Day 30. 💙 And honestly… I didn’t just learn React. I learned how to learn. 💻 In these 30 days, I explored: ✅ Components ✅ Props ✅ State & Hooks ✅ useEffect / useRef ✅ Forms ✅ Context API ✅ React Router ✅ API Integration ✅ Performance Optimization ✅ useReducer / useMemo / useCallback ✅ Clean Code & Scalable Structure 🔥 But the biggest lessons were: 👉 Consistency beats motivation 👉 Building teaches more than watching tutorials 👉 Confusion is part of growth 👉 Small progress daily becomes huge progress later 💡 What changed in me: Before: ❌ Watching tutorials endlessly ❌ Forgetting concepts quickly ❌ Starting but not finishing Now: ✅ Building projects confidently ✅ Understanding React deeper ✅ Showing up daily ✅ Thinking like a developer ⚡ Realization: Learning React was never just about React. It was about discipline, patience, and momentum. 🔥 Key Takeaway: You don’t need 10 hours a day. You need 1 focused hour for 30 days. To anyone learning right now: Start small. Stay consistent. Finish what you start. 🚀 Be honest 👇 What skill would you master if you stayed consistent for 30 days? #React #FrontendDevelopment #JavaScript #Consistency #CodingJourney
To view or add a comment, sign in
-
-
If you're learning React, here are a few things that will save you hours of confusion…⬇️ After spending the last month working deeply with React, these are the lessons that actually matter (not the usual fluff): 1. Stop overusing useState If a value can be derived from props or other state - don’t store it. 2. useEffect is NOT for everything Most beginners misuse it. Ask yourself: “Do I really need a side effect here?” 3. Think in components, not pages Break UI into small reusable pieces — it makes scaling 10x easier. 4. Props > complexity Keep data flow simple. If it feels messy, you're probably overengineering. 5. Learn debugging early React DevTools + console.log will teach you more than tutorials ever will. 6. Re-renders are normal Don’t panic. Understand why they happen instead of trying to stop all of them. Most tutorials teach React. Very few teach how to think in React. Hope this helps someone avoid the mistakes I made 🤝 #React #FrontendDevelopment #JavaScript #WebDevelopment #CodingTips #LearnInPublic
To view or add a comment, sign in
-
Day 46 – React Learning Journey Today’s focus was on understanding different ways to use functions in React event handling and how they impact code structure and flexibility. - Explored multiple approaches: Passing function references directly → onClick={handleClick} Using inline arrow functions → onDoubleClick={() => {...}} Handling mouse events → onMouseEnter, onMouseMove Working with input events and event objects → onChange={(e) => ...}- * Key Insight: Choosing the right way to use functions in events improves code readability, reusability, and performance. Understanding when to use direct references vs inline functions is essential for writing clean React code. - Every small concept like this builds a strong foundation for scalable frontend applications. github link : https://lnkd.in/gRbcs2Ue #Day46 #ReactJS #JavaScript #FrontendDevelopment #MERNStack #WebDevelopment #CleanCode #LearningInPublic
To view or add a comment, sign in
-
🔥 Day 1 with React — Not Just Hype, Let’s Talk Reality! Just started learning React today, and instead of only focusing on the “good part”, I wanted to look at it from a student’s perspective 👇 ⚡ Is React always needed? Sometimes it feels like using a powerful machine for a very small task. Not every project really needs React. ⚡ There are gaps you’ll notice React gives the base, but not the full package. You often have to figure out missing pieces on your own. ⚡ Too many dependencies 😅 Routing? State management? Forms? You’ll quickly realize React alone isn’t enough — hello third-party libraries! ⚡ Learning can feel confusing at first As a beginner, navigating concepts and resources can sometimes feel overwhelming. ⚡ Things keep changing Versions, patterns, best practices — it’s like you’re learning and updating at the same time! 💭 But here’s the interesting part… These challenges are exactly what make you grow as a developer. 🚀 Excited to explore deeper, build real projects, and level up step by step! #ReactJS #LearningInPublic #StudentDeveloper #FrontendJourney #CodeLife #MERNStack
To view or add a comment, sign in
-
🚀 Day 8 of My React Learning Journey: useEffect & Side Effects Today I learned about useEffect, one of the most important React Hooks 👇 🔹 What is useEffect? useEffect is a React Hook used to perform side effects in functional components, such as fetching data, updating the DOM, or running code after rendering. 🔹 What are Side Effects? Side effects are operations that affect something outside the component, like API calls, timers, or logging. ⚔️ useEffect vs Side Effects useEffect Side Effects React Hook External operationsRuns after render Happens outside UI Controlled using dependency array Includes API calls, timers, etc. Manages lifecycle behavior Needs control to avoid bugs🔹 Simple Example (Using Both Concepts) import { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return ( <div> <h1>Count: {count}</h1> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ); } export default App; 💡 My Takeaway: useEffect helps manage side effects in React and gives control over when code should run. 📌 Next, I’ll be learning about React Routing (React Router)! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #useEffect #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode
To view or add a comment, sign in
-
-
3 mistakes I made while learning React (cost me months) When I started learning React, I thought I was progressing fast. Watching tutorials. Understanding concepts. Building small components. But after months… 👉 I still couldn’t build a real app confidently. That’s when I realized — I was making some serious mistakes. Mistake 1: Learning React without JavaScript fundamentals I jumped into React without fully understanding: Closures Promises / async-await Array methods (map, filter, reduce) Result? 👉 I was copying code, not understanding it. Mistake 2: Too many tutorials, not enough building I kept watching: “React in 10 hours” “Advanced React course” “Build X project” But I wasn’t building on my own. 👉 Tutorials made me feel productive 👉 Building made me actually learn Mistake 3: Ignoring real-world patterns I focused on: Small components Basic examples But avoided: State management API handling Folder structure 👉 So when I tried a real project… I got stuck What actually worked later: Strengthening JavaScript basics Building full projects (even if messy) Learning while solving real problems Because: 👉 “Understanding React” is easy 👉 “Using React in real apps” is skill If you’re learning React right now, avoid these mistakes — it’ll save you months. What mistake slowed your learning? 👇 #reactjs #webdevelopment #mernstack #javascript #frontenddeveloper #softwaredeveloper #codingjourney #buildinpublic #learnincode #techcareers #remotedeveloper #indiandevelopers
To view or add a comment, sign in
-
-
I found this video on Youtube Watch Full Video : https://lnkd.in/dDTKDmM2 🔥 ReactJS Lecture 11 | useCallback Hook Explained! Ever noticed your React app feeling slow? 😩 That's unnecessary re-renders killing your performance! ⚡ useCallback Hook saves you by memorizing a function so React doesn't recreate it on every render — only when its dependencies change! 🧠 Simple Example: Without useCallback → function recreates every render 😭 With useCallback → function stays the same unless deps change ✅ = Faster & Optimized React App 🚀 💡 Perfect to use when: ✔️ Passing functions to child components ✔️ Using with React.memo ✔️ Avoiding unnecessary re-renders 🎯 Full tutorial on YouTube → Coding Aces YT 🔗 Link in Bio! 👨💻 AMB IT Solution #useCallback #ReactJS #ReactHooks #WebDevelopment #JavaScript #CodingAcesYT #AMBITSolution #ReactTutorial #LearnReact #Programming #CodeWithMe #TechTok #ReactPerformance #100DaysOfCode
To view or add a comment, sign in
-
Built a Meme App and Learned More Than Tutorials I started the React course by freeCodeCamp × Scrimba and instead of just watching, I built along. First project: a Meme Generator Simple idea. Real learning. Here’s what I applied while building it: -> Components & JSX Structuring the UI into reusable pieces instead of static pages -> useState Managing dynamic data — including input fields updating in real-time -> useEffect Fetching memes via API and controlling when the data loads -> Props Passing data cleanly between components -> Rendering logic Updating the UI based on state changes instead of manual DOM handling React isn’t about writing more code, it’s about controlling how UI behaves with data. Still early, but now it feels like I’m building with purpose, not just following tutorials. Next: More real-world projects and deeper React patterns What was the first project that you built as a learner? #ReactJS #WebDevelopment #FullStackDeveloper #BuildInPublic #JavaScript #LearningJourney
To view or add a comment, sign in
-
React tutorials like the Tic-Tac-Toe game are brilliant for teaching fundamentals, but they're also why so many junior devs ship absolute rubbish to production. Here's what I mean. The tutorial shows you component state, props, and event handling. Perfect. You build a few toy projects. Everything works. You feel invincible. Then you hit a real codebase with 40,000 lines of React, a Stripe integration, a messy API contract, and a deadline three weeks ago. Suddenly those pristine tutorials feel like learning to drive in a car park. I've watched this pattern for years. The gap between "I can build a game" and "I can maintain production code" is massive. Most people don't talk about it. Here's what actually matters when you're learning React: 1. Understanding component lifecycle beyond the tutorial examples. Real apps don't just render once and sit there. 2. Learning how to read someone else's code. You'll spend 80% of your career doing this, not writing shiny new stuff. 3. Knowing when NOT to use React. Sometimes a boring HTML form is the right answer. The tutorial never teaches you that. The fundamentals in those tutorials are solid. Props, state, event handling, those are genuinely important. But they're the starting line, not the finish line. What's one thing you wish a tutorial had taught you before your first real project? Drop it below.
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development