React Rendering Strategies & API Communication

Day 16 / 21 Learning Challenge Today I learned how routing works in React using React Router DOM. Study Time: 4 hours Key Learnings: • React Router DOM for client side routing • BrowserRouter, Routes, and Route setup • Navigation using Link without page reload • Dynamic routing using useParams • Nested routing and Outlet • Handling invalid routes using 404 page What I Learned React Router DOM helps create multiple pages inside a single page application. It updates only the required component without refreshing the browser. Core Concepts • BrowserRouter wraps the app and enables routing • Routes contains all route definitions • Route connects URL path with component • Link handles navigation without reload Dynamic Routing Used when URL contains variable data. Example: /user/101 useParams reads values from URL. Nested Routing Used for complex layouts like dashboards. Parent route contains child routes. Outlet renders child components inside parent layout. 404 Route Used when no route matches the URL. Path "*" catches all invalid routes and shows a Not Found page. Practice Done • Set up basic routing with multiple pages • Navigated between pages using Link • Created dynamic routes using useParams • Implemented nested routing with Outlet • Added 404 page for invalid routes Challenge Faced Understanding nested routing and how Outlet renders child components. Solution Applied Built small examples and tested route behavior step by step. Today’s Outcome Clear understanding of how React handles navigation without page reload. 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, useEffect, React Router DOM Biggest Learning Today React Router enables smooth navigation and improves user experience in web applications. Sheryians Coding School Sheryians Coding School Community #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #LearningInPublic #21DaysChallenge #BuildInPublic

🚀 React Learning Journey (Day Update) Today I spent time understanding the core fundamentals of React — trying to build a strong base before jumping into advanced topics. Here’s a quick summary of what I explored 👇 What is React?:- A JavaScript library for building UI using reusable components. Components:- Break the UI into small reusable pieces. function Welcome() { return <h1>Hello React</h1>}; JSX & Rules:- Write HTML inside JavaScript (with some rules like className, single parent, etc.) <h1 className="title">Hello</h1> Props (Data Passing):- Send data from parent to child component. function User({ name }) { return <h2>{name}</h2>}; Conditional Rendering:- Show UI based on conditions. {isLoggedIn ? <p>Welcome</p> : <p>Login</p>}; Looping Data (map):- Render lists dynamically from arrays or objects. {items.map(item => <p key={item.id}>{item.name}</p>)}; Small concepts individually, but together they form the foundation of building real-world React applications. Still learning, still building. 🚀 #ReactJS #JavaScript #WebDevelopment #LearningJourney

Most tutorials teach you what to build. Today I finally understood how things actually work under the hood. Day 4 of my React learning journey 🚀 Here’s what I worked on: • Built Create & Read functionality from scratch • Split logic into two separate components (cleaner + reusable) • Learned how to use React Hook Form • Understood how forms are managed efficiently using hooks Key insight: Handling forms in React doesn’t have to be messy. With the right approach (and tools like React Hook Form), you stop fighting state management… and start controlling it. Real moment: At first, managing inputs and state felt confusing — too many moving parts. But once I connected how hooks simplify the flow, everything started making sense. That shift from confusion → clarity was the real win today. Still early in the journey, but now I can see how real-world apps handle user data step by step. Building slowly. Understanding deeply. Devendra Dhote Sheryians Coding School #ReactJS #WebDevelopment #JavaScript #LearningInPublic #FrontendDev

React Learning Series | Day 10 – Forms in React (Controlled Components) ->In React, forms are used to collect user input such as text, email, and passwords. ->React uses controlled components, where form data is managed using state. ->This gives full control over input values and behavior. Example: import { useState } from "react"; function Form() { const [name, setName] = useState(""); return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <p>Hello, {name}</p> </div> ); } Explanation: --useState stores input value --onChange updates state --UI updates automatically when user types Why Forms are Important: ✔ Handle user input ✔ Build interactive applications ✔ Enable validation and data control --->Controlled components make form handling predictable and efficient in React. 📌 Day 10 of my React Learning Series #ReactJS #ReactDeveloper #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #DeveloperJourney #TechLearning #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 9 – Conditional Rendering ->In React, conditional rendering allows components to display different UI based on certain conditions. ->It helps create dynamic and responsive user interfaces. ->You can use JavaScript conditions like if, ternary operator, or && operator inside JSX. Example: function LoginStatus({ isLoggedIn }) { return ( <div> {isLoggedIn ? <h2>Welcome Back!</h2> : <h2>Please Login</h2>} </div> ); } Explanation: --If isLoggedIn is true → shows “Welcome Back!” --If false → shows “Please Login” Why Conditional Rendering is Important: ✔ Displays dynamic content ✔ Improves user experience ✔ Controls UI based on state or props --->Conditional rendering makes React apps interactive and user-friendly. 📌 Day 9 of my React Learning Series #ReactJS #ReactDeveloper #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #DeveloperJourney #TechLearning #LinkedInSeries 🚀

