React Learning Series | Day 6 – Understanding Props ->In React, props (short for properties) are used to pass data from one component to another. ->They allow components to be dynamic and reusable by receiving different data each time they are used. ->Props are read-only, meaning a component can use them but cannot modify them. Example: function Greeting(props) { return <h2>Hello, {props.name}</h2>; } function App() { return <Greeting name="Srujana" />; } Explanation: --name is passed as a prop --The Greeting component receives and displays the value Why Props are Important: ✔ Enable communication between components ✔ Make components reusable ✔ Help build modular React applications --->Props make React components flexible and data-driven. 📌 Day 6 of my React Learning Series #ReactJS #ReactDeveloper #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #DeveloperJourney #BuildInPublic #TechLearning #ContinuousLearning #LinkedInSeries 🚀

React Learning Series | Day 8 – Understanding PropTypes ->In React, PropTypes are used to validate the type of props passed to a component. ->They help developers ensure that components receive the correct type of data, reducing bugs during development. ->PropTypes act as a type-checking mechanism for React components. Example: import PropTypes from "prop-types"; function User({ name, age }) { return ( <h2> {name} is {age} years old </h2> ); } User.propTypes = { name: PropTypes.string, age: PropTypes.number, }; Explanation: --PropTypes.string ensures the value must be a string --PropTypes.number ensures the value must be a number --If incorrect data is passed, React shows a warning during development Why PropTypes matter: ✔ Helps detect errors early ✔ Improves component reliability ✔ Makes code easier to understand --->PropTypes help build safer and more predictable React components. 📌 Day 8 of my React Learning Series #ReactJS #ReactDeveloper #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #DeveloperJourney #TechLearning #LinkedInSeries 🚀

🚀 React Learning Series — Day 4 🔄 Understanding useEffect & Component Lifecycle in React When building React applications, components don’t just appear and disappear randomly. They follow a lifecycle. Think of it like a smart streetlight system. 🟢 1️⃣ Mount (Component Appears) When the streetlight is installed, it needs to: Connect power Activate sensors Start timers In React, this is when a component first renders. Example: useEffect(() => { console.log("Component Mounted"); fetchUserData(); }, []); [] → means run only once when component loads. 🔵 2️⃣ Update (Component Changes) A streetlight adjusts brightness depending on time. React components also update when state or props change. Example: useEffect(() => { document.title = `Count: ${count}`; }, [count]); Here the effect runs every time count changes. 🔴 3️⃣ Unmount (Component Removed) When the streetlight is removed, we must: Disconnect power Stop timers Clean resources In React we clean up side effects. Example: useEffect(() => { const timer = setInterval(() => { console.log("Running..."); }, 1000); return () => { clearInterval(timer); console.log("Cleanup before unmount"); }; }, []); 📌 Key Rules to Remember ✔ useEffect(() => {}, []) → Run once on mount ✔ useEffect(() => {}, [value]) → Run when dependency changes ✔ return () => {} → Cleanup function ✔ useEffect(() => {}) → Runs every render ⚡ Real-world use cases Developers commonly use useEffect for: • Fetching API data • Adding event listeners • Starting timers • Subscriptions • Cleanup when component unmounts 💬 Question for developers What do you mostly use useEffect for? 1️⃣ API calls 2️⃣ Event listeners 3️⃣ Timers 4️⃣ State synchronization #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #CodingJourney #LearningInPublic

📌Day 3 of Learning React📌 – 🎯On Day 3 of my React learning journey, where I focused on understanding how state, rendering, and data updates works. To practice this, I built a small project called “Ludo Board”, where on every click the number increases. The main goal of this project was to understand how state changes trigger re-rendering. 🧠What I learned: ✅ How to store and manage multiple values (Blue, Yellow, Green, Red) inside a single state object using useState ✅ How to work with multiple objects in an array in state ✅ How code rendering works based on state changes ✅ Why React does not detect changes when we mutate the original object directly ✅ How to use the spread operator (...) to create a shallow copy of the object so React can detect changes and re-render the UI ✅ How to use functional updates with (prevMoves) => { ... } to always update state based on the latest previous data ✅ How React’s reconciliation process ✅ Better understanding of component re-rendering and dynamic UI behavior ⭐This project helped me clearly understand how React manages state and how the UI stays in sync with data #CodingJourney #DeveloperJourney #DailyLearning #TechLearning #SelfLearning #StudentDeveloper #ReactJS #LearningReact #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #TechSkills #SelfLearning #DeveloperLife #CareerInTech

React Learning Series | Day 4 – Dynamic List Rendering ->In React, lists can be rendered dynamically using the map() function. ->Instead of manually writing UI elements, React allows developers to generate components from data arrays. Example: const users = ["Rohan", "Priya", "Ankit", "Sneha"]; function UserList() { return ( <ul> {users.map((user, index) => ( <li key={index}>{user}</li> ))} </ul> ); } ✔Dynamic data rendering ✔ Efficient UI updates ✔ Use of key props for performance 👉 This approach helps build scalable and data-driven user interfaces. 📌 Day 4 of my React Learning Series #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #LearningJourney #LinkedInSeries 🚀

