{"id":102053,"date":"2020-03-13T13:00:00","date_gmt":"2020-03-13T11:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=102053"},"modified":"2020-03-12T14:05:45","modified_gmt":"2020-03-12T12:05:45","slug":"reactjs-with-nodejs-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html","title":{"rendered":"ReactJS with NodeJS Example"},"content":{"rendered":"<p>In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the Front-end of the application. To start off, we use express-generator to scaffold the server-side code and structure. And then proceed with the create-react-app package to generate the client-side of our application. So let&#8217;s get started and build our application and configure it.<\/p>\n<h2 class=\"wp-block-heading\">1. Tools and Frameworks<\/h2>\n<p>We use the below list of tools and frameworks as we work through this article. Some of these tools are necessary whilst others are optional and can be replaced with ones of your choice.<\/p>\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" aria-label=\"Node.js ver 12.16.1 (opens in a new tab)\" href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\">Node.js ver 12.16.1<\/a><\/li>\n<li><a rel=\"noreferrer noopener\" aria-label=\"React.js ver 16.13.0 (opens in a new tab)\" href=\"https:\/\/reactjs.org\/\" target=\"_blank\">React.js ver 16.13.0<\/a><\/li>\n<li><a rel=\"noreferrer noopener\" aria-label=\"express-generator (opens in a new tab)\" href=\"https:\/\/www.npmjs.com\/package\/express-generator\" target=\"_blank\">express-generator<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/express\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Express ver4.16.1 (opens in a new tab)\">Express ver4.16.1<\/a><\/li>\n<li><a rel=\"noreferrer noopener\" aria-label=\"Visual Studio Code IDE (opens in a new tab)\" href=\"https:\/\/code.visualstudio.com\" target=\"_blank\">Visual Studio Code IDE<\/a><\/li>\n<\/ul>\n<p>Node.js, in essence, is JavaScript on the server-side ReactJS is a front end library from Facebook. And the express-generator is a command-line tool to generate an express application. Express is a package to build a Web Server in Node.js. We use it here to build a rudimentary API to test out our Full Stack Application. Visual Studio Code IDE is my editor of choice but you are free to use one of your own choices to follow along.<\/p>\n<h2 class=\"wp-block-heading\">2. Server-side Setup<\/h2>\n<p>We start off with setting up our Server-side code first. To do this, we run the express-generator as below.<\/p>\n<pre class=\"brush: bash;\">&gt;npx express-generator my-app\n<\/pre>\n<p>What the above command does is that it downloads a temporary copy of the express-generator and executes it with the parameters provided. On completion of the above our server-side application is built. Now we just need to install the dependencies using the below command after switching to the my-app directory.<\/p>\n<pre class=\"brush: bash;\">\/my-app&gt; npm install\n<\/pre>\n<p>Once the above complete we should have an application ready that uses Express as a Web Server. The structure of the project should look like below:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"293\" height=\"424\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-SSProject-Structure-1.jpg\" alt=\"ReactJS with NodeJS - Project Structure\" class=\"wp-image-102589\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-SSProject-Structure-1.jpg 293w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-SSProject-Structure-1-207x300.jpg 207w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><figcaption>Project Structure<\/figcaption><\/figure>\n<\/div>\n<p>We need to add one final dependency to our project called concurrently. We do so using the below command:<\/p>\n<pre class=\"brush: bash;\">\/my-app&gt;npm i concurrently\n<\/pre>\n<p>In addition to adding this dependency, we will also remove one that we do not need, Jade view engine. We do so using the command below:<\/p>\n<pre class=\"brush: bash;\">\/my-app&gt;npm uninstall jade\n<\/pre>\n<p>Now let us move on and generate the client-side application structure.<\/p>\n<h2 class=\"wp-block-heading\">3. Client-side Setup<\/h2>\n<p>To set up our client-side code we create a folder called client. We switch to this folder from the command line and run the below command to set things up.<\/p>\n<pre class=\"brush: bash;\">\/my-app\/client&gt;npx create-react-app .\n<\/pre>\n<p>This downloads a temporary copy of the create-react-app package and runs it with the parameters provided. Once this command finishes our client-side application structure should be ready and look like below:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"338\" height=\"645\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-CSProject-Structure.jpg\" alt=\"ReactJS with NodeJS\" class=\"wp-image-102596\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-CSProject-Structure.jpg 338w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-CSProject-Structure-157x300.jpg 157w\" sizes=\"(max-width: 338px) 100vw, 338px\" \/><figcaption>Project Structure<\/figcaption><\/figure>\n<\/div>\n<p>So far we have generated the Server-side half and then the client-side of our application. Let us now dive into configuring this application for development. <div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<h2 class=\"wp-block-heading\">4. Development Configuration<\/h2>\n<p>Since both our server-side and client-side code needs to run in parallel we use concurrently. But there is an issue both the dev server for Reactjs and our Express app use the same port, i.e. 3000. And this will create a conflict and throw an error if we run them concurrently as below:<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"754\" height=\"393\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Project-Error.jpg\" alt=\"ReactJS with NodeJS - Project Run Error\" class=\"wp-image-102600\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Project-Error.jpg 754w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Project-Error-300x156.jpg 300w\" sizes=\"(max-width: 754px) 100vw, 754px\" \/><figcaption>Project Run Error<\/figcaption><\/figure>\n<p>This issue is pertinent only whilst in development, still, we need to get around this to proceed further. Since in production we would probably be running the Server-side code and serving the static production build of our front end from the same URL. But when developing we need not have to create a production build every time we want to run our code to test it. <\/p>\n<p>To get around this issue let us edit the file which sets the port for our server-side code. This detail is managed by the file named www under the bin folder of our server-side code. The interesting bit looks like below:<\/p>\n<p><span style=\"text-decoration: underline\"><em>www<\/em><\/span><\/p>\n<pre class=\"brush: js;\">...\n\/**\n * Get port from environment and store in Express.\n *\/\n\nvar port = normalizePort(process.env.PORT || '3000');\napp.set('port', port);\n\n\/**\n * Create HTTP server.\n *\/\n\nvar server = http.createServer(app);\n...\n\n<\/pre>\n<p>As you can see it defaults to the port 3000, let us edit this bit of the file to look like below:<\/p>\n<p><span style=\"text-decoration: underline\"><em>www<\/em><\/span><\/p>\n<pre class=\"brush: js;\">...\n\/**\n * Get port from environment and store in Express.\n *\/\n\nvar port = normalizePort(process.env.PORT || '3010');\napp.set('port', port);\n\n\/**\n * Create HTTP server.\n *\/\n\nvar server = http.createServer(app);\n...\n<\/pre>\n<p>This should resolve the error we saw before. But now when we want to call the server-side API we run aground again since the URL is different. We cannot use relative URLs like &#8220;\/api\/whatever&#8221; and would instead need to use fully qualified ones. Those will create CORS issues but wait there is one last bit of configuration which saves the day for us. This time we will edit the client-side configuration. <\/p>\n<p>We add a key called proxy to the package.json file of our client-side code. And set its value to the URL of our Server-side API in development. Let us see this in action.<\/p>\n<p><span style=\"text-decoration: underline\"><em>package.json<\/em><\/span><\/p>\n<pre class=\"brush: js;\">{\n  \"name\": \"client\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library\/jest-dom\": \"^4.2.4\",\n    \"@testing-library\/react\": \"^9.5.0\",\n    \"@testing-library\/user-event\": \"^7.2.1\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-scripts\": \"3.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": \"react-app\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \"&gt;0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  },\n  \"proxy\": \"http:\/\/localhost:3010\"\n}\n<\/pre>\n<p>This helps us circumvent CORS warnings and having to write code that switches URLs based on the environment. With everything set up let us write the npm command to take the application for a test ride. To do this let us edit our package.json for the Server-side code and add the below command.<\/p>\n<p><span style=\"text-decoration: underline\"><em>package.json<\/em><\/span><\/p>\n<pre class=\"brush: js;\">...\n \"scripts\": {\n    \"start:dev\": \"concurrently \\\"npm start --prefix client\\\" \n                 \\\"node .\/bin\/www\\\"\",\n    \"start\": \"npm run build --prefix client &amp;&amp; node .\/bin\/www\"\n  },\n...\n<\/pre>\n<h2 class=\"wp-block-heading\">5. Running in Dev Mode<\/h2>\n<p>Now we are all set so let us run the below command and look at the results.<\/p>\n<pre class=\"brush: bash;\">\/my-app&gt;npm run start:dev\n<\/pre>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"588\" height=\"331\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Screen-Grab.jpg\" alt=\"\" class=\"wp-image-102607\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Screen-Grab.jpg 588w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Screen-Grab-300x169.jpg 300w\" sizes=\"(max-width: 588px) 100vw, 588px\" \/><figcaption>Screen Grab<\/figcaption><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">6. API in Action<\/h2>\n<p>Now that we have set up our application to run correctly. Let us create a rudimentary API to test out our setup. We will return a greeting from our API in response to a greeting from the front end of the application. Then display the greeting from the server-side API in our React component. So let&#8217;s get to it. <\/p>\n<h3 class=\"wp-block-heading\">6.1 Server-side Greeting API<\/h3>\n<p>We will add a router called greeting to the routes folder and the code for it would look like below:<\/p>\n<p><span style=\"text-decoration: underline\"><em>greeting.js<\/em><\/span><\/p>\n<pre class=\"brush: js;\">var express = require('express');\nvar router = express.Router();\n\n\/* GET users listing. *\/\nrouter.get('\/hello', function (req, res, next) {\n    res.json('Greetings from API!');\n});\n\nmodule.exports = router;\n\n<\/pre>\n<p>And now let us modify the app.js file to make the express web server use this router. Our code for the app.js file should look like below:<\/p>\n<p><span style=\"text-decoration: underline\"><em>app.js<\/em><\/span><\/p>\n<pre class=\"brush: js;\">var createError = require('http-errors');\nvar express = require('express');\nvar path = require('path');\nvar cookieParser = require('cookie-parser');\nvar logger = require('morgan');\n\n\/* var indexRouter = require('.\/routes\/index');\nvar usersRouter = require('.\/routes\/users'); *\/\nvar greetingRouter = require('.\/routes\/greeting');\nvar app = express();\n\n\/\/ view engine setup\n\/* app.set('views', path.join(__dirname, 'views'));\napp.set('view engine', 'jade'); *\/\n\napp.use(logger('dev'));\napp.use(express.json());\napp.use(express.urlencoded({ extended: false }));\napp.use(cookieParser());\napp.use(express.static(path.join(__dirname, 'public\/public\/')));\n\n\/* app.use('\/', indexRouter); *\/\napp.use('\/greeting', greetingRouter);\n\n\/\/ catch 404 and forward to error handler\napp.use(function (req, res, next) {\n  next(createError(404));\n});\n\n\/\/ error handler\napp.use(function (err, req, res, next) {\n  \/\/ set locals, only providing error in development\n  res.locals.message = err.message;\n  res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n  \/\/ render the error page\n  res.status(err.status || 500);\n  res.render('error');\n});\n\nmodule.exports = app;\n\n\n<\/pre>\n<p>Let us now set up our front end to call this API.<\/p>\n<h3 class=\"wp-block-heading\">6.2 Front end set up<\/h3>\n<p>Let us add a component to our front end called Greeting. This component would render a button on click of which we make a call to the API. Once the API returns it will display the return value.<\/p>\n<p><span style=\"text-decoration: underline\"><em>Greeting.js<\/em><\/span><\/p>\n<pre class=\"brush: js;\">import React, { useState } from 'react';\n\nfunction Greeting(props) {\n    const [greeting, setGreeting] = useState(\"\");\n\n    const sendGreetings = () =&gt; {\n        window.fetch('\/greeting\/hello')\n            .then(response =&gt; response.json())\n            .then(resp =&gt; setGreeting(resp))\n            .catch(err =&gt; console.log(err));\n    }\n    return &lt;&gt;\n        &lt;div\n            style={{ flexDirection: 'column', height: '100vh', \ndisplay: 'flex', alignItems: 'center', \njustifyContent: 'center' }}&gt;\n            &lt;div&gt;&lt;button onClick={sendGreetings}&gt;\nSend Greetings&lt;\/button&gt;&lt;\/div&gt;\n            {greeting &amp;&amp; &lt;div&gt;{`${greeting}`}&lt;\/div&gt;}\n        &lt;\/div&gt;\n    &lt;\/&gt;\n}\nexport default Greeting;\n<\/pre>\n<p>Also, let us modify our index.js file to render this component. <\/p>\n<p><span style=\"text-decoration: underline\"><em>index.js<\/em><\/span><\/p>\n<pre class=\"brush: js;\">import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport Greeting from '.\/Greeting';\nimport * as serviceWorker from '.\/serviceWorker';\n\nReactDOM.render(&lt;Greeting \/&gt;, document.getElementById('root'));\n\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();\n\n<\/pre>\n<p>To see this in action run the below command:<\/p>\n<pre class=\"brush: bash;\">\/my-app&gt;npm run start:dev<\/pre>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"718\" height=\"404\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Project-Output-1.jpg\" alt=\"\" class=\"wp-image-102613\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Project-Output-1.jpg 718w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/Reactjs-with-Nodejs-Project-Output-1-300x169.jpg 300w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/figure>\n<h2 class=\"wp-block-heading\">7. Download the Source Code<\/h2>\n<p>This was an example of Reactjs with Nodejs. To run the source code you need to run npm install at the root of the application as well as inside the client folder of the application. After this just execute the command npm run start:dev at the root of the application to start the application.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/03\/JCG-ReactJS-with-NodeJS-Example.zip\"><strong>ReactJS with NodeJS Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the Front-end of the application. To start off, we use express-generator to scaffold the server-side code and structure. And then proceed with the create-react-app package to generate the client-side of &hellip;<\/p>\n","protected":false},"author":82952,"featured_media":92051,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1903],"tags":[741,1415],"class_list":["post-102053","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-node-js","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ReactJS with NodeJS Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the\" \/>\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.javacodegeeks.com\/reactjs-with-nodejs-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJS with NodeJS Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-13T11:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\"},\"headline\":\"ReactJS with NodeJS Example\",\"datePublished\":\"2020-03-13T11:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html\"},\"wordCount\":1096,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"keywords\":[\"Node.js\",\"React.js\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html\",\"name\":\"ReactJS with NodeJS Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"datePublished\":\"2020-03-13T11:00:00+00:00\",\"description\":\"In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-nodejs-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/react-js\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"ReactJS with NodeJS Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/siddharth-seth-240180\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/siddharth_seth1980\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS with NodeJS Example - Java Code Geeks","description":"In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the","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.javacodegeeks.com\/reactjs-with-nodejs-example.html","og_locale":"en_US","og_type":"article","og_title":"ReactJS with NodeJS Example - Java Code Geeks","og_description":"In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the","og_url":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2020-03-13T11:00:00+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c"},"headline":"ReactJS with NodeJS Example","datePublished":"2020-03-13T11:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html"},"wordCount":1096,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","keywords":["Node.js","React.js"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html","url":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html","name":"ReactJS with NodeJS Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","datePublished":"2020-03-13T11:00:00+00:00","description":"In this article, we go about creating or setting up a Full Stack JavaScript application. We use NodeJS for the server-side API and ReactJS for the","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-nodejs-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"React.js","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/react-js"},{"@type":"ListItem","position":5,"name":"ReactJS with NodeJS Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.linkedin.com\/in\/siddharth-seth-240180\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/siddharth_seth1980"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/102053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/82952"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=102053"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/102053\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/92051"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=102053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=102053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=102053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}