{"id":102833,"date":"2021-06-09T11:00:00","date_gmt":"2021-06-09T08:00:00","guid":{"rendered":"https:\/\/examples.javacodegeeks.com\/?p=102833"},"modified":"2021-06-03T16:48:14","modified_gmt":"2021-06-03T13:48:14","slug":"react-spring-tutorial","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/","title":{"rendered":"React Spring Tutorial"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"h-1-introduction\">1. Introduction<\/h2>\n<p>In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build a full stack web application to understand this process.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-2-what-is-react-spring\">2. What is React-Spring?<\/h2>\n<p id=\"h-spring-is-an-mvc-framework-used-to-develop-web-applications-and-it-is-one-of-the-most-popular-development-frameworks-for-enterprise-java-the-spring-framework-makes-web-development-more-accessible-and-we-use-spring-for-web-based-crud-applications-we-see-one-such-example-shortly\">Spring is an MVC framework used to develop web applications, and it is one of the most popular development frameworks for enterprise Java. The Spring framework makes web development more accessible, and we use Spring for web-based CRUD applications. We see one such example shortly. <\/p>\n<p>To develop the frontend, one of the most popular frameworks is React.js. It is an open-source Javascript library used for creating user interfaces and components.<\/p>\n<p>We can integrate or use React.js and Spring together very quickly to produce a web app with a strong backend and robust frontend.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-3-installation\">3. Installation<\/h2>\n<p>For building a project using Spring and React, we need the following softwares<\/p>\n<ul class=\"wp-block-list\">\n<li>Java version 8 or more. To download Java, please visit the &lt;a href=&#8221;http:\/\/Java Downloads Page.<\/li>\n<li>Node.js version 8 or more. To download, visit the <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js downloads page<\/a>.<\/li>\n<li>Your Favorite IDE like Eclipse or Visual Studio Code. We are using Visual Studio Code in this example. Visual Studio Code download link is available <a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>. <\/li>\n<\/ul>\n<p>We also use the <a href=\"https:\/\/start.spring.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spring initializer<\/a> to generate a Spring project. We add the following dependencies to the project:<\/p>\n<ul class=\"wp-block-list\">\n<li>H2 database, which is an in-memory database.<\/li>\n<li>Spring Data JPA<\/li>\n<li>Web<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_initializer.jpg\"><img decoding=\"async\" width=\"800\" height=\"435\" src=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_initializer.jpg\" alt=\"react spring - Spring Initializer with dependencies added\" class=\"wp-image-102835\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_initializer.jpg 800w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_initializer-300x163.jpg 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_initializer-768x418.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>Spring Initializer with dependencies added<\/figcaption><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-4-example-code\">4. Example Code<\/h2>\n<p>To understand how to use Spring and React to work with each other, we shall build a simple application for a Book Management System. We shall only build the Read part of the Book Management System.<\/p>\n<p>Open the project in the Visual Studio Code.<\/p>\n<ul class=\"wp-block-list\">\n<li>Create a simple class for a Book which had the 2 variables id and name and generate getter-setters.<\/li>\n<li>Create a Controller file called BookController.java. The Book Controller is as follows:<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline\"><em>BookController.java<\/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:java\"> \npackage com.jcg.examples.demo.books;\n\nimport java.util.Collection;\nimport java.util.stream.Collectors;\n\nimport org.springframework.web.bind.annotation.GetMapping;\nimport org.springframework.web.bind.annotation.RestController;\n\n\n@RestController\n\npublic class BookController {\n    private BookRepository repository;\n\n    public BookController(BookRepository repository) {\n        this.repository = repository;\n    }\n\n    @GetMapping(\"\/good-books\")\n  \n    public Collection goodBooks() {\n        return repository.findAll().stream()\n                .filter(this::isAvailable)\n                .collect(Collectors.toList());\n    }\n\n    private boolean isAvailable(Book Book) {\n        return !Book.getName().equals(\"Les Miserables\") &amp;&amp;\n                !Book.getName().equals(\"The History of the World\");   \n    }\n}\n<\/pre>\n<ul class=\"wp-block-list\">\n<li>Create a Repository class and add the <code>@RepositoryRestResource<\/code> annotation to the class to expose the CRUD operations as Rest endpoints.<\/li>\n<li>We also add a Command-line runner to get output to the screen.<\/li>\n<li>Building the project and running shows the following output on the screen:<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_intial_run.jpg\"><img decoding=\"async\" width=\"800\" height=\"122\" src=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_intial_run.jpg\" alt=\"react spring - Initial run of Spring application\" class=\"wp-image-102836\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_intial_run.jpg 800w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_intial_run-300x46.jpg 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/spring_intial_run-768x117.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>Initial run of Spring application<\/figcaption><\/figure>\n<\/div>\n<ul class=\"wp-block-list\">\n<li>To create a new React project inside the Spring project repository, we trigger the command:<\/li>\n<\/ul>\n<pre class=\"brush:bash\">create-react-app client --scripts-version=react-scripts-ts<\/pre>\n<p>This step creates a client folder under the root of the Spring project. If we change into the client folder and run the command:<\/p>\n<pre class=\"brush:bash\">npm start<\/pre>\n<p>it will show the main react page as follows:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/react_initial_page.jpg\"><img decoding=\"async\" width=\"800\" height=\"187\" src=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/react_initial_page.jpg\" alt=\"react spring - Initial Page of React application\" class=\"wp-image-102837\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/react_initial_page.jpg 800w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/react_initial_page-300x70.jpg 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/react_initial_page-768x180.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>Initial Page of React application<\/figcaption><\/figure>\n<\/div>\n<p>To connect the React application with the Spring application, we add the <code>componentDidMount()<\/code> and change the render in the <code>App.tsx<\/code> file. In the <code>App.tsx<\/code> file, we also add the interfaces and constructors.<\/p>\n<p><span style=\"text-decoration: underline\"><em>App.tsx<\/em><\/span><\/p>\n<pre class=\"brush:javascript\">import * as React from 'react';\nimport '.\/App.css';\n\nimport logo from '.\/logo.svg';\n\ninterface Book {\n  id: number;\n  name: string;\n}\n\ninterface AppProps {\n}\n\ninterface AppState {\n  books: Array;\n  isLoading: boolean;\n}\n\nclass App extends React.Component {\n\n  constructor(props: AppProps) {\n    super(props);\n\n    this.state = {\n      books: [],\n      isLoading: false\n    };\n  }\n\n  componentDidMount() {\n    this.setState({ isLoading: true });\n\n    fetch('http:\/\/localhost:4000\/good-books') \n      .then(response =&gt; response.json())\n      .then(data =&gt; this.setState({ books: data, isLoading: false }));\n  }\n\n  render() {\n    const { books, isLoading } = this.state;\n\n    if (isLoading) {\n      return &lt;p&gt;Loading...&lt;\/p&gt;;\n    }\n\n    return (\n      &lt;div className=\"App\"&gt;\n        &lt;header className=\"App-header\"&gt;\n          &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/&gt;\n          &lt;h1 className=\"App-title\"&gt;Welcome to React&lt;\/h1&gt;\n        &lt;\/header&gt;\n        &lt;div&gt;\n          &lt;h2&gt;Book List&lt;\/h2&gt;\n          {books.map((book: Book) =&gt;\n            &lt;div key={book.id}&gt;{book.name}&lt;\/div&gt;\n          )}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n\n\nexport default App;\n<\/pre>\n<p>Since we are essentially joining the output from the localhost for the Spring application to the output of the React application, we get a CORS exception. To overcome the CORS exception, we do the following :<\/p>\n<p>In our Spring Controller, we need to add the <code>@CrossOrigin<\/code> annotation. The Controller now looks as follows:<\/p>\n<p><span style=\"text-decoration: underline\"><em>BookController.java<\/em><\/span><\/p>\n<pre class=\"brush:java\">package com.jcg.examples.demo.books;\n\nimport java.util.Collection;\nimport java.util.stream.Collectors;\n\nimport org.springframework.web.bind.annotation.GetMapping;\nimport org.springframework.web.bind.annotation.RestController;\nimport org.springframework.web.bind.annotation.CrossOrigin;\n\n@RestController\n\npublic class BookController {\n    private BookRepository repository;\n\n    public BookController(BookRepository repository) {\n        this.repository = repository;\n    }\n\n    @GetMapping(\"\/good-books\")\n    @CrossOrigin(origins = \"http:\/\/localhost:3000\")\n    public Collection goodBooks() {\n        return repository.findAll().stream()\n                .filter(this::isAvailable)\n                .collect(Collectors.toList());\n    }\n\n    private boolean isAvailable(Book Book) {\n        return !Book.getName().equals(\"Les Miserables\") &amp;&amp;\n                !Book.getName().equals(\"The History of the World\");   \n    }\n}\n<\/pre>\n<p>After this step, rebuild the code, clear the browser cache and restart the server. Now, we should see the output as follows:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/project_output.jpg\"><img decoding=\"async\" width=\"800\" height=\"332\" src=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/project_output.jpg\" alt=\"react spring - Project Output\" class=\"wp-image-102838\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/project_output.jpg 800w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/project_output-300x125.jpg 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/project_output-768x319.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>Project Output<\/figcaption><\/figure>\n<\/div>\n<p>We have just created a Spring and React application. We can add functionality for inserting records, updating records etc.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-5-summary\">5. Summary<\/h2>\n<p>In this article, we saw how to combine React and Spring and build a full-stack web app. We can also do the same using Springboot as well. React and Spring for Java is an excellent choice for building full-stack web-based applications.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-6-download-the-source-code\">6. Download the Source Code<\/h2>\n<p>The attached code is for the Simple Spring application with react.js as the frontend. The attached code contains only the source folders and the pom.xml file.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a href=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2021\/06\/ReactSpringTutCode.zip\"><strong>React Spring Tutorial<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build a full stack web application to understand this process. 2. What is React-Spring? Spring is an MVC framework used to develop web applications, and it is one of &hellip;<\/p>\n","protected":false},"author":232,"featured_media":1248,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-102833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spring"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Spring Tutorial - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Spring Tutorial - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build\" \/>\n<meta property=\"og:url\" content=\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Examples Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-09T08:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-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=\"Reshma Sathe\" \/>\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=\"Reshma Sathe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\"},\"author\":{\"name\":\"Reshma Sathe\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/079aa9a12c7b8ebea3391ebeb6036a74\"},\"headline\":\"React Spring Tutorial\",\"datePublished\":\"2021-06-09T08:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\"},\"wordCount\":636,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg\",\"articleSection\":[\"spring\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\",\"name\":\"React Spring Tutorial - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg\",\"datePublished\":\"2021-06-09T08:00:00+00:00\",\"description\":\"1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build\",\"breadcrumb\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/examples.javacodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java Development\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/java-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Enterprise Java\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"spring\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/spring\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"React Spring Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#website\",\"url\":\"https:\/\/examples.javacodegeeks.com\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Examples and Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/examples.javacodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/examples.javacodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/javacodegeeks\",\"https:\/\/x.com\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/079aa9a12c7b8ebea3391ebeb6036a74\",\"name\":\"Reshma Sathe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2020\/08\/reshma_sathe-96x96.png\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2020\/08\/reshma_sathe-96x96.png\",\"caption\":\"Reshma Sathe\"},\"description\":\"I am a recent Master of Computer Science degree graduate from the University Of Illinois at Urbana-Champaign.I have previously worked as a Software Engineer with projects ranging from production support to programming and software engineering.I am currently working on self-driven projects in Java, Python and Angular and also exploring other frontend and backend technologies.\",\"sameAs\":[\"www.linkedin.com\/in\/reshma-sathe\"],\"url\":\"https:\/\/examples.javacodegeeks.com\/author\/reshma-sathe\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Spring Tutorial - Java Code Geeks","description":"1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build","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:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"React Spring Tutorial - Java Code Geeks","og_description":"1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build","og_url":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/","og_site_name":"Examples Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2021-06-09T08:00:00+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg","type":"image\/jpeg"}],"author":"Reshma Sathe","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Reshma Sathe","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#article","isPartOf":{"@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/"},"author":{"name":"Reshma Sathe","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/079aa9a12c7b8ebea3391ebeb6036a74"},"headline":"React Spring Tutorial","datePublished":"2021-06-09T08:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/"},"wordCount":636,"commentCount":0,"publisher":{"@id":"https:\/\/examples.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg","articleSection":["spring"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/","url":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/","name":"React Spring Tutorial - Java Code Geeks","isPartOf":{"@id":"https:\/\/examples.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg","datePublished":"2021-06-09T08:00:00+00:00","description":"1. Introduction In this is tutorial, we will see how to combine a web-based Spring application and a React front-end to work with together. We will build","breadcrumb":{"@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#primaryimage","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2012\/12\/spring-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/examples.javacodegeeks.com\/react-spring-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/examples.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Java Development","item":"https:\/\/examples.javacodegeeks.com\/category\/java-development\/"},{"@type":"ListItem","position":3,"name":"Enterprise Java","item":"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/"},{"@type":"ListItem","position":4,"name":"spring","item":"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/spring\/"},{"@type":"ListItem","position":5,"name":"React Spring Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/examples.javacodegeeks.com\/#website","url":"https:\/\/examples.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Examples and Code Snippets","publisher":{"@id":"https:\/\/examples.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/examples.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/examples.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/examples.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/079aa9a12c7b8ebea3391ebeb6036a74","name":"Reshma Sathe","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2020\/08\/reshma_sathe-96x96.png","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2020\/08\/reshma_sathe-96x96.png","caption":"Reshma Sathe"},"description":"I am a recent Master of Computer Science degree graduate from the University Of Illinois at Urbana-Champaign.I have previously worked as a Software Engineer with projects ranging from production support to programming and software engineering.I am currently working on self-driven projects in Java, Python and Angular and also exploring other frontend and backend technologies.","sameAs":["www.linkedin.com\/in\/reshma-sathe"],"url":"https:\/\/examples.javacodegeeks.com\/author\/reshma-sathe\/"}]}},"_links":{"self":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/102833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/users\/232"}],"replies":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=102833"}],"version-history":[{"count":0,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/102833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/media\/1248"}],"wp:attachment":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=102833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=102833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=102833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}