React Learning Project: Fundamentals and Component-Based Development

Strings look simple… until you actually start solving problems with them Today I spent time doing DSA on Strings, and honestly, it was one of those “simple but tricky” days. While solving problems, I explored a lot of string methods like: • slice() • substring() • split() • indexOf() • concat() And that’s when I realized — knowing methods is one thing, but knowing when to use which one is the real game. Then came my React session at Sheryians Coding School (Kodex Batch) with Devendra Dhote bhaiya And things got even more interesting. We explored form handling in a more optimized way using useRef() — which felt very different from the usual useState approach. Also got introduced to form handling using npm packages, which made me realize how real-world apps handle complex forms much more efficiently. Today’s takeaway: Sometimes the basics (like strings & forms) teach you the deepest lessons. What do you find more tricky — Strings in DSA or Forms in React? #JavaScript #DSA #ReactJS #WebDevelopment #LearningInPublic #SheryiansCodingSchool #FrontendDevelopment

Day 77 of #100DaysOfCode – Understanding useEffect in React Today I focused on useEffect and how it works with state changes in React. Built a small example where clicking a button increases a counter, and every time the counter updates, useEffect triggers an API call to fetch a random user from the Random User API and display their name. What I Learned & Implemented: Using useEffect() to handle side effects Understanding the dependency array Triggering API calls when state changes Fetching data using Axios + async/await Updating UI dynamically based on API responses Key Takeaway: useEffect allows React components to perform tasks like API calls, data fetching, or subscriptions whenever state or props change. Understanding dependencies is key to controlling when effects run. Grateful to Sarthak Sharma from Sheryians Coding School and the Sheryians Coding School Community for making concepts like useEffect and API-driven React workflows much clearer. #100DaysOfCode #ReactJS #useEffect #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic

👨💻 Master JavaScript Concepts!🔥 😊 𝐇𝐚𝐩𝐩𝐲 𝐜𝐨𝐝𝐢𝐧𝐠! 💯 Follow Shubham Kamble For Development, Programming Tips & Tricks, and Job Opportunities. 👍 𝑯𝒊𝒕 𝒍𝒊𝒌𝒆, if you found it helpful ! 🔁 𝑹𝒆𝒑𝒐𝒔𝒕 it to your network ! 🔖 𝑺𝒂𝒗𝒆 it for the future ! 📤 𝑺𝒉𝒂𝒓𝒆 it with your connections ! 💭 𝑪𝒐𝒎𝒎𝒆𝒏𝒕 your thoughts ! Credits - Bosscoder Academy #JavaScript #Concepts #Development #WebDev #Frontend w3schools.com JavaScript Mastery

🚀 Built a Modern React Todo App with Validation & Toast Notifications As part of my React learning journey, I built a fully functional Todo Application using: ⚛️ React (Vite) 💨 Tailwind CSS 📝 react-hook-form (Form Validation) 🔔 react-toastify (Notifications) 📦 nanoid (Unique IDs) ✨ Features: - Add & delete todos - Form validation (no empty inputs) - Toast notifications for actions - Clean responsive UI - Component-based architecture - State management using useState - Props drilling implementation This project helped me strengthen my understanding of: - React Hooks - Controlled forms - Component communication - Real-time state updates - Third-party library integration More improvements coming soon: ✔ Mark as completed ✔ LocalStorage persistence ✔ Edit feature Repo Link: https://lnkd.in/dNgtDKCB Sheryians Coding School | Dhanesh Parwati Malviya #ReactJS #WebDevelopment #FrontendDeveloper #MERNStack #JavaScript #TailwindCSS

