Learning React with useEffect and Fetch API

Simpler code is better. So, you're building apps with React - and let's be real, who doesn't love the idea of keeping their code clean and easy to read? But have you ever stopped to think about just how many imports you're dealing with? It's crazy, right? You're importing libraries just to toggle a CSS class, and before you know it, your code is looking cluttered. What if I told you there's a way to make your code cleaner, without all those extra imports? You can use a new way of writing JSX that's more straightforward. For instance, take a look at this example: you can write a Card component with just a few lines of code, and it's actually pretty elegant. It's all about using the language to your advantage - and in this case, that means using JSX in a way that feels more natural. You define your Card component, and then you're using a simple div with some conditional classes, like 'border-blue-500' if it's active, or 'opacity-50 cursor-not-allowed' if it's disabled. And the best part? You don't need any extra imports to make it work. To get started, you just need to tell your compiler to use the new runtime - which is as simple as adding a couple of lines to your tsconfig.json or jsconfig.json file. You add "jsx": "react-jsx" to your compiler options, and then you add "jsxImportSource": "clsx-react". And that's it - you're good to go. You can even use this approach with Vite or Babel, which is pretty cool. The benefits are clear: you're removing unnecessary imports, you're getting rid of visual clutter in your JSX, and you're getting back to writing simple, straightforward code. It's a game-changer, trust me. So why not give it a try and see how it works for you? Source: https://lnkd.in/gSs6398r Optional learning community: https://lnkd.in/geSQUpYM #React #JSX #CleanCode

