React Fundamentals: Building UI with JavaScript Components

I started learning React. And I already made a decision most beginners don't make until month 3. I'm not going to wait until I "know enough" to build something. I'm going to build while I learn. Here's my thinking 👇 Every React resource says: "Learn the fundamentals first." But no one tells you when "enough fundamentals" actually is. So beginners keep watching. Keep taking notes. Keep waiting for the perfect moment to start building. That moment never comes. The only way to make things click: → Components make sense when you're building real sections → Props make sense when you're passing your own data → State makes sense when you see it change on screen → Hooks make sense when they solve your actual problem Theory without application just fades. So starting today — I'm learning React by building my portfolio. Not a tutorial clone. My own thing. It'll be messy. That's fine. Messy and real beats clean and imaginary. If you're also learning React (or any framework): What's the first real thing you built? I'd love to know. #ReactJS #JavaScript #LearningInPublic #BuildInPublic #WebDevelopment #FrontendDevelopment #LearnToCode #CodingJourney

🚀 Day 10 of My React Learning Journey Today felt like a real developer day. 💻 Not just concepts… I actually built something useful + practical 👇 🌗 What I built: Dark Mode / Light Mode Theme Using Context API, I created a global theme system: • Toggle between dark & light mode • Share theme across components • Clean, scalable state management 🧠 What clicked today: Context API is not just for avoiding props drilling… 👉 It’s for building global systems like: • Themes • Authentication • User preferences 🌐 Also explored: React Router (first glimpse) This opened a completely new door 🚪 👉 From single page → to multi-page experience 👉 Navigation without reload 👉 Structuring apps like real products 🔥 Big Realization: Today I didn’t just learn features… I connected the dots between: • State management • UI behavior • App structure 📈 Mindset Shift: Before: → “How do I build components?” Now: → “How do I design an entire application experience?” 🚧 What’s next: • Improve my theme system (animations, persistence) • Go deeper into routing • Combine everything into a real project 💡 Every day I’m moving from: Learning React → Building real-world systems If you’re on the same journey or hiring someone passionate about frontend, let’s connect 🤝 Devendra Dhote , Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 4 of Learning React.js! Today I worked on handling forms and user input in React — a very important step for building real applications. 💡 What I learned today: • Handling input fields using useState • Controlled components • Handling form submission • Updating UI based on user input 👨💻 Tried a simple example: import React, { useState } from "react"; function FormExample() { const [name, setName] = useState(""); const handleSubmit = (e) => { e.preventDefault(); alert("Hello " + name); }; return ( <div> <h2>Simple Form</h2> <form onSubmit={handleSubmit}> <input type="text" placeholder="Enter your name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit">Submit</button> </form> </div> ); } export default FormExample; This helped me understand how React manages form data and keeps everything in sync with the UI ⚡ Learning step by step and enjoying the process 💪 If you have any tips or beginner-friendly project ideas, feel free to share 🙌 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #Programming #Developer #SoftwareDeveloper #LearningJourney #Day4 #100DaysOfCode #CodeNewbie #Tech #UI #Forms #ReactHooks #useState #Frontend #CodingLife #Developers #TechCommunity #LearnInPublic #WebDev #ReactLearning #BuildInPublic

🚀 Day 7 of My React Learning Journey Today I explored one of the most powerful hooks in React — useEffect And instead of just learning theory, I applied it to build something real 👇 🌦️ What I built: A Simple Weather App • Fetching real-time weather data from an API • Managing data flow with useState • Using useEffect to handle side effects (API calls) 🧠 What I truly understood today: useEffect is not just a hook… It’s how React interacts with the outside world. 👉 APIs 👉 Side effects 👉 Lifecycle behavior ⚙️ My Thinking Process: Instead of directly coding, I asked: • When should data be fetched? → On component load • How to avoid unnecessary calls? → Control dependencies properly • How does UI update? → State changes → triggers re-render 🔥 Key Learnings: • useEffect runs after render — not before • Dependency array controls behavior • Clean data flow = predictable UI • Real apps = UI + Side Effects + State 📈 What I’m improving next: This is just version 1. I’m planning to: • Improve UI/UX • Add loading & error states • Optimize API calls • Make it feel more production-level 💡 Big Mindset Shift: Before: → “How do I fetch data?” Now: → “When and why should data be fetched?” I’m documenting my journey of moving from: Learning React → Thinking like a React Developer If you’re building, learning, or hiring — let’s connect 🤝 Devendra Dhote Sheryians Coding School Kodex #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🚫 3 mistakes beginners make in React (I made all of them) When I started learning React, I thought I was doing everything right… Turns out, I was slowing myself down. Here are 3 mistakes most beginners make 👇 ❌ 1. Jumping into React without strong JavaScript basics React is just JavaScript at the end of the day. If you don’t understand concepts like closures, promises, or array methods, React will feel confusing. ✅ Fix: Spend time mastering JS fundamentals first. ❌ 2. Not understanding state properly Many beginners treat state like a normal variable… it’s not. Updating state incorrectly can break your app or cause unexpected behavior. ✅ Fix: Learn how useState works and how React re-renders components. ❌ 3. Copy-pasting code without understanding Following tutorials is fine… blindly copying is not. If you can’t explain your own code, you’re not really learning. ✅ Fix: After every tutorial, rebuild the project without looking. 💡 Bonus tip: Build small projects consistently. That’s where real learning happens. If you're learning React right now, which mistake are you making? 👇