👨💻 React State Vs Props: Know the Difference!🔥 😊 𝐇𝐚𝐩𝐩𝐲 𝐜𝐨𝐝𝐢𝐧𝐠! 💯 Follow ABDUL REHMAN ♾️ For Development, Programming Tips & Tricks, and Job Opportunities. 👍 𝑯𝒊𝒕 𝒍𝒊𝒌𝒆, if you found it helpful ! 🔁 𝑹𝒆𝒑𝒐𝒔𝒕 it to your network ! 🔖 𝑺𝒂𝒗𝒆 it for the future ! 📤 𝑺𝒉𝒂𝒓𝒆 it with your connections ! 💭 𝑪𝒐𝒎𝒎𝒆𝒏𝒕 your thoughts ! Credits - Respective Owners Follow To Learn: w3schools.com , JavaScript Mastery #React #State #Props #Difference #WebDev w3schools.com JavaScript Mastery

👨💻 React State Vs Props: Know the Difference!🔥 😊 𝐇𝐚𝐩𝐩𝐲 𝐜𝐨𝐝𝐢𝐧𝐠! 💯 Follow ABDUL REHMAN ♾️ For Development, Programming Tips & Tricks, and Job Opportunities. 👍 𝑯𝒊𝒕 𝒍𝒊𝒌𝒆, if you found it helpful ! 🔁 𝑹𝒆𝒑𝒐𝒔𝒕 it to your network ! 🔖 𝑺𝒂𝒗𝒆 it for the future ! 📤 𝑺𝒉𝒂𝒓𝒆 it with your connections ! 💭 𝑪𝒐𝒎𝒎𝒆𝒏𝒕 your thoughts ! Credits - Respective Owners Follow To Learn: w3schools.com , JavaScript Mastery #React #State #Props #Difference #WebDev w3schools.com JavaScript Mastery

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

Today I was working with React and noticed something interesting. Sometimes a single line of code can make things much simpler and cleaner. Here are 5 small React patterns that I find really useful: 1.Conditional rendering {isLoggedIn && } 2.Ternary rendering {isLoggedIn ? : } 3.Destructuring props const { title, description } = props 4.Rendering lists with map {items.map(item => {item.name})} 5.Passing props using spread <Component {...props} /> React has many features like this that make code shorter and easier to read. The more I explore it, the more I realize how powerful simple patterns can be. #reactjs #javascript #webdevelopment Sheryians Coding School

When I first started learning React, React Hooks were one of the most confusing parts for me. I especially struggled with understanding when to use useEffect, useMemo, or useCallback. Most resources explained the theory, but I wanted something more practical. So I built something I wish I had back then — an interactive, self-learning course for the most commonly used React Hooks. NOTE :- FOR BETTER LEARNING EXPERIENCE CLONE THE REPOSITORY 🔗 Live Demo: https://lnkd.in/gsNN-W24 💻 GitHub: https://lnkd.in/g3h3nm9M The course covers: • useState • useEffect • useRef • useMemo • useCallback • useReducer • useContext • Custom Hooks Each lesson includes: • Simple, beginner-friendly explanations • Interactive examples you can experiment with • A section on common mistakes • Small practice challenges The goal was to make learning hooks more practical and less overwhelming, especially for beginners. I’m currently deploying it and would really appreciate honest feedback from the community. If you're learning React (or helping someone who is), this might be useful. #react #javascript #webdevelopment #frontend #learninpublic #coding #reacthooks #beginners #developer

Strengthening JavaScript Fundamentals + React Learning Today I focused on improving both DSA fundamentals and React concepts. What I practiced in DSA • Bubble Sort • Selection Sort • Insertion Sort Working on these sorting algorithms helped me better understand how arrays can be organized efficiently and how algorithm logic works step by step. Alongside DSA, I attended my React class at Sheryians Coding School (Kodex Batch) guided by mentor Devendra Dhote Concepts I learned today • Lexical Scoping • Scope Mapping • Shadowing I also learned how these concepts affect state updates in React, especially when working with useState. Practical understanding • Managing state when the data is an object • Updating state when the data is an array Understanding how JavaScript scope works internally is helping me write cleaner and more predictable React code. #ReactJS #JavaScript #DSA #WebDevelopment #SortingAlgorithms #LearningInPublic #SheryiansCodingSchool #FrontendDevelopment