🚀 Relearning MERN & Backend Fundamentals with Express.js! I just finished building a practice project using Node.js and Express.js, and I’m sharing it along with a walkthrough video. In this project, I focused on: ✅ Handling routes and views ✅ Serving static files (CSS & Tailwind) ✅ Receiving form data and logging it to the console ✅ Using body-parser and urlencoded middleware ✅ Organizing a clean project structure — check it out and guide me if anything can be improved! 💡 Note: This site is just a demo; some paths are not fully functional yet. 📂 If you want to see the full code, you can check my GitHub repo here: [ https://lnkd.in/gPHHc7zX ] ✅ Star, fork, and follow me on GitHub if you find it useful! 🎥 Watch the full video walkthrough where I explain the project structure, form handling, and how everything ties together. Feedback is always welcome — let me know in the comments if you have suggestions! 🙌 #NodeJS #ExpressJS #BackendDevelopment #MERNStack #WebDevelopment #TailwindCSS #LearningInPublic #DeveloperJourney #GitHub

Hi there! I’d like to share the result of my homework assignment “Creating an React based Image Search Application using HTTP requests. Working with API” As part of this task, I built an application that allows users to search for images by keyword using an external API. What was implemented and used: - React with a modern development approach - React hooks such as useState(), useEffect(), useRef(), and others - HTTP requests to fetch data from an API - Dynamic image search functionality - Viewing detailed image information When opening an image, additional data from the API is displayed, including: number of likes, views and the nickname of the user who originally uploaded the image. Working with API is a very nice task to train your understanding of using data in creative way. It also brings me closer to the future work with Back-end and creating my own data storages. You can try it out by the link and see you soon with the next assignment! https://lnkd.in/eP49y26i #GoITNeoversity #React #JavaScript #API #Frontend #WebDevelopment #LearningJourney

🚀 Understanding Redux by Building My Own Redux Library (Learning by Doing!) As a React developer, I always used Redux, but recently I decided to understand how Redux actually works internally instead of treating it like a black box. So I explored the core ideas behind a custom ReduxLibrary 👇 🔹 Core Concepts I Focused On Single source of truth (store) State updates via actions Pure reducer function Subscribe & notify mechanism Dispatch flow 🔹 Simple Redux-like Store (Core Logic) function createStore(reducer) { let state; let listeners = []; function getState() { return state; } function dispatch(action) { state = reducer(state, action); listeners.forEach(listener => listener()); } function subscribe(listener) { listeners.push(listener); return () => { listeners = listeners.filter(l => l !== listener); }; } dispatch({ type: "@@INIT" }); return { getState, dispatch, subscribe }; } 🔹 Reducer Example function counterReducer(state = { count: 0 }, action) { switch (action.type) { case "INCREMENT": return { count: state.count + 1 }; case "DECREMENT": return { count: state.count - 1 }; default: return state; } } 🔹 How Dispatch Works (Internally) 1️⃣ dispatch(action) is called 2️⃣ Reducer receives previous state + action 3️⃣ Reducer returns new state (immutably) 4️⃣ Store updates state 5️⃣ All subscribers (React components) are notified 💡 Key Learnings Redux is just JavaScript, no magic Reducers must be pure functions State updates are predictable & traceable Understanding internals improves debugging & architecture decisions This exercise helped me write better Redux code, avoid unnecessary re-renders, and clearly explain Redux in interviews. 📌 If you’re learning React/Redux, I highly recommend implementing a mini Redux yourself at least once. #ReactJS #Redux #JavaScript #FrontendDevelopment #LearningByDoing #WebDevelopment #InterviewPrep #CleanCode

Most React beginners aren’t bad at React — they’re bad at thinking in data flow. They focus on: 1. Files 2. Folder structure 3. Hooks syntax But React doesn’t care about any of that. What actually matters is: 1. Where data lives 2. How it moves 3. Who owns the state Once you understand data flow, React suddenly feels simple. Components stop fighting each other. Bugs become easier to reason about. This mindset shift changed how I write frontend code. Be honest Did React start making sense for you only after you understood data flow? Or are you still stuck thinking in files? #React #FrontendDevelopment #JavaScript #WebDevelopment #LearningToCode

☕ Node.js is not magic — it’s just a very smart chai wala. Let’s break down Node.js using a simple analogy to understand it better. Think of Node.js as a busy chai stall during rush hour. There’s one chai wala at the counter, but he doesn’t stop the line for every chai. He takes orders, writes them down, hands them to helpers, and keeps serving the next customer. That’s exactly how Node.js works 👇 • One main thread (the chai wala) • An Event Loop that keeps checking tasks • Non-blocking I/O (helpers doing the heavy work) • Thousands of requests handled efficiently Once I started looking at Node.js this way, concepts like the Event Loop, Event Queue, and async behavior finally made sense. I’ve explained this step-by-step for beginners in my latest Medium blog 👇 📖 Read here: https://lnkd.in/eTExkm6A If you’re learning backend or JavaScript, this might help things click for you too. #NodeJS #BackendDevelopment #JavaScript #WebDevelopment #LearningToCode ☕🚀

🚀 Mastering Express.js – Step by Step Roadmap Most people learn Express.js… Very few understand how it actually works behind the scenes 👀 That’s why I’m starting a clean Express.js series — from basics to advanced, explained in a simple & visual way. In this post, you’ll learn: ✅ How to structure an Express.js project like a pro ✅ How request–response flows inside Express.js ✅ Middleware deep dive (order matters ⚠️) ✅ CRUD concepts & HTTP methods ✅ Express + MongoDB connection basics ✅ MVC architecture in Express ✅ Error handling & best practices If you’re learning Node.js / Express / MERN stack, this roadmap will help you avoid common mistakes 🚀 📌 One concept per post 📌 Clear flow charts 📌 Beginner → Pro mindset Next post 👉 Express Project Structure explained clearly 👀 🚀 Follow for more backend content #ExpressJS #NodeJS #BackendDevelopment #MERNStack #WebDevelopment #JavaScript #Programming

🚀 Learning Node.js | Core Concept Explained How module and require() Work Behind the Scenes in Node.js In Node.js, every file is a module. When you use require(), Node.js doesn’t just copy the code—it follows a well-defined internal workflow that makes the system powerful and efficient. 🔍 What happens behind the scenes? 1️⃣ Module Wrapping Node.js wraps every file inside a function: (function (exports, require, module, __filename, __dirname) { // your code here }); This creates a private scope and provides access to module and exports. 2️⃣ Module Execution The wrapped function is executed only once. Anything assigned to module.exports becomes available to other files. 3️⃣ Caching Mechanism After the first execution, the module is cached. Future require() calls return the cached version—no re-execution. 4️⃣ Module Resolution Order Node.js resolves modules in this sequence: Core modules (fs, path) Local files (./, ../) node_modules directories (searched upward) 📌 Simple Example // math.js module.exports.add = (a, b) => a + b; // app.js const math = require('./math'); console.log(math.add(2, 3)); 💡 Why understanding this matters Helps debug dependency issues Prevents unexpected shared state Enables cleaner, scalable Node.js applications #NodeJS #JavaScript #CommonJS #BackendDevelopment #WebDevelopment #ProgrammingConcepts #LearningJourney

🚀 Today I explored Node.js – Building my Backend Foundation Today was a productive learning day where I dived deep into Node.js, understanding not just what it is, but how it actually works behind the scenes. 🔹 What is Node.js? Node.js is a JavaScript runtime environment built on Chrome’s V8 engine that allows us to run JavaScript outside the browser. It is widely used for building scalable, fast, and real-time backend applications. 🔹 Node REPL (Read–Eval–Print–Loop) Node REPL is an interactive shell where we can: Execute JavaScript code line by line Test logic quickly Debug small snippets Useful for quick experimentation and learning. 🔹 Processes in Node.js Node.js runs on a single-threaded event loop Uses non-blocking, asynchronous I/O Can handle thousands of requests efficiently Understanding this explains why Node.js is so fast. 🔹 Exporting in Node.js (Files & Directories) File export: Share functions, variables, or objects between files using module.exports Directory export: Use an index.js file to export multiple modules together This helps in writing clean, modular, and scalable code. 🔹 What is npm? (Node Package Manager) npm is the package manager for Node.js that allows us to: Install libraries & frameworks Manage dependencies Reuse community-built tools Example: npm install express 🔹 require vs import require → CommonJS module system (default in Node.js) import → ES Modules (modern JavaScript standard) Key differences: require works synchronously import works asynchronously and supports tree-shaking Choosing the right one matters in real-world projects. #NodeJS #BackendDevelopment #WebDevelopment #JavaScript #LearningInPublic #TechJourney #ComputerScience #FutureDeveloper

🚀Day 12 / 60 – Next.js Learning Journey Today’s focus was on working with API Routes in Next.js and strengthening backend logic. What I learned today: 1. How to create an API route in Next.js 2. Wrote backend logic for the API and understood the use of "nextUrl.searchParams" a.Searching restaurants by location b.Searching restaurants by name c.Listing all restaurants without any search 3. Applying substring matching and case-insensitive regex for flexible search 4. Testing the API to verify different search scenarios Step by step, I’m getting more comfortable handling real-world search and filtering logic in Next.js. Consistency is the key, and I’m enjoying the process. #NextJS #LearningInPublic #WebDevelopment #JavaScript #BackendDevelopment #60DaysOfCode