{"id":80077,"date":"2024-10-10T17:02:28","date_gmt":"2024-10-10T11:32:28","guid":{"rendered":"https:\/\/www.admecindia.co.in\/?p=80077"},"modified":"2025-04-08T13:06:52","modified_gmt":"2025-04-08T07:36:52","slug":"connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners","status":"publish","type":"post","link":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/","title":{"rendered":"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>Learn in very simple steps connecting Node with React or ReactJS in this blog. While we use both <strong><a href=\"https:\/\/www.admecindia.co.in\/courses\/web-development-courses\/\" target=\"_blank\" rel=\"noreferrer noopener\">web development languages<\/a><\/strong> then they form a stack known as the MERN stack. This blog is written by our MERN student for beginners and reviewed by senior Node and React faculty <strong>Mr.<\/strong> <strong>Ravi Bhaduaria<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"839\" height=\"500\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React.jpg?resize=839%2C500&#038;ssl=1\" alt=\"Connecting Node with React\" class=\"wp-image-80105\" srcset=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React.jpg?w=839&amp;ssl=1 839w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React.jpg?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React.jpg?resize=768%2C458&amp;ssl=1 768w\" sizes=\"auto, (max-width: 839px) 100vw, 839px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Guide on MERN Setup for Beginners<\/h2>\n\n\n\n<p>Our focus is on the basics of the setup of Node, React, project structure, and testing. We will cover the hosting of a Node and MERN app also in this blog.<\/p>\n\n\n\n<p>Let\u2019s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Know about the React.js<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?resize=1024%2C569&#038;ssl=1\" alt=\"React JS Quiz\" class=\"wp-image-45035\" style=\"aspect-ratio:1.8888888888888888;object-fit:cover;width:791px;height:auto\" srcset=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?resize=1024%2C569&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?resize=768%2C427&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?resize=1536%2C854&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?resize=900%2C500&amp;ssl=1 900w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/05\/react-js.jpg?w=2000&amp;ssl=1 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What It Is: <\/strong>A library written in <a href=\"https:\/\/www.admecindia.co.in\/web-design\/learn-javascript-basics-5-minutes\/\"><strong>JavaScript<\/strong><\/a> for developing user interfaces using the approach of single-page apps. Those who understand JavaScript can understand the <a href=\"https:\/\/www.admecindia.co.in\/web-design\/practical-reactjs-fundamentals-for-beginners\/\">fundamentals of ReactJS<\/a> easily.<\/li>\n\n\n\n<li><strong>Key feature:<\/strong> For quick updating and rendering, it makes use of virtual DOM and reusable components.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Exploring the basics of Node.js<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?resize=1024%2C569&#038;ssl=1\" alt=\"Node.js Course Master Plus\" class=\"wp-image-42343\" style=\"object-fit:cover;width:800px;height:450px\" srcset=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?resize=1024%2C569&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?resize=768%2C427&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?resize=1536%2C854&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?resize=900%2C500&amp;ssl=1 900w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2022\/02\/Node.jpg?w=2000&amp;ssl=1 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What It Is: A server-side runtime environment for JavaScript.<\/li>\n\n\n\n<li>Important feature: Its event-driven, non-blocking I\/O architecture makes it perfect for real-time, scalable applications.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is the MERN or MERN Stack?<\/h2>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:41% auto\"><figure class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"144\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/01\/Mern-Stack-Development.jpg?resize=280%2C144&#038;ssl=1\" alt=\"Mern Stack Development\" class=\"wp-image-71073 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Full-stack JavaScript programming is made possible by Node.js handling the server-side back end and React handling the user interface (UI). When we use Node.js with React.js, it becomes MERN or MERN stack. <\/p>\n\n\n\n<p>MERN stack has achieved high popularity recently due to its ease and simplicity.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why MERN is easy to learn?<\/h2>\n\n\n\n<p>As we said above, Node and React are JavaScript. It means that the base language of these two is JavaScript. So, the syntax MERN stack uses is from JavaScript. You don\u2019t need to learn a new syntax for the MERN, and it makes it easy to use.<\/p>\n\n\n\n<p>JavaScript is lightweight and its apps run very fast. It makes it very easy to deal with all major lifecycle stages of an app like coding, debugging, and testing.<\/p>\n\n\n\n<p>Those who want to learn MERN and MEAN can explore our <a href=\"https:\/\/www.admecindia.co.in\/course\/mern-stack-development-course-standard\/\"><strong>courses in MERN Stack<\/strong><\/a> and <a href=\"https:\/\/www.admecindia.co.in\/course\/mean-stack-development-course-standard\/\"><strong>MEAN Stack development<\/strong><\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to connect Node with React<\/h2>\n\n\n\n<p>Setting up a full-stack web application entails connecting Node.js and React. Node.js maintains the back-end, which includes server-side logic, database operations, and API routes. On the other hand, React takes care of the front end. React renders the user interface and communicates with the back end through HTTP requests. This comprehensive guide explains how to integrate React with Node.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Setting Up the Project Structure<\/h3>\n\n\n\n<p>The very first thing is to set up a directory structure that arranges the front-end and back-end components. Creating a root project folder with two subfolders\u2014one for the React front-end (client) and another for the Node.js back-end (server)\u2014is a typical method.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/my-app&lt;br&gt; \n\/server&lt;br&gt;  \n\/client\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">\/<\/span><span style=\"color: #9CDCFE\">my<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">&lt;<\/span><span style=\"color: #9CDCFE\">br<\/span><span style=\"color: #D4D4D4\">&gt; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\/<\/span><span style=\"color: #9CDCFE\">server<\/span><span style=\"color: #D4D4D4\">&lt;<\/span><span style=\"color: #9CDCFE\">br<\/span><span style=\"color: #D4D4D4\">&gt;  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">\/<\/span><span style=\"color: #9CDCFE\">client<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Back end (Node.js) Setup<\/strong><\/h4>\n\n\n\n<p>Initiate a new Node.js project in the server folder:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"mkdir \nserver\ncd server\nnpm init -y\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">mkdir<\/span><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">server<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">cd<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">server<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">init<\/span><span style=\"color: #D4D4D4\"> -<\/span><span style=\"color: #9CDCFE\">y<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>A package.json file, which controls scripts and dependencies, will be created as a result. Installing required packages is required. Express.js, for example, will handle HTTP requests. Other dependencies, such as Cors for cross-origin resource sharing and Mongoose if you&#8217;re using MongoDB, must also be installed.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install express cors mongoose\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">install<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">express<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">cors<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mongoose<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Front-end (React) Setup<\/strong><\/h4>\n\n\n\n<p><em>create-react-app<\/em> is a popular toolchain for bootstrapping React apps. It lets you create a React application inside the client folder.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npx create-react-app client\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">npx<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">create<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">react<\/span><span style=\"color: #D4D4D4\">-<\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">client<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This will create a default React project structure. It will include all the components you need to get the front end built.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Developing the Back-end (Node.js with Express)<\/h3>\n\n\n\n<p>First, let&#8217;s build a basic Express server that will function as your application&#8217;s API. Make the following file, index.js, in the server folder:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\" const express = require('express');\n const cors = require('cors');\n const mongoose = require('mongoose');\n \n \/\/ Initialize Express app\n const app = express();\n      \n\/\/ Middleware\n app.use(cors()); \/\/ Enable CORS\n app.use(express.json()); \/\/ Parse JSON bodies\n      \n\/\/ Connect to MongoDB (if you're using it)\n mongoose.connect('mongodb:\/\/localhost:27017\/mydatabase', {\n useNewUrlParser: true,\n useUnifiedTopology: true,\n });\n      \n\/\/ Sample route\n app.get('\/api\/data', (req, res) =&gt; {\n res.json({ message: 'Hello from the backend!' });\n });\n      \n\/\/ Start server\n const PORT = process.env.PORT || 5000;\n app.listen(PORT, () =&gt; console.log(`Server running on port  ${PORT}`));\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">express<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;express&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">cors<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;cors&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">mongoose<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;mongoose&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/ Initialize Express app<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">app<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">express<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Middleware<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">use<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #DCDCAA\">cors<\/span><span style=\"color: #D4D4D4\">()); <\/span><span style=\"color: #6A9955\">\/\/ Enable CORS<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">use<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">express<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">json<\/span><span style=\"color: #D4D4D4\">()); <\/span><span style=\"color: #6A9955\">\/\/ Parse JSON bodies<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Connect to MongoDB (if you&#39;re using it)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">mongoose<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">connect<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;mongodb:\/\/localhost:27017\/mydatabase&#39;<\/span><span style=\"color: #D4D4D4\">, {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">useNewUrlParser:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">useUnifiedTopology:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Sample route<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;\/api\/data&#39;<\/span><span style=\"color: #D4D4D4\">, (<\/span><span style=\"color: #9CDCFE\">req<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">res<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">res<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">json<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">message:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;Hello from the backend!&#39;<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Start server<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">PORT<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">process<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">env<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">PORT<\/span><span style=\"color: #D4D4D4\"> || <\/span><span style=\"color: #B5CEA8\">5000<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">listen<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">PORT<\/span><span style=\"color: #D4D4D4\">, () <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`Server running on port  <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #4FC1FF\">PORT<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #D4D4D4\">));<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Explanation of the Code<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To create a server that listens on a given port, use Express.<\/li>\n\n\n\n<li>Through the use of middleware known as CORS, communication between the front-end and back-end is made possible. Both ends operate on separate ports in your project.<\/li>\n\n\n\n<li>To connect to a MongoDB database, use Mongoose; if you&#8217;re using a different database, skip this step.<\/li>\n\n\n\n<li>An example of an API endpoint that returns a JSON response is the \/api\/data route. The React front end will make use of this path.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Developing the Front-end (React)<\/h3>\n\n\n\n<p>Open the App.js file in the client folder and make changes to it to retrieve data from your Node.js back-end.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React, { useState, useEffect } from 'react';\n\nfunction App() {\n  const [data, setData] = useState(null);\n\n  useEffect(() =&gt; {\n    \/\/ Fetch data from the backend\n    fetch('http:\/\/localhost:5000\/api\/data')\n      .then((response) =&gt; response.json())\n      .then((data) =&gt; setData(data.message))\n      .catch((error) =&gt; console.error('Error fetching data:', error));\n  }, []);\n\n  return (\n    &lt;div className=&quot;App&quot;&gt;\n      &lt;header className=&quot;App-header&quot;&gt;\n        &lt;h1&gt;{data ? data : 'Loading...'}&lt;\/h1&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n  );\n}\n\n\nexport default App;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C586C0\">import<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">React<\/span><span style=\"color: #D4D4D4\">, { <\/span><span style=\"color: #9CDCFE\">useState<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">useEffect<\/span><span style=\"color: #D4D4D4\"> } <\/span><span style=\"color: #C586C0\">from<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#39;react&#39;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">App<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> [<\/span><span style=\"color: #4FC1FF\">data<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">setData<\/span><span style=\"color: #D4D4D4\">] = <\/span><span style=\"color: #DCDCAA\">useState<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">null<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #DCDCAA\">useEffect<\/span><span style=\"color: #D4D4D4\">(() <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">\/\/ Fetch data from the backend<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #DCDCAA\">fetch<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;http:\/\/localhost:5000\/api\/data&#39;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">then<\/span><span style=\"color: #D4D4D4\">((<\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">json<\/span><span style=\"color: #D4D4D4\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">then<\/span><span style=\"color: #D4D4D4\">((<\/span><span style=\"color: #9CDCFE\">data<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">setData<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">data<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">message<\/span><span style=\"color: #D4D4D4\">))<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">catch<\/span><span style=\"color: #D4D4D4\">((<\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">error<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;Error fetching data:&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">error<\/span><span style=\"color: #D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">className<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;App&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">header<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">className<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;App-header&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #569CD6\">{<\/span><span style=\"color: #9CDCFE\">data<\/span><span style=\"color: #D4D4D4\"> ? <\/span><span style=\"color: #9CDCFE\">data<\/span><span style=\"color: #D4D4D4\"> : <\/span><span style=\"color: #CE9178\">&#39;Loading...&#39;<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">h1<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">header<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">div<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #C586C0\">export<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C586C0\">default<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">App<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Explanation of the Code<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React hooks include useEffect and useState. UseEffect takes care of side effects like data fetching, whereas useState maintains the component&#8217;s state.<\/li>\n\n\n\n<li>A GET request is sent to the Node.js back end using the fetch method. If the data retrieval is successful, the component displays and stores the data in the data state.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Running and Testing the Node Application<\/h3>\n\n\n\n<p>You must run both the front-end and back-end servers to test the connection between Node.js and React.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Running the Back-end of Node<\/h4>\n\n\n\n<p>Launch the Node.js server from the server folder:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"node index.js\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">node<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">index<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">js<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The back end will launch at http:\/\/localhost:5000 as a result.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Running the Front-end<\/h4>\n\n\n\n<p>Launch the React development server from the client folder:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm start\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">start<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The React application will launch at http:\/\/localhost:3000 as a result.<\/p>\n\n\n\n<p>Now, the message retrieved from the Node.js back-end should be displayed in the React application when you visit http:\/\/localhost:3000 in your browser. When everything is configured properly, the screen will say &#8220;Hello from the back end!&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Handling Different Environments<\/h3>\n\n\n\n<p>You&#8217;ll have to manage several settings in a real-world program, including development, testing, and production. Here&#8217;s how to handle the Node.js and React connection in various contexts.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Environment Variables<\/h4>\n\n\n\n<p>Environment variables are a useful tool for configuring various settings for various environments. For instance, make a.env file inside the React application:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"fetch(`${process.env.REACT_APP_API_URL}\/data`)\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #DCDCAA\">fetch<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">process<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">env<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">REACT_APP_API_URL<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">\/data`<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>You can then utilize this variable in your React components:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\" fetch(`${process.env.REACT_APP_API_URL}\/data`)\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">fetch<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">process<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">env<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #4FC1FF\">REACT_APP_API_URL<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">\/data`<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>With this method, you can modify the API URL according to your requirements without requiring it to be hard coded.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Proxying API Requests<\/h4>\n\n\n\n<p>CORS problems may arise because React&#8217;s development server uses a different port than the Node.js server when it is being developed. Using a proxy is one approach to make this setup simpler.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"Include a proxy configuration in the client\/package.json file:\n&quot;proxy&quot;: &quot;http:\/\/localhost:5000&quot;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">Include<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">a<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">proxy<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">configuration<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">in<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">the<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">\/<\/span><span style=\"color: #9CDCFE\">package<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">json<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C8C8C8\">file<\/span><span style=\"color: #D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #CE9178\">&quot;proxy&quot;<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">&quot;http:\/\/localhost:5000&quot;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This setup will automatically forward any \/api\/&#8230; API request from the React app to http:\/\/localhost:5000\/api\/&#8230;, saving you from having to provide the complete back end URL in your fetch requests.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Deploying the Node and React Application<\/h3>\n\n\n\n<p>The front-end and back-end of your application are frequently served by the same server when it is deployed to production. Here&#8217;s how to go about it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Serving React from Node.js<\/h4>\n\n\n\n<p>Your Node.js server should probably be used to deliver your React front-end directly in a production setting. Building your React application and setting up Node.js to serve the static files are required steps in this process.<\/p>\n\n\n\n<p>Make a production build of your React application first:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"cd client\nnpm run build\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">cd<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">client<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">npm<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">run<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">build<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This will produce the optimized front end files in a build directory.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\" const path = require('path');\n\n\n\/\/ Serve static files from the React app\n app.use(express.static(path.join(__dirname, 'client\/build')));\n      \n app.get('*', (req, res) =&gt; {\n     res.sendFile(path.join(__dirname, 'client\/build', 'index.html'));\n });\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">path<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;path&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Serve static files from the React app<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">use<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">express<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">static<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">path<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">join<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">__dirname<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;client\/build&#39;<\/span><span style=\"color: #D4D4D4\">)));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">app<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">get<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;*&#39;<\/span><span style=\"color: #D4D4D4\">, (<\/span><span style=\"color: #9CDCFE\">req<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">res<\/span><span style=\"color: #D4D4D4\">) <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">     <\/span><span style=\"color: #9CDCFE\">res<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">sendFile<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">path<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">join<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">__dirname<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;client\/build&#39;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #CE9178\">&#39;index.html&#39;<\/span><span style=\"color: #D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> });<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>React Router can handle client-side routing using this setup, which returns the index.html file for the React app in response to any request that doesn&#8217;t match an API route.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Deploying to a Live Hosting Service<\/h4>\n\n\n\n<p>There are multiple options to deploy your MERN app such as Heroku, DigitalOcean, and AWS. Once your MERN app is configured, you are ready to serve all. The same server will serve both the front-end and back-end.<\/p>\n\n\n\n<p>For example, to deploy to Heroku, the following steps must be taken:<\/p>\n\n\n\n<p><strong>i. Open the root directory and create a Procfile:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"web: node server\/index.js\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C8C8C8\">web<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #9CDCFE\">node<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">server<\/span><span style=\"color: #D4D4D4\">\/<\/span><span style=\"color: #9CDCFE\">index<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">js<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>ii. Upload your program to Heroku:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"git init\nheroku create\ngit add .\ngit commit -m &quot;Deploying MERN stack app&quot;\ngit push heroku master\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #9CDCFE\">git<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">init<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">heroku<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">create<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">git<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">add<\/span><span style=\"color: #D4D4D4\"> .<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">git<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">commit<\/span><span style=\"color: #D4D4D4\"> -<\/span><span style=\"color: #9CDCFE\">m<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;Deploying MERN stack app&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">git<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">push<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">heroku<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">master<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Heroku will install the dependencies, launch your application, and detect the Node.js environment automatically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Words on Connecting Node with ReactJS<\/strong><\/h2>\n\n\n\n<p>Connecting Node.js with React is not a difficult task but a crucial ability. You now know how to develop a simple MERN stack application with React and Node. React will be handling the front end and Node.js and Express will handle the back end. Connecting these two techs is not enough you should <strong>learn advanced concepts of Node.js, React, and MERN development<\/strong>.<\/p>\n\n\n\n<p>Additionally, you&#8217;ve dived into the deploying process of the Node and React program. We also understood the steps involved in maintaining several settings. Using the MERN stack, this configuration serves as the basis for creating dependable, scalable online applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Want to Master Node and ReactJS?<\/strong><\/h2>\n\n\n\n<p>Follow the path of smart learning from experts with well-planned <strong><a href=\"https:\/\/www.admecindia.co.in\/courses\/web-designing-courses\/\" target=\"_blank\" rel=\"noreferrer noopener\">programs in website design<\/a><\/strong>. At ADMEC, we offer multiple courses in both Node and ReactJS for learners of different levels. Some of the main courses are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.admecindia.co.in\/course\/most-advanced-react-master-course\/\">ReactJS Master \u2013 3 Months Certificate<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>It is recommended for developers who are already working on HTML, CSS, Bootstrap, and JavaScript. This course focuses on the high-level features of ReactJS and its integration with Firebase, NPM, Redux, etc.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.admecindia.co.in\/course\/react-premium-course\/\">ReactJS Premium \u2013 2 Months Certificate<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>It is important for learners to have JavaScript knowledge. This course targets the development of single-page applications using Redux and Firebase.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.admecindia.co.in\/course\/best-react-standard-course-beginners\/\">ReactJS Standard \u2013 1.5 Months Certificate<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>Recommended for beginners who know the basics of JavaScript and want to learn React from a very basic level.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.admecindia.co.in\/course\/node-js-classes-in-delhi\/\">NodeJS Master Plus \u2013 3 Months Certificate&nbsp;<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>This program is planned for all learners who want to master back-end development with Node. Even if you are not a JavaScript expert and know HTML and CSS only, you can still pursue this program.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.admecindia.co.in\/course\/best-nodejs-master-course\/\">NodeJS Master \u2013 02 Months Certificate<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>Most recommended for web developers who work on front-end as well as back part and want to upgrade their skills.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.admecindia.co.in\/course\/short-term-node-js-course-in-delhi\/\">NodeJS Standard \u2013 1 Month Certificate<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>A short-duration course covering the basics of Node.js.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Start your learning journey with ADMEC Today!<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-jetpack-contact-form\"><a href=\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\" target=\"_blank\" rel=\"noopener noreferrer\">Submit a form.<\/a><\/div><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Want to read more about React and Node?<\/h2>\n\n\n\n<p>Check out other blogs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-development\/top-5-books-node-js\/\"><strong>Top 5 Books of Node.js<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-design\/react-or-angular-which-is-best-for-a-beginner\/\"><strong>React or Angular \u2013 Which is best for a beginner?<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-development\/why-node-js-is-best-for-beginners\/\"><strong>Why Node JS is best for beginners?<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-development\/strengths-and-weaknesses-php-python-and-nodejs\/\"><strong>Strengths and Weaknesses of PHP, Python, and Node.js<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-development\/5-strong-reasons-why-you-should-learn-node-js-for-web-development\/\"><strong>5 Strong Reasons: Why You Should Learn Node.js for Web Development<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-development\/python-vs-node-practically-explained\/\"><strong>Python vs Node.js \u2013 Practically Explained<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.admecindia.co.in\/web-development\/will-php-be-history-soon-because-python-and-nodejs\/\"><strong>Will PHP be History Soon Because of Python and Node.js?<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn in very simple steps connecting Node with React or ReactJS in this blog. While we use both web development languages then they form a stack known as the MERN [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":80128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[81],"tags":[106,368],"class_list":["post-80077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-nodejs","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Connecting Node with React: Guide on MERN Setup for Beginners - ADMEC Multimedia Institute<\/title>\n<meta name=\"description\" content=\"Connecting Node with React is not an easy task, there are many steps involved in the complete MERN Setup for Beginners.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners\" \/>\n<meta property=\"og:description\" content=\"Connecting Node with React is not an easy task, there are many steps involved in the complete MERN Setup for Beginners.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"ADMEC Multimedia Institute\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/admecInstituteOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-10T11:32:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-08T07:36:52+00:00\" \/>\n<meta name=\"author\" content=\"ADMEC Multimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1\" \/>\n<meta name=\"twitter:creator\" content=\"@admecinstitute\" \/>\n<meta name=\"twitter:site\" content=\"@admecinstitute\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ADMEC Multimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\"},\"author\":{\"name\":\"ADMEC Multimedia\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/08a2be1d74b84c2f649c9f653666960b\"},\"headline\":\"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners\",\"datePublished\":\"2024-10-10T11:32:28+00:00\",\"dateModified\":\"2025-04-08T07:36:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\"},\"wordCount\":1646,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1\",\"keywords\":[\"NodeJS\",\"ReactJS\"],\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\",\"url\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\",\"name\":\"Connecting Node with React: Guide on MERN Setup for Beginners - ADMEC Multimedia Institute\",\"isPartOf\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1\",\"datePublished\":\"2024-10-10T11:32:28+00:00\",\"dateModified\":\"2025-04-08T07:36:52+00:00\",\"description\":\"Connecting Node with React is not an easy task, there are many steps involved in the complete MERN Setup for Beginners.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1\",\"width\":2000,\"height\":1112,\"caption\":\"Guide to Connect Node with Reactjs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.admecindia.co.in\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.admecindia.co.in\/#website\",\"url\":\"https:\/\/www.admecindia.co.in\/\",\"name\":\"ADMEC Multimedia Institute\",\"description\":\"Best Graphic Design, Web Design, UX Design, Animation Institute in Delhi\",\"publisher\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.admecindia.co.in\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\",\"name\":\"ADMEC\",\"url\":\"https:\/\/www.admecindia.co.in\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1\",\"width\":225,\"height\":225,\"caption\":\"ADMEC\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/admecInstituteOfficial\/\",\"https:\/\/x.com\/admecinstitute\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/08a2be1d74b84c2f649c9f653666960b\",\"name\":\"ADMEC Multimedia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/861b8d31aad1e04f55bca6f36df69354fb35a966356a9b5eac81dcc391e29116?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/861b8d31aad1e04f55bca6f36df69354fb35a966356a9b5eac81dcc391e29116?s=96&r=g\",\"caption\":\"ADMEC Multimedia\"},\"url\":\"https:\/\/www.admecindia.co.in\/author\/bhumi-arora\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Connecting Node with React: Guide on MERN Setup for Beginners - ADMEC Multimedia Institute","description":"Connecting Node with React is not an easy task, there are many steps involved in the complete MERN Setup for Beginners.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners","og_description":"Connecting Node with React is not an easy task, there are many steps involved in the complete MERN Setup for Beginners.","og_url":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/","og_site_name":"ADMEC Multimedia Institute","article_publisher":"https:\/\/www.facebook.com\/admecInstituteOfficial\/","article_published_time":"2024-10-10T11:32:28+00:00","article_modified_time":"2025-04-08T07:36:52+00:00","author":"ADMEC Multimedia","twitter_card":"summary_large_image","twitter_image":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1","twitter_creator":"@admecinstitute","twitter_site":"@admecinstitute","twitter_misc":{"Written by":"ADMEC Multimedia","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#article","isPartOf":{"@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/"},"author":{"name":"ADMEC Multimedia","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/08a2be1d74b84c2f649c9f653666960b"},"headline":"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners","datePublished":"2024-10-10T11:32:28+00:00","dateModified":"2025-04-08T07:36:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/"},"wordCount":1646,"commentCount":0,"publisher":{"@id":"https:\/\/www.admecindia.co.in\/#organization"},"image":{"@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1","keywords":["NodeJS","ReactJS"],"articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/","url":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/","name":"Connecting Node with React: Guide on MERN Setup for Beginners - ADMEC Multimedia Institute","isPartOf":{"@id":"https:\/\/www.admecindia.co.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1","datePublished":"2024-10-10T11:32:28+00:00","dateModified":"2025-04-08T07:36:52+00:00","description":"Connecting Node with React is not an easy task, there are many steps involved in the complete MERN Setup for Beginners.","breadcrumb":{"@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#primaryimage","url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1","width":2000,"height":1112,"caption":"Guide to Connect Node with Reactjs"},{"@type":"BreadcrumbList","@id":"https:\/\/www.admecindia.co.in\/web-development\/connecting-node-with-react-step-by-step-guide-on-mern-setup-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.admecindia.co.in\/"},{"@type":"ListItem","position":2,"name":"Connecting Node with React: Step by Step Guide on MERN Setup for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/www.admecindia.co.in\/#website","url":"https:\/\/www.admecindia.co.in\/","name":"ADMEC Multimedia Institute","description":"Best Graphic Design, Web Design, UX Design, Animation Institute in Delhi","publisher":{"@id":"https:\/\/www.admecindia.co.in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.admecindia.co.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.admecindia.co.in\/#organization","name":"ADMEC","url":"https:\/\/www.admecindia.co.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1","width":225,"height":225,"caption":"ADMEC"},"image":{"@id":"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/admecInstituteOfficial\/","https:\/\/x.com\/admecinstitute"]},{"@type":"Person","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/08a2be1d74b84c2f649c9f653666960b","name":"ADMEC Multimedia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/861b8d31aad1e04f55bca6f36df69354fb35a966356a9b5eac81dcc391e29116?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/861b8d31aad1e04f55bca6f36df69354fb35a966356a9b5eac81dcc391e29116?s=96&r=g","caption":"ADMEC Multimedia"},"url":"https:\/\/www.admecindia.co.in\/author\/bhumi-arora\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/10\/Connecting-Node-with-React-Step-by-Step-Guide-on-MERN-Setup-for-Beginners-Students.jpg?fit=2000%2C1112&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":672,"url":"https:\/\/www.admecindia.co.in\/web-development\/top-5-books-node-js\/","url_meta":{"origin":80077,"position":0},"title":"Top 5 Books of Node.js","author":"ADMEC Multimedia Institute","date":"November 27, 2019","format":false,"excerpt":"NodeJS a language that gave new hope to server-side languages. Though it is JavaScript based language but has its whole contribution in developing server-side languages. In this modern world of a web application that void space that was there in the backend has been occupied. It is accessible on all\u2026","rel":"","context":"In &quot;Web Development&quot;","block_context":{"text":"Web Development","link":"https:\/\/www.admecindia.co.in\/category\/web-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/11\/admec-internal-blog-top-5-node-js-books-1.jpg?fit=1200%2C668&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/11\/admec-internal-blog-top-5-node-js-books-1.jpg?fit=1200%2C668&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/11\/admec-internal-blog-top-5-node-js-books-1.jpg?fit=1200%2C668&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/11\/admec-internal-blog-top-5-node-js-books-1.jpg?fit=1200%2C668&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/11\/admec-internal-blog-top-5-node-js-books-1.jpg?fit=1200%2C668&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":90500,"url":"https:\/\/www.admecindia.co.in\/programming-languages\/mern-and-mean-stacks-tools-for-modern-web-development\/","url_meta":{"origin":80077,"position":1},"title":"MERN and MEAN Stacks \u2013 Tools for Modern Web Development","author":"ADMEC Multimedia Institute","date":"February 17, 2025","format":false,"excerpt":"Both MEAN and MERN stacks are full-stack JavaScript frameworks. The MERN is a stack of MongoDB, Express.js, React.js, and Node.js while MEAN is of MongoDB, Express.js, Angular, and Node.js. Both have a major impact on how the web applications are developed nowadays. These stacks are popular among the community and\u2026","rel":"","context":"In &quot;Programming Languages&quot;","block_context":{"text":"Programming Languages","link":"https:\/\/www.admecindia.co.in\/category\/programming-languages\/"},"img":{"alt_text":"mean and mern stack courses","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/02\/create-a-banner-on-mean-and-mern-stack-add-logo-2.jpg?fit=1024%2C768&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/02\/create-a-banner-on-mean-and-mern-stack-add-logo-2.jpg?fit=1024%2C768&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/02\/create-a-banner-on-mean-and-mern-stack-add-logo-2.jpg?fit=1024%2C768&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/02\/create-a-banner-on-mean-and-mern-stack-add-logo-2.jpg?fit=1024%2C768&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":100563,"url":"https:\/\/www.admecindia.co.in\/web-development\/php-to-react-explore-the-best-coding-courses-and-institutes-in-delhi\/","url_meta":{"origin":80077,"position":2},"title":"PHP to React: Explore the Best Coding Courses and Institutes in Delhi for Web Developers","author":"Anuradha Sengar","date":"July 18, 2025","format":false,"excerpt":"The world of web development has undergone significant growth since the era of the internet's rise in the late 20th century. Now, it is one of the most in-demand careers across the globe. Many programming languages are available today. Among them, PHP and React.js are becoming the most important components\u2026","rel":"","context":"In &quot;Programming Languages&quot;","block_context":{"text":"Programming Languages","link":"https:\/\/www.admecindia.co.in\/category\/programming-languages\/"},"img":{"alt_text":"php and react together","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/07\/image.jpg?fit=1024%2C768&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/07\/image.jpg?fit=1024%2C768&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/07\/image.jpg?fit=1024%2C768&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2025\/07\/image.jpg?fit=1024%2C768&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":37124,"url":"https:\/\/www.admecindia.co.in\/web-development\/why-node-js-is-best-for-beginners\/","url_meta":{"origin":80077,"position":3},"title":"Why Node JS is best for beginners ?","author":"ADMEC Multimedia Institute","date":"September 10, 2021","format":false,"excerpt":"There is a lot of confusion when it comes down to choosing NodeJS and PHP as they both are frequently and are constantly in demand.\u00a0 See PHP is very old therefore very popular when compared to NodeJS but the rate at which popularity of NodeJS is increasing is far greater\u2026","rel":"","context":"In &quot;Web Development&quot;","block_context":{"text":"Web Development","link":"https:\/\/www.admecindia.co.in\/category\/web-development\/"},"img":{"alt_text":"Nodejs Training Institute","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/09\/admec-internal-node-js.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/09\/admec-internal-node-js.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/09\/admec-internal-node-js.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/09\/admec-internal-node-js.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/09\/admec-internal-node-js.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":32894,"url":"https:\/\/www.admecindia.co.in\/web-design\/react-or-angular-which-is-best-for-a-beginner\/","url_meta":{"origin":80077,"position":4},"title":"React or Angular &#8211; Which is best for a beginner?","author":"ADMEC Multimedia Institute","date":"March 22, 2021","format":false,"excerpt":"Hey there fellow developers, how you doing? If you are learning JavaScript or front end web development you might have heard in the market there's a library and a framework competing for giving a better solution to the developer for single page application development","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/03\/Which-Is-best-for-a-beginner-ReactJS-or-Angular.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/03\/Which-Is-best-for-a-beginner-ReactJS-or-Angular.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/03\/Which-Is-best-for-a-beginner-ReactJS-or-Angular.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/03\/Which-Is-best-for-a-beginner-ReactJS-or-Angular.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/03\/Which-Is-best-for-a-beginner-ReactJS-or-Angular.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":533,"url":"https:\/\/www.admecindia.co.in\/web-development\/strengths-and-weaknesses-php-python-and-nodejs\/","url_meta":{"origin":80077,"position":5},"title":"Strengths and Weaknesses of PHP, Python, and Node.js","author":"ADMEC Multimedia Institute","date":"April 20, 2019","format":false,"excerpt":"A web application is a conjunction of Front-end and Back-end Development. Front-end is dealt with client-side languages like HTML, CSS, and JavaScript. When it comes to building the logic of an application, we make use of the server-side programming languages like PHP, Python, and Node.js, etc. In this article, we\u2026","rel":"","context":"In &quot;Web Development&quot;","block_context":{"text":"Web Development","link":"https:\/\/www.admecindia.co.in\/category\/web-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/04\/admec-strengths-and-weaknesses-of-php-python-and-node.jpg?fit=1200%2C732&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/04\/admec-strengths-and-weaknesses-of-php-python-and-node.jpg?fit=1200%2C732&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/04\/admec-strengths-and-weaknesses-of-php-python-and-node.jpg?fit=1200%2C732&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/04\/admec-strengths-and-weaknesses-of-php-python-and-node.jpg?fit=1200%2C732&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/04\/admec-strengths-and-weaknesses-of-php-python-and-node.jpg?fit=1200%2C732&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts\/80077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/comments?post=80077"}],"version-history":[{"count":0,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts\/80077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/media\/80128"}],"wp:attachment":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/media?parent=80077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/categories?post=80077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/tags?post=80077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}