React Router Navigation in React Apps

🚀 Day 5 of My React Learning Journey: State in React Today I learned about State, which makes React applications dynamic and interactive 👇 🔹 What is State? State is a built-in object in React used to store data that can change over time. When the state changes, the UI automatically updates (re-renders). 🔹 Why State is Important? Makes UI dynamic and interactive ⚡ Triggers re-render when data changes Helps manage component-specific data Used for user actions (clicks, inputs, etc.) 🔹 Key Concept State is mutable and managed inside the component using Hooks like useState. 🔹 Simple Example import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } function App() { return <Counter />; } 💡 My Takeaway: State is what makes React apps come alive by updating the UI based on user interactions. 📌 Next, I’ll be learning about Event Handling in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 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

🚀 Day 3 of My React Learning Journey: Components in React Today I learned about Components, the building blocks of React applications 👇 🔹 What is a Component? A component is a reusable and independent piece of UI. It can be anything like a button, header, or even a full page. 🔹 Why Components are Important? Makes UI reusable ♻️ Keeps code clean and organized Helps break complex UI into smaller parts Improves scalability of applications 🔹 Key Concept React applications are built by combining multiple components together. 🔹 Simple Example function Welcome() { return <h1>Hello, User 👋</h1>; } function App() { return <Welcome />; } 💡 My Takeaway: Components make React powerful by allowing us to build reusable and modular UI. 📌 Next, I’ll be learning about Props in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Starting My React Learning Journey This week I started Phase 2 of my MERN roadmap — React development. Instead of jumping straight into libraries or complex features, I'm focusing on understanding how React actually works under the hood. Two important ideas clicked for me in the first two days. 🧠 1. UI = Function of State In traditional JavaScript, we often manipulate the DOM manually. But React takes a different approach. When state changes → React re-runs the component → the UI updates automatically. This shifted my thinking from: “How do I update the DOM?” to “What state should the UI represent?” 🧩 2. React Apps Are Built as Component Trees Rather than writing one large UI file, React encourages breaking interfaces into small reusable components. Example structure: App ├ Header ├ NotesList │ └ NoteCard └ Footer Each component has a single responsibility, which makes applications easier to maintain and scale. For now I'm focusing on building a strong mental model of React before moving forward. Next step in my roadmap: JSX and Props. #React #WebDevelopment #MERNStack #LearningInPublic

🚀 Day 4 of My React Learning Journey: Props in React Today I learned about Props, which help components communicate with each other 👇 🔹 What are Props? Props (short for properties) are used to pass data from a parent component to a child component. They make components dynamic and reusable. 🔹 Why Props are Important? Enable data sharing between components 🔄 Make components reusable and flexible Help build dynamic UI Follow one-way data flow (parent → child) 🔹 Key Concept Props are read-only (immutable) and cannot be modified by the child component. 🔹 Simple Example function Greeting(props) { return <h1>Hello, {props.name} 👋</h1>; } function App() { return <Greeting name="Sanket" />; } 💡 My Takeaway: Props make components more powerful by allowing them to display different data based on input. 📌 Next, I’ll be learning about State in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 1 of My React Learning Journey: What is React? I’ve started learning React today, and here’s a simple breakdown 👇 🔹 What is React? React is a JavaScript library used to build dynamic and interactive user interfaces, especially for single-page applications (SPAs). 🔹 Why is React so popular? Component-based architecture (reusable UI parts) Virtual DOM for faster performance Easy to build scalable applications Strong community support 🔹 Key Concept Instead of updating the entire page, React updates only the parts that change — making apps faster and smoother ⚡ 🔹 Simple Example function App() { return <h1>Hello, React!</h1>; } 💡 My Takeaway: React makes UI development more structured and efficient compared to plain JavaScript. 📌 This is just the beginning—next I’ll be learning about JSX! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode

Project #19: Social Media App 📱 As part of my React learning journey, this project is one of the most comprehensive applications I’ve built so far during my training with Route. It is a social media application that simulates real-world features, where I combined multiple front-end concepts into one structured project. Tech Stack React • Tailwind CSS What I worked on Building a multi-page application using React Implementing routing and navigation between pages Creating reusable and maintainable components Managing UI states such as loading and interactions Designing responsive layouts using Tailwind CSS Features Authentication system (Login / Register) Home feed displaying posts User profile and user data handling Creating new posts Viewing post details Fetching and displaying data from APIs Loading states using spinners Reusable UI components across the application What I learned Structuring scalable React applications Working with APIs and dynamic data Managing application flow between multiple pages Writing more organized and reusable code Thinking in terms of real-world application architecture Demo: https://lnkd.in/dYAvb5Y5 GitHub Repo: https://lnkd.in/dz8hbHwb #React #TailwindCSS #FrontEnd #WebDevelopment #FrontendDeveloper #LearningJourney #Route #JavaScript #WebApp

⚡Day 1 of My React Learning Journey: What is React? I've started learning React today, and here's a simple breakdown What is React? React is a JavaScript library used to build dynamic and interactive user interfaces, especially for single-page applications (SPAs). Why is React so popular? Component-based architecture (reusable Ul parts) Virtual DOM for faster performance Easy to build scalable applications Strong community support Key Concept Instead of updating the entire page, React updates only the parts that change - making apps faster and smoother Simple Example function App() { } return <h1>Hello, React!</h1>; My Takeaway: React makes Ul development more structured and efficient compared to plain JavaScript. This is just the beginning-next I'll be learning about JSX!⚡ + Follow my journey as I learn React step by step #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode

Continuing my React Learning Journey 🚀 Today I picked up where I left off with React Router and things got a lot more interesting. Part 2 was all about making navigation actually feel dynamic — and it delivered. Here is what I covered: — Blog Application — Navigating to a Specific Blog Route: Until now I was navigating between fixed pages like Home and About. Today I learned how to navigate to a specific blog post based on what the user clicks. Each blog has its own unique route and clicking on it takes you exactly there. This is how every real blog or news website works and building it myself made it feel very real. Navigating Back to the Home Page: This sounds simple but there is a right way and a wrong way to do it in React. Using the browser's back button is one thing but handling it properly inside the app using React Router is another. I learned how to give users a clean and intentional way to go back without breaking the navigation flow. Accessing Path Params with useParams(): This was honestly the most exciting part of today. When you navigate to a specific blog, how does React know which blog to show? That is where path params come in. The URL carries the information and useParams() lets you read it inside the component. One hook, and suddenly your entire component knows exactly what content to display. It is fascinating how much work React Router does quietly in the background to make applications feel seamless 💪 react.js #ReactRouter #WebDevelopment #LearningInPublic Javascript Frontend development NxtWave

🚧 Learning React: Error Boundaries (and something unexpected…) While practicing React, I built a simple component that intentionally crashes: const BuggyComponent = () => { throw new Error("I crashed!"); }; 💥 Result? The entire app crashed. That made me think: 👉 In real apps, should one component break everything? 🛠️ Then I discovered Error Boundaries I wrapped the crashing component like this: <ErrorBoundary> <BuggyComponent /> </ErrorBoundary> Now instead of crashing: ✅ Only that part fails ✅ A fallback UI is shown ✅ The rest of the app still works 🤯 But here’s what confused me… I’ve been using functional components + hooks everywhere So why is this still a class component? After digging deeper: 1. Error Boundaries rely on lifecycle methods 2. They catch errors during the render phase 3. Hooks (like useEffect) run after render 👉 That’s why hooks can’t replace this (yet) 🧠 What I learned: 1. Error Boundary = try-catch for UI 2. Prevents full app crash 3. Works only for: >rendering errors >lifecycle methods 4. Doesn’t catch: >event handlers >async code 🚀 My takeaway: Even in modern React apps: 👉 We still use one class component for stability 👉 Everything else stays functional Still learning, still exploring. If you’ve used error boundaries in production: 👉 Do you wrap the whole app or specific components? #React #Frontend #WebDevelopment #LearningInPublic