{"id":101657,"date":"2020-02-04T11:00:00","date_gmt":"2020-02-04T09:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=101657"},"modified":"2020-02-10T19:18:38","modified_gmt":"2020-02-10T17:18:38","slug":"reactjs-with-ajax-requests-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html","title":{"rendered":"ReactJS with Ajax Requests Example"},"content":{"rendered":"<p>In this post, we feature a comprehensive article about ReactJS with Ajax Requests.<\/p>\n<p>In this article, we will have a look at making Ajax requests in a ReactJS application. We will create a simple application where the user can type in a few characters and we will pass these on to the server in an Ajax request. The server, in turn, will return names of countries with those sequences of characters in there name or code. We will display these as an unordered list on our landing page.<\/p>\n<h2 class=\"wp-block-heading\">1. Introduction<\/h2>\n<p>We will create the ReactJS application using the create-react-app utility. For the server-side code, we use express as our webserver to expose an API to call from the client using Ajax Request. But do not worry, you do not need to know a lot about the ongoings on the server side since we will focus on the client-side logic. This logic remains the same regardless of the server-side technology. <\/p>\n<h2 class=\"wp-block-heading\">2. Initial Setup<\/h2>\n<p>Without further delay let us get started and set up our sample app for this example. Firstly we run the following command to generate our ReactJS application.<\/p>\n<pre class=\"brush: bash;\">&gt; npx create-react-app my-app .\n<\/pre>\n<p>You can think of npx as a tool to download temporarily required tools and run them. They are disposed of once done. This prevents pollution of our global namespace. Once the command above completes our generated project structure should look like below:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"325\" height=\"607\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ProjectStructureReactJSAJAX.jpg\" alt=\"ReactJS with Ajax - Project Structure\" class=\"wp-image-101799\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ProjectStructureReactJSAJAX.jpg 325w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ProjectStructureReactJSAJAX-161x300.jpg 161w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><figcaption>Project Structure<\/figcaption><\/figure>\n<\/div>\n<p>To set up our server-side code we will leverage express and the cors package. Our server-side code consists of the two files, viz., index.js and countryController.js. The code looks like below, though we need not deep dive into it for the purposes of this example. Suffice it to say that it returns a list of countries with their codes which match the text user types in.<\/p>\n<p><span style=\"text-decoration: underline\"><em>index.js<\/em><\/span><div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<pre class=\"brush: js;\">const express = require('express');\nconst app = express();\nconst bodyParser = require(\"body-parser\");\nconst api = require('.\/countryController');\nconst cors = require('cors');\n\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(cors());\napp.use('\/api', api());\n\nconst Port = process.env.PORT || 2019;\n\napp.listen(Port, () =&gt; {\n    console.log(`Listening on ${Port}.`);\n});\n<\/pre>\n<p><span style=\"text-decoration: underline\"><em>countryController.js<\/em><\/span><\/p>\n<pre class=\"brush: js;\">const router = require('express').Router();\n\nmodule.exports = () =&gt; {\n    router.get('\/country\/:code?', (req, res) =&gt; {\n        let code = req.params.code || \"\";\n        if (code) {\n            return res.json(countries.filter(c =&gt; c.code.toLowerCase().indexOf(code.toLowerCase()) &gt; -1 ||\n                c.name.toLowerCase().indexOf(code.toLowerCase()) &gt; -1));\n\n        }\n        return res.json(countries);\n    });\n    return router;\n};\n\nconst countries = [\n    { name: 'Afghanistan', code: 'AF' },\n    { name: '\u00c5land Islands', code: 'AX' },\n    { name: 'Albania', code: 'AL' },\n...\n<\/pre>\n<p>Now that our server-side code is setup let us now turn our attention to the ReactJS application. We create a component named Country in a file named the same. We use function component here and make use of hooks as well. The component renders an input followed by an unordered list of countries retrieved from the API. <\/p>\n<h2 class=\"wp-block-heading\">3. Client-Side Code<\/h2>\n<p>We make use of <code>useEffect<\/code> hook to make a call to the API. Inside the <code>useEffect<\/code> callback, we use <code>window.fetch<\/code> to make a get call to the URL <code>http:\/\/localhost:2019\/api\/country\/:code?<\/code>. This API returns a list of countries with their codes as JSON. We then set the state property countries to the returned list. This will lead to the re-rendering of the component with the list of countries as well.<\/p>\n<p>Initially, when the application loads we pass an empty string to the API which causes it to return the entire list of countries. As the user types in the input subsequent AJAX calls pass on the user typed text to the API. Which in turn returns a filtered list of countries. The code for our component now looks like below:<\/p>\n<p><span style=\"text-decoration: underline\"><em>Country.js<\/em><\/span><\/p>\n<pre class=\"brush: js;\">import React, { useState, useEffect } from 'react';\n\nfunction Country(props) {\n    const [countries, setCountries] = useState([]);\n    const [userText, setUserText] = useState(\"\");\n\n    useEffect(() =&gt; {        window.fetch(`http:\/\/localhost:2019\/api\/country\/${userText}`).then((response) =&gt;\n            response.json()\n        ).then((c) =&gt; {\n            setCountries(c);\n        });\n\n    }, [userText]);\n    const handleChange = (evt) =&gt; {\n        setUserText(evt.target.value);\n    }\n    \n    return &lt;&gt;\n        &lt;input type=\"text\" onChange={handleChange} value={userText} \/&gt;\n\n        {countries.length \n                &lt;li key={c.code}&gt;{c.name}&lt;\/li&gt;\n            )}\n        &lt;\/ul&gt;\n    &lt;\/&gt;;\n}\nexport default Country;\n<\/pre>\n<h2 class=\"wp-block-heading\">4. Code in action<\/h2>\n<p>Let us now see all of this in action. We need to make additional changes to our package.json file to run both the server-side and client-side code in parallel when we run npm start. There are npm packages available to do this but for our example, I have chosen to use start instead. This will only work on window systems though.<\/p>\n<p><span style=\"text-decoration: underline\"><em>package.json<\/em><\/span><\/p>\n<pre class=\"brush: js;\">\"start\": \"start react-scripts start &amp;&amp; start node api\/index.js\",\n...\n<\/pre>\n<p>To run the application now we just need to execute the below command:<\/p>\n<pre class=\"brush: bash;\">&gt; npm start\n<\/pre>\n<p>The default browser should open pointing to URL http:\/\/localhost:3000. Below is the screengrab of what you should see on the initial load.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"439\" height=\"701\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ReactJSAJAXOutput-1.jpg\" alt=\"ReactJS with Ajax - Project Output\" class=\"wp-image-101809\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ReactJSAJAXOutput-1.jpg 439w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ReactJSAJAXOutput-1-188x300.jpg 188w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><figcaption>Project Output<\/figcaption><\/figure>\n<\/div>\n<p>Now as we type in the text box the list is filtered and refined. An example of this in action is below:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"351\" height=\"375\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ReactJSAJAXOutput-2.jpg\" alt=\"\" class=\"wp-image-101810\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ReactJSAJAXOutput-2.jpg 351w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/01\/ReactJSAJAXOutput-2-281x300.jpg 281w\" sizes=\"(max-width: 351px) 100vw, 351px\" \/><figcaption>Project Output<\/figcaption><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">5. Download the Source Code<\/h2>\n<p>This was an example of AJAX Request in a ReactJS 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\/01\/JCG-ReactJS-with-Ajax-Requests-Example.zip\"><strong>ReactJS with AJAX Requests Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a ReactJS application. We will create a simple application where the user can type in a few characters and we will pass these on to the server in an &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":[353,1919],"class_list":["post-101657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-ajax","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ReactJS with Ajax Requests Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a\" \/>\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-ajax-requests-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 Ajax Requests Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-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-02-04T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-10T17:18:38+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=\"4 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-ajax-requests-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\"},\"headline\":\"ReactJS with Ajax Requests Example\",\"datePublished\":\"2020-02-04T09:00:00+00:00\",\"dateModified\":\"2020-02-10T17:18:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html\"},\"wordCount\":654,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"keywords\":[\"Ajax\",\"Reactjs\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html\",\"name\":\"ReactJS with Ajax Requests Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"datePublished\":\"2020-02-04T09:00:00+00:00\",\"dateModified\":\"2020-02-10T17:18:38+00:00\",\"description\":\"In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/reactjs-with-ajax-requests-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-ajax-requests-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 Ajax Requests 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 Ajax Requests Example - Java Code Geeks","description":"In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a","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-ajax-requests-example.html","og_locale":"en_US","og_type":"article","og_title":"ReactJS with Ajax Requests Example - Java Code Geeks","og_description":"In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a","og_url":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2020-02-04T09:00:00+00:00","article_modified_time":"2020-02-10T17:18:38+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c"},"headline":"ReactJS with Ajax Requests Example","datePublished":"2020-02-04T09:00:00+00:00","dateModified":"2020-02-10T17:18:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html"},"wordCount":654,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","keywords":["Ajax","Reactjs"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html","url":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html","name":"ReactJS with Ajax Requests Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","datePublished":"2020-02-04T09:00:00+00:00","dateModified":"2020-02-10T17:18:38+00:00","description":"In this post, we feature a comprehensive article about ReactJS with Ajax Requests. In this article, we will have a look at making Ajax requests in a","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/reactjs-with-ajax-requests-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-ajax-requests-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 Ajax Requests 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\/101657","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=101657"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/101657\/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=101657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=101657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=101657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}