🚀 Understanding the React Component Lifecycle with Hooks When I first started learning React, one thing confused me a lot: When exactly do hooks run? Sometimes my useEffect ran twice. Sometimes state updates caused unexpected re-renders. And debugging it felt like chasing a ghost in the code. 😅 After spending time digging into it, I realized something simple: React components basically go through three main phases. 1️⃣ Mounting – The component is created This is when the component first appears on the screen. During this phase: useState initializes state useContext reads context useEffect([]) runs once after the first render 2️⃣ Updating – The component re-renders This happens whenever something changes. For example: State changes Props change Context changes React re-renders the component and then runs: useEffect([dependency]) only if the dependency changed. 3️⃣ Unmounting – The component is removed When a component disappears from the UI. This is where cleanup functions become important. Example: Remove event listeners Cancel API requests Clear intervals That’s why useEffect can return a cleanup function. 💡 One small insight that helped me: Think of React components like a life cycle: Born → Update → Die Once this mental model clicks, hooks become much easier to understand. I made this visual guide to simplify the concept 👇 💬 Curious to know: When learning React, which hook confused you the most? useEffect useState useContext Something else? Let’s discuss in the comments 👇 🔖 Save this post if you're learning React. 🔁 Share it with someone who is starting their React journey. #react #reactjs #javascript #webdevelopment #frontenddevelopment #coding #softwaredevelopment #programming

Day 11 of my 21 Days Learning Challenge Today I revisited an important concept in React that helps keep components clean and reusable — Custom Hooks. As React applications grow, components can quickly become large because they contain both UI logic and business logic. Custom Hooks help solve this by allowing us to extract and reuse stateful logic across components. A Custom Hook is simply a JavaScript function that starts with use and can use other React hooks like useState or useEffect. 1️⃣ Creating a Custom Hook For example, we can create a small hook to handle a toggle state. function useToggle(initialValue = false) { const [state, setState] = useState(initialValue); const toggle = () => setState(prev => !prev); return [state, toggle]; } This hook manages the toggle logic and can now be reused anywhere in the application. 2️⃣ Using the Custom Hook function App() { const [isOpen, toggle] = useToggle(false); return ( <button onClick={toggle}> {isOpen ? "Close" : "Open"} </button> ); } Now the component stays clean and focused on UI, while the logic lives inside the custom hook. Why Custom Hooks are useful • Reusable logic across components • Cleaner and more maintainable components • Better separation between logic and UI Revisiting this concept reminded me that good React architecture is not just about writing components, but also about organizing logic in a reusable and scalable way. #21DaysChallenge #ReactJS #JavaScript #LearningInPublic #FrontendDevelopment #WebDevelopment #SheryiansCodingSchool Sheryians Coding School

🚀 Day 47 of My MERN Stack Learning Journey (JavaScript) with Love Babbar Code Help Today, I explored Classes and Default Parameters in Functions in JavaScript, which are essential for writing cleaner and more structured code. 📚 What I learned today: 🔹 JavaScript Classes – Understanding how classes help organize code using objects and methods, making it easier to build reusable components. 🔹 Creating constructors and defining methods inside a class. 🔹 Understanding how classes support object-oriented programming concepts in JavaScript. 🔹 Default Parameters in Functions – Setting default values for function parameters when no argument is provided. 🔹 Writing cleaner and more predictable functions using default parameters. These concepts helped me understand how to structure JavaScript code better and make functions more flexible and maintainable. Step by step, strengthening my JavaScript fundamentals on the path to becoming a full-stack developer. 💻🚀 #MERNStack #JavaScript #Programming #WebDevelopment #LearningJourney #CodeHelp #Day47

Day 14 / 21 Learning Challenge Today I learned rendering strategies in web applications and API communication in React. Study Time: 5 hours Key Learnings: • Client Side Rendering concept • Server Side Rendering concept • Differences between CSR and SSR • Axios for API requests in React • Fetching server data using useEffect and useState What I Learned Client Side Rendering means the browser builds the UI after downloading JavaScript. The server sends a minimal HTML file and React creates the interface inside the browser. Server Side Rendering means the server generates the complete HTML before sending it to the browser. The page shows content instantly and JavaScript later adds interactivity. Quick Understanding • CSR renders UI in the browser • SSR renders UI on the server • CSR works well for web applications • SSR works well for content heavy websites Axios Learning Axios is a promise based HTTP client used for sending API requests from the browser or Node.js. Advantages of Axios: • Automatic JSON parsing • Cleaner syntax than fetch • Built in error handling • Handles request and response easily Practice Done: • Learned how React applications fetch data from APIs • Practiced axios GET request example • Understood how useEffect controls API calls • Used useState to store and render API data Challenge Faced: Understanding when to use CSR and when SSR is a better choice. Solution Applied: Compared performance, SEO behavior, and use cases of both approaches. Today’s Outcome: Clear understanding of rendering strategies and API communication in React. Progress So Far: • Topics covered: HTML, CSS, JavaScript, DOM, OOP, Async JavaScript, Git, Project, React basics, Props, State, useState, React Events, Two Way Binding, Local Storage, React Fragments, CSR, SSR, Axios Biggest Learning Today: Choosing the right rendering strategy improves performance and SEO. Sheryians Coding School Sheryians Coding School Community #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #LearningInPublic #21DaysChallenge #BuildInPublic

Headline: Day 2: Making the Backend Dynamic! ⚡ Yesterday was about the basics, but today was all about Express.js and making things actually work. The "M" and "E" of my MERN journey are starting to click! 🚀 Here’s what I crushed in today's 3-video sprint: 🔹 Express.js & Middleware: Finally understood how requests flow through a server. Middleware is like the "Security Checkpoint" for every request. 🔹 Form Handling: Learned how to capture user data from the frontend and process it. No more static pages! 🔹 EJS & Dynamic Routing: This was the highlight! Creating templates with EJS and using dynamic parameters (like /profile/:username) to make the app feel alive. Current Status: 5.5 hours / 10 hours completed. ⏳ It’s one thing to watch a tutorial, but another to write the code and see it run on localhost:3000. The learning curve is steep, but the progress feels amazing. Big shoutout to Sheryians Coding School for keeping the concepts so practical. #WebDevelopment #MERNStack #ExpressJS #Backend #NodeJS #CodingProgress #100DaysOfCode #BuildInPublic @shreyance coding school