Connecting React Frontend with Node.js Backend

Day 52 of #180daysofcode 🚀 Connecting React Frontend with Node.js Backend – My Full-Stack Learning Today I practiced one of the most important concepts in Full-Stack Development — connecting a React frontend with a backend API built using Node.js and Express. In a full-stack application, the frontend communicates with the backend using HTTP requests, and the backend processes the logic and returns JSON data that updates the UI. 🧠 How the Communication Works 1️⃣ React sends an API request 2️⃣ Backend receives the request 3️⃣ Server processes the logic 4️⃣ Backend sends a JSON response 5️⃣ React updates the UI automatically Example flow: React → GET /users → Express API → JSON response → React UI ⚡ API Methods Used • GET – Fetch data • POST – Send new data • PUT – Update existing data • DELETE – Remove data 🌐 Using Fetch API in React React can call backend APIs using the built-in fetch() function. Example: Fetching users from backend fetch("http://localhost:3000/users") .then(res => res.json()) .then(data => setUsers(data)); This automatically loads backend data into the React UI. 🧩 Typical Full-Stack Folder Structure project/ ├── client/ (React frontend) │ └── src/ ├── server/ (Node.js backend) │ └── routes/ ├── package.json ⚠️ Common Beginner Issues I Learned ✔️ CORS errors → Fix using "cors" middleware ✔️ Wrong API URL in frontend ✔️ Missing "express.json()" middleware for parsing JSON 🧪 Mini Practice Project Built a small full-stack app where: ✅ React fetches users from backend ✅ Users are displayed in UI ✅ New users can be added via form ✅ Users can be deleted from the interface This exercise helped me clearly understand how frontend and backend communicate in real applications. Full-Stack development is basically React talking to APIs and APIs managing the data. Excited to keep building more real-world projects! 💻🔥 #ReactJS #NodeJS #ExpressJS #FullStackDevelopment #MERNStack #JavaScript #WebDevelopment #FrontendDeveloper #BackendDeveloper #CodingJourney #LearnInPublic #Developers #TechLearning

To view or add a comment, sign in

Explore content categories