𝐃𝐚𝐲 𝟑 𝐨𝐟 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐫𝐞𝐚𝐜𝐭 Recently, I’ve been learning about 𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤𝐬, and it’s been a game changer for how I understand React. Hooks allow us to use React features inside functional components no need for class components. Here are three important hooks I’ve learned so far: - 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞() This is used to manage state (data) inside a component. Think of it as a way to store values that can change over time and when they change, React automatically updates the UI. Example: toggling a password field, updating form inputs, counters, etc. - 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭() This hook runs code after a component renders (either when it is created or updated). It takes two parameters: 𝟏) A function (what should run) 𝟮) A dependency array (controls when it runs) - If the dependency array is empty [] it runs only once (when the component is created) - If it has values, it runs whenever those values change This is useful for things like fetching data, running side effects, or reacting to changes in state. - 𝘂𝘀𝗲𝗥𝗲𝗳() This is used to directly access or reference a DOM element without manually selecting it. Instead of using methods like document.querySelector, React provides useRef to safely interact with elements. It can also store values without causing a re-render. Still learning and building, taking it one concept at a time #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks #LearnInPublic #CodingJourney #TechJourney

🚀 React Native Hooks – Easy Explanation When I started learning React Native, hooks were confusing 😅 Now I understand them in a simple way: 🔹 useState 👉 Used to store data Example: count, input value 💡 Simple: Store & update value 🔹 useEffect 👉 Runs code after screen loads Example: API call, timer 💡 Simple: Do something after render 🔹 useCallback 👉 Saves function from re-creating 💡 Simple: Don’t create function again & again 🔹 useMemo 👉 Saves calculated value 💡 Simple: Don’t calculate again & again 🔹 useRef 👉 Store value without re-render 💡 Simple: Keep value safe without updating UI 🔹 useContext 👉 Share data globally 💡 Simple: Use data anywhere ⚡ Tip: Don’t use all hooks everywhere. Use only when needed. 💬 Learning step by step makes React Native easy 💪 #ReactNative #Learning #Coding #Developers #JavaScript #MobileApps

‎I just published a new article on Medium about learning React the right way in 2 months. ‎ ‎In the article, I break down: ‎• The best React learning stack ‎• The projects every beginner should build ‎• How to structure your daily coding routine ‎• What your GitHub should look like after 60 days ‎ ‎If you're starting your journey into frontend development, this guide will help you stay focused and build real projects. ‎ ‎You can read the full article here: ‎🔗 https://lnkd.in/eGREjXfD ‎ ‎Let me know what you think 👨💻 ‎

Learning React can be overwhelming when you're not sure what to learn next. Many beginners jump between tutorials without a clear direction, which slows down their progress. To help solve this, I wrote a step-by-step React roadmap that breaks down the exact concepts developers should focus on to build strong frontend skills. The article covers: • Core React fundamentals • Important tools and concepts to master • A structured path for becoming job-ready If you're learning frontend development or planning to start with React, this roadmap can help you stay focused. Read the full article here: https://lnkd.in/diZDrM3G #React #FrontendDevelopment #WebDevelopment #JavaScript #Programming

𝗗𝗮𝘆 𝟰 𝗼𝗳 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 Lately, I’ve been diving into React and I wanted to share a bit of what I’ve learned so far One of the first things that clicked for me was how to properly structure a React project. Instead of dumping everything in one place, I now organize my code into components and pages: - The components folder holds reusable UI pieces (like Navbar, Buttons, Cards, etc.) - The pages folder contains components that are specific to a particular page (like Home, Checkout, Orders) This makes the codebase cleaner and easier to scale as the project grows. I also started learning React routing, which is a game changer. It allows you to create multiple “pages” in a single-page application without needing multiple HTML files. - Routes act as a container that holds all your route definitions - Route is used to define a specific path and what component should render for that path For example, you can define different views like /, /checkout, /orders — all within the same app. Another interesting thing I learned is navigation using the Link component. Instead of using the normal <a> tag (which reloads the page), React Router provides <Link>: -It uses to instead of href -It allows smooth navigation without reloading the page This makes the app feel faster and more like a real application rather than a traditional website. Still early in my React journey, but things are starting to make more sense step by step. Looking forward to building more and improving 💪 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #BeginnerDeveloper #BuildInPublic