{"id":356,"date":"2023-05-19T12:44:33","date_gmt":"2023-05-19T12:44:33","guid":{"rendered":"https:\/\/www.devopsconsulting.in\/blog\/?p=356"},"modified":"2023-05-19T12:44:34","modified_gmt":"2023-05-19T12:44:34","slug":"crud-operation-in-laravel-with-react-js","status":"publish","type":"post","link":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/","title":{"rendered":"Crud operation in Laravel with react js"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">React project<\/h3>\n\n\n\n<p>First of all create react project <\/p>\n\n\n\n<p>create a project using this command my project name<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app frontend<\/code><\/pre>\n\n\n\n<p>then run these command also<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install bootstarp   \/\/to install bootstarp   \r\nnpm install react-router-dom  \/\/for routing\r\nnpm install axios    \/\/ to get data from api\r<\/code><\/pre>\n\n\n\n<p><strong>src\/pages\/create.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/8e732238d86bad6cd02133bfc7d80196.js\"><\/script>\n\n\n\n<p><strong>src\/pages\/edit.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/cf9e2c0e505ca73fcc3e23934406fa92.js\"><\/script>\n\n\n\n<p><strong>src\\pages\\home.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/79ea257a4503bc95f89245d6bfdf04f0.js\"><\/script>\n\n\n\n<p><strong>src\\pages\\view.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/890a715485df4d40ef5a815a4233ba1c.js\"><\/script>\n\n\n\n<p><strong>src\\http.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/63926346f7239e30a8ceb60232fcee4c.js\"><\/script>\n\n\n\n<p><strong>src\\index.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/b2563b794138820451de9dc568478b2f.js\"><\/script>\n\n\n\n<p><strong>src\\app.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/6f29e47b2ab511b42d7ea068c0efefb9.js\"><\/script>\n\n\n\n<p><strong>Start this project by using &#8220;npm start&#8221;<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">In Laravel<\/h3>\n\n\n\n<p>create a project<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer create-project laravel\/laravel:^9.0 &lt;your project name> <\/code><\/pre>\n\n\n\n<p>Create Resources controller<\/p>\n\n\n\n<p><strong>UserController.php<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/71c03ef540ba4933fb46f4fdd53eb456.js\"><\/script>\n\n\n\n<p><strong>user.php<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/abhishek7079\/96f7749da3c294e553c6da5c8671668d.js\"><\/script>\n\n\n\n<p>Create database by using &#8220;<strong>php artisan migration<\/strong>&#8221; .then set your filed name which want to create in table.In this case i am using flied name like (name,emailand password)<\/p>\n\n\n\n<p>after that run this command &#8220;<strong>php artisan migrate<\/strong>&#8220;<\/p>\n\n\n\n<p><strong>api.php<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Route::resource('users',UserController::class);<\/code><\/pre>\n\n\n\n<p>Run react project by using this command &#8220;npm start&#8221;<\/p>\n\n\n\n<p>Run laravel project by using this command &#8220;php artisan serve&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"216\" src=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-1024x216.png\" alt=\"\" class=\"wp-image-358\" srcset=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-1024x216.png 1024w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-300x63.png 300w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-768x162.png 768w, https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16.png 1253w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>React project First of all create react project create a project using this command my project name then run these command also src\/pages\/create.js src\/pages\/edit.js src\\pages\\home.js src\\pages\\view.js src\\http.js&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[72],"class_list":["post-356","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-crud-operation-in-laravel-with-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Crud operation in Laravel with react js - DevOps Consulting<\/title>\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.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crud operation in Laravel with react js - DevOps Consulting\" \/>\n<meta property=\"og:description\" content=\"React project First of all create react project create a project using this command my project name then run these command also src\/pages\/create.js src\/pages\/edit.js srcpageshome.js srcpagesview.js srchttp.js...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T12:44:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-19T12:44:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-1024x216.png\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"headline\":\"Crud operation in Laravel with react js\",\"datePublished\":\"2023-05-19T12:44:33+00:00\",\"dateModified\":\"2023-05-19T12:44:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/\"},\"wordCount\":132,\"commentCount\":2,\"image\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/image-16-1024x216.png\",\"keywords\":[\"Crud operation in Laravel with react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/\",\"name\":\"Crud operation in Laravel with react js - DevOps Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/image-16-1024x216.png\",\"datePublished\":\"2023-05-19T12:44:33+00:00\",\"dateModified\":\"2023-05-19T12:44:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/crud-operation-in-laravel-with-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/image-16.png\",\"contentUrl\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/image-16.png\",\"width\":1253,\"height\":264},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/\",\"name\":\"DevOps Consulting\",\"description\":\"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/author\\\/abhishek\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crud operation in Laravel with react js - DevOps Consulting","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.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Crud operation in Laravel with react js - DevOps Consulting","og_description":"React project First of all create react project create a project using this command my project name then run these command also src\/pages\/create.js src\/pages\/edit.js srcpageshome.js srcpagesview.js srchttp.js...","og_url":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/","og_site_name":"DevOps Consulting","article_published_time":"2023-05-19T12:44:33+00:00","article_modified_time":"2023-05-19T12:44:34+00:00","og_image":[{"url":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-1024x216.png","type":"","width":"","height":""}],"author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/#article","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"headline":"Crud operation in Laravel with react js","datePublished":"2023-05-19T12:44:33+00:00","dateModified":"2023-05-19T12:44:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/"},"wordCount":132,"commentCount":2,"image":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-1024x216.png","keywords":["Crud operation in Laravel with react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/","url":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/","name":"Crud operation in Laravel with react js - DevOps Consulting","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16-1024x216.png","datePublished":"2023-05-19T12:44:33+00:00","dateModified":"2023-05-19T12:44:34+00:00","author":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopsconsulting.in\/blog\/crud-operation-in-laravel-with-react-js\/#primaryimage","url":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16.png","contentUrl":"https:\/\/www.devopsconsulting.in\/blog\/wp-content\/uploads\/2023\/05\/image-16.png","width":1253,"height":264},{"@type":"WebSite","@id":"https:\/\/www.devopsconsulting.in\/blog\/#website","url":"https:\/\/www.devopsconsulting.in\/blog\/","name":"DevOps Consulting","description":"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopsconsulting.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","caption":"Abhishek Singh"},"description":"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.","url":"https:\/\/www.devopsconsulting.in\/blog\/author\/abhishek\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":4,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/356\/revisions\/361"}],"wp:attachment":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}