Today’s React Learning Update 🚀 Today I continued practicing React by building a small project and learning some important concepts. What I learned today: • Display countries using fetch and use() in React • Show country flags and handle possible data errors • Apply styling in React with a 3-column layout and conditional text • Use conditional CSS and toggle state on click • Lift up state and pass handlers as props • Advanced: lift up state in arrays by comparing references • Manage flags with immutable array updates • Deploy the Rest Countries project to Netlify / Surge Each small project helps me understand React concepts more clearly and improve my frontend development skills. Looking forward to building more! 💻 Live Link: https://lnkd.in/gH_ChEBf #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningJourney

🚀 Thrilled to announce the launch of LearnJS – A Modern Learning Platform for JavaScript! After investing significant time and effort, I'm excited to share a project that combines cutting-edge web technologies with a passion for education. LearnJS is a thoughtfully designed, fully interactive web application featuring curated lessons of JavaScript, built with React and powered by Vite for lightning-fast performance. 🎯 Project Overview LearnJS is more than just another coding tutorial site. It's a modern, interactive learning experience designed to break down complex JavaScript concepts into digestible, practical lessons. Built with React's component-driven architecture and Vite's blazing-fast development experience, this platform delivers both educational value and technical excellence. Whether you're a complete beginner taking your first steps into programming or an experienced developer looking to deepen your JavaScript knowledge, this platform has something for you. Live Platform: https://lnkd.in/gn4i4nJa GitHub Repository: https://lnkd.in/gUwnkBW9

Day 13 to Day 18 of my React learning journey. This phase focused on revision and practice. Revising concepts helped me strengthen my fundamentals. Concepts I revised. • React component structure • Props and data flow between components • useState for managing state • useEffect for API calls • How React re renders components • Virtual DOM comparison with real DOM Practice work. • Reviewed earlier code and fixed mistakes • Practiced passing props between components • Practiced handling API responses • Improved component structure Projects I practiced again. • Background color changer • Password generator • GitHub API fetch project • Weather app using API Key learning. Rebuilding projects improves debugging skills. Writing code again improves understanding. Next focus. • Build another React project to practice these concepts • Learn better ways to structure React components • Practice more API based projects • Improve problem solving while coding • Continue learning new React concepts #React #WebDevelopment #FrontendDevelopment #LearningInPublic #ReactJS #CodingJourney

Day 17 of my 21 Days Learning Challenge Today I revisited a React pattern — Higher Order Components (HOC). A Higher Order Component is a function that takes a component and returns a new enhanced component. It’s mainly used to reuse logic across multiple components. 🔹 What is an HOC? In simple terms: JavaScript const EnhancedComponent = HOC(OriginalComponent); Instead of repeating logic in multiple components, we wrap them with an HOC. 1️⃣ Example JavaScript function withLogger(Component) { return function WrappedComponent(props) { console.log("Props:", props); return <Component {...props} />; }; } Using it: JavaScript const User = ({ name }) => <h2>{name}</h2>; const UserWithLogger = withLogger(User); Now every time UserWithLogger renders, it logs props automatically. 2️⃣ Why use HOC? HOCs help: • reuse logic • keep components clean • separate concerns 3️⃣ Where it is used HOCs are commonly used for: • authentication checks • logging • data fetching • permissions handling 🔹 Note With modern React, Custom Hooks are often preferred for logic reuse, but HOCs are still important to understand as they are widely used in existing codebases. Revisiting HOCs reminded me how React provides multiple ways to structure and reuse logic, and choosing the right pattern depends on the use case. #21DaysChallenge #ReactJS #JavaScript #LearningInPublic #FrontendDevelopment #WebDevelopment Sheryians Coding School