Mastering React with JavaScript Fundamentals

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

I’m starting something new today. For the next few weeks, I’m going to learn JavaScript seriously and I’ll be documenting the entire journey here on LinkedIn. No skipping concepts. No pretending I know things I don’t. Just learning step by step and sharing what I understand each day. Why am I doing this publicly? Because learning in public keeps you accountable. And sometimes the best way to understand something is to explain it to others. Starting from the basics: → JavaScript fundamentals → Variables, functions, loops → DOM manipulation → APIs and async JavaScript → and eventually moving towards React Every day I’ll post one concept I learned, explained in simple terms. If you’re also learning JavaScript or you already work with it feel free to follow along, share advice, or correct me when I’m wrong. Let’s build and learn together. Day 1 starts tomorrow. #LearningInPublic #JavaScript #WebDevelopment #100DaysOfCode #Frontend #Coding

Day 17/21 – My First Steps with React.js ⚛️ Today I started learning React.js, and it already feels like a big shift from traditional JavaScript. To understand the basics, I built a small interactive example using useState. Here’s what the mini project does: • A button increases marks by +5 every time it’s clicked • The total marks update dynamically on the screen • If marks become greater than 35 → the student is marked as PASS • Otherwise the status remains FAIL Concepts I practiced today: • Creating React components • Using the useState hook • Handling button click events • Conditional rendering in React • Updating the UI dynamically based on state This small example helped me understand the power of state management in React— when the state changes, the UI automatically updates. Learning and building consistently with the #21DaysCodingChallenge by #sheryianscodingschool 🚀 #Day17 #ReactJS #FrontendDevelopment #JavaScript #LearningInPublic #BuildInPublic

🚀 Learning React: Understanding Props Today, I learned an important concept in React called Props (Properties). Props allow us to pass data from one component to another, making our code more dynamic, reusable, and efficient. Instead of writing the same code again and again, we can create flexible components that adapt based on the data they receive. 🔑 Key Takeaways: Props are used to transfer data between components They make components reusable Props are read-only (cannot be modified inside the component) 📌 Example: We can pass values like names, images, or functions from a parent component to a child component using props. Learning props is a big step toward building real-world React applications 💻 #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #LearnToCode #ReactLearning

JavaScript 20Days Challenge 🚀 Consistency continues! Today marks Day 3 of my 20-day JavaScript learning challenge, where I focus on learning JavaScript concepts and building small projects daily. 🎨 Day 3 Project: Random Background Colour Generator Today I built a simple but interactive Random Background Colour Generator using JavaScript. When the user clicks the button, the page background changes to a randomly generated color and displays the HEX color code on the screen. 💡 Concepts I practiced today: • Generating random values using Math.random() • Converting numbers to HEX color codes • DOM manipulation with querySelector() • Updating UI dynamically with innerText • Handling button click events This small project helped me understand how JavaScript can dynamically change styles and create interactive UI experiences. 📅 Day 3/20 completed — learning, building, and improving every day. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #BuildProjects #JS #Github #MernStack

🚀 Day 2 of My TypeScript Journey! Today was packed with learning — here's everything I covered: 📌 03 - Functions ✅ Function types & return types ✅ Optional parameters (?) ✅ Default parameters ✅ Arrow functions ✅ Rest parameters (...args) ✅ Function overloading 📌 04 - Async/Await ✅ What is a Promise? ✅ resolve & reject ✅ .then() & .catch() ✅ async/await syntax ✅ try/catch error handling ✅ Promise.all() — run multiple async tasks together 💡 Key Takeaways: 1️⃣ Always define return types in functions   → makes code predictable & safe 2️⃣ Use optional (?) for params that may not exist   → great for API responses 3️⃣ async/await is just cleaner Promise syntax   → same thing, easier to read 4️⃣ Always wrap await in try/catch   → never let errors crash your app 5️⃣ Promise.all() saves time   → runs multiple calls together instead of one by one 🔥 Tips & Tricks: → void = function returns nothing → never use any[] in rest params if you can avoid it → Promise<T> — always specify what type will return → async function always returns a Promise — even if you don't write it 📂 All code on GitHub: https://lnkd.in/dPRGnVsx Day 3 tomorrow — Generics! 💪 #TypeScript #100DaysOfCode #WebDevelopment #JavaScript #NodeJS #Pakistan #Developer #Coding #OpenToWork #NextJS #NestJS

React Hooks changed how we write React applications. Before hooks, we had to use class components for state and lifecycle methods. It made code harder to read and manage. Now with hooks, everything becomes simpler and cleaner. useState helps manage state useEffect handles side effects like API calls useRef gives direct access to DOM useContext helps avoid prop drilling Hooks make code more reusable, readable, and maintainable. If you are learning React today, mastering hooks is not optional. It is the foundation of modern React development. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Coding #SoftwareDevelopment #SolGuruz #ReactHooks

⚛️ One concept that confused me a lot while learning React was: Props vs State At first they both felt similar. But a simple way to understand it is: 🔹 Props → Data passed from parent component 🔹 State → Data managed inside the component Example mindset: Props = Inputs State = Internal memory Props are read-only. State can change over time. Once I understood this difference, React components started making much more sense. Building UI is really about managing data flow properly. React just gives us a structured way to do it. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #FullStackDeveloper Ankur Prajapati MOHD ALI ANSARI Sheryians Coding School

🚀 Day 15 of My #React Learning Journey – #Functional vs #Class #Components Today I explored the difference between Functional Components and Class Components in React. 🧠 #FunctionalComponents ✔ Simple JavaScript functions that return JSX ✔ No render() method required ✔ Use React Hooks for state & lifecycle ✔ Less code, easier to read and maintain ✔ Preferred in modern React development 🧠 #ClassComponents ✔ Must extend React.Component ✔ Requires a render() method ✔ Uses this.state for state management ✔ Lifecycle methods like componentDidMount() ✔ More boilerplate and complex structure ⚡ Key Differences 🔹 State Management Functional → useState (Hooks) Class → this.state 🔹 Lifecycle Handling Functional → useEffect Class → lifecycle methods 🔹 Code Complexity Functional → Simple & clean Class → More complex 🔹 Performance & Usage Functional → More efficient & widely used today Class → Older approach (still useful but less common) 💡 My Takeaway: Functional components with Hooks have become the standard way of building React applications due to their simplicity and flexibility. Excited to keep learning and building more with React! 💻✨ #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningJourney #10000 Coders

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 19/30 I left a page… and React threw a scary warning 😐 “Can't perform a state update on an unmounted component” I wasn’t even touching state. The real culprit? setTimeout. The user navigated away, but the timer still executed and tried updating state. Component gone ❌ Timer still running ✔️ Fix 👇 return () => clearTimeout(timer) Always clean up inside `useEffect`. Timers, listeners, and API calls must be cancelled. Small habit. Prevents huge debugging sessions. Have you faced this warning? #30DaysOfCode #reactjs #javascript #frontend #codeinuse