{"id":5131,"date":"2022-06-13T11:56:16","date_gmt":"2022-06-13T15:56:16","guid":{"rendered":"https:\/\/www.cloudsurph.com\/?p=5131"},"modified":"2022-06-13T12:18:18","modified_gmt":"2022-06-13T16:18:18","slug":"react-project-clean-structure","status":"publish","type":"post","link":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/","title":{"rendered":"React Project &#8211; Clean Structure"},"content":{"rendered":"<p>Understanding React App structure for a cleaner project build. Structure or clean architecture is a software design philosophy that separates the elements of a design into the ring levels.<\/p>\n<h2>React Project &#8211; Clean Structure<\/h2>\n<p>An important goal of the clean structure is to provide developers with a way to organize code in such a way that it encapsulates the business logic but keeps it separate from the delivery mechanism.<\/p>\n<h5><em><strong>You can purchase your\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">hosting from Cloudsurph.com<\/a>,\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\n<h3><strong>Advantages of Proper Architecture<\/strong><\/h3>\n<ul>\n<li>Testable<\/li>\n<li>Maintainable<\/li>\n<li>Changeable<\/li>\n<li>Easy to Develop<\/li>\n<li>Easy to Deploy<\/li>\n<li>Independent<\/li>\n<\/ul>\n<pre class=\"prettyprint\">react-example-app\r\n\u251c\u2500\u2500 src\r\n\u2502 \u251c\u2500\u2500 App.js\r\n\u2502 \u251c\u2500\u2500 index.js\r\n\u2502 \u251c\u2500\u2500 components\r\n\u2502 \u2502 \u251c\u2500\u2500 BlogPost.js\r\n\u2502 \u2502 \u251c\u2500\u2500 ReviewItem.js\r\n\u2502 \u2502 \u251c\u2500\u2500 ...\r\n\u2502 \u251c\u2500\u2500 layouts\r\n\u2502 \u251c\u2500\u2500 pages\r\n\u2502 \u2502 \u251c\u2500\u2500 Blog\r\n\u2502 \u2502 \u251c\u2500\u2500 Home\r\n\u2502 \u2502 \u251c\u2500\u2500 About\r\n\u2502 \u2502 \u251c\u2500\u2500 ...\r\n\u2502 \u251c\u2500\u2500 queries\r\n\u2502 \u2502 \u251c\u2500\u2500 useHome.js\r\n\u2502 \u2502 \u251c\u2500\u2500 useBlog.js\r\n\u2502 \u251c\u2500\u2500 routes\r\n\u2502 \u2502 \u251c\u2500\u2500 routes.js\r\n\u2502 \u251c\u2500\u2500 store\r\n\u2502 \u2502 \u251c\u2500\u2500 index.js\r\n\u2502 \u2502 \u251c\u2500\u2500 authSlice.js\r\n\u2502 \u2502 \u251c\u2500\u2500 ...\r\n\u2502 \u251c\u2500\u2500 widgets\r\n\u2502 \u2502 \u251c\u2500\u2500 buttons.js\r\n\u2502 \u2502 \u251c\u2500\u2500 typography.js\r\n\u2502 \u2502 \u251c\u2500\u2500 ...\r\n\u2502 \u251c\u2500\u2500 utils\r\n\u2502 \u2502 \u251c\u2500\u2500 axios.js\r\n\u251c\u2500\u2500 public\r\n\u251c\u2500\u2500 node_modules\r\n\u251c\u2500\u2500 package.json\r\n\u2514\u2500\u2500 README.md\r\n\r\n<\/pre>\n<h4>Components<\/h4>\n<p>Components are to building blocks of any react project. This folder consists of a collection of UI components like BlogPost.js, Header.js, Menu.js, Loading.js, etc., that can be used across various files in the project and are dependent on the current project packages.<\/p>\n<h4>Layouts<\/h4>\n<p>These directory container layouts of the app are like AuthLayout or AppLayout. The layout helps us to inject global components into the pages and protect restricted pages as well.<\/p>\n<h4>Pages<\/h4>\n<p>As the name says, it contains pages that we use in the projects, and a page usually contains components and widgets.<\/p>\n<h5><em><strong>You can purchase your\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">hosting from Cloudsurph.com<\/a>,\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">Cloudsurph hosting<\/a>\u00a0is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs<\/strong>.<\/em><\/h5>\n<h4>Queries<\/h4>\n<p>What is\u00a0SWR? well, the name \u201cSWR\u201d is derived from stale-while-revalidate, an HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from the cache (stale), then send the fetch request (revalidate), and finally, come up with the up-to-date data.<\/p>\n<p>SWR\u00a0Query is just one single line of code, you can simplify the logic of data fetching in your project<\/p>\n<h5>Example below:<\/h5>\n<pre class=\"prettyprint\">const {data, error} = useSwr('\/api\/posts', query);\r\n<\/pre>\n<h4>Routes<\/h4>\n<p>This folder is formed of all routes of the applications. It consists of protected, private, and all types of routes. So, now here we can even call our sub-route.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5133\" src=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/Understanding-React-App-structure-for-a-cleaner-project-build.jpg\" alt=\"Understanding React App structure for a cleaner project build\" width=\"1280\" height=\"720\" srcset=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/Understanding-React-App-structure-for-a-cleaner-project-build.jpg 1280w, https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/Understanding-React-App-structure-for-a-cleaner-project-build-980x551.jpg 980w, https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/Understanding-React-App-structure-for-a-cleaner-project-build-480x270.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1280px, 100vw\" \/><br \/>\n<em><strong>IF you want then buy a good, reliable, secure web <a href=\"https:\/\/www.cloudsurph.com\/windows-vps-hosting\/\">hosting<\/a>\u00a0service \u00a0from here:\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">click here<\/a><\/strong><\/em><\/p>\n<h4>Store<\/h4>\n<p>The global data store will be contained in the store directory, in this case, Redux. Each feature will have a file called reducer, which will contain the Redux Toolkit slice, as well as actions.\u00a0<a href=\"https:\/\/www.cloudsurph.com\/redux-toolkit-rtk-integration-with-react\/\">Go to this article to see how to configure the Redux toolkit<\/a><\/p>\n<h4>Widgets<\/h4>\n<p>Within the widgets folder, I would group by type &#8211; forms, tables, buttons, layout, etc. The specifics will vary by your specific app, and are not dependent on the current project packages and styles).<\/p>\n<p>What is the difference between components and widgets directories? Components can&#8217;t be used, so if we copy them and use them in a new project, which depends on packages. So, Styles, and widgets can be used in different projects.<\/p>\n<h4>Utils<\/h4>\n<p>So, in the utils directory we get out any logic or service and we write for our project, for example, a wrapper for Axios could be here.<\/p>\n<p>If you enjoyed reading this article and have more questions please reach out to our\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/submitticket.php?step=2&amp;deptid=1\">support team<\/a>\u00a0via live chat or\u00a0<a href=\"mailto:support@cloudsurph.com\">email<\/a>\u00a0and we would be glad to help you. we provide server\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">hosting<\/a>\u00a0for all types of need and we can even get your\u00a0<a href=\"https:\/\/hosting.cloudsurph.com\/\">server<\/a>\u00a0up and running with the service of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Understanding React App structure for a cleaner project build. Structure or clean architecture is a software design philosophy that separates the elements of a design into the ring levels. React Project &#8211; Clean Structure An important goal of the clean structure is to provide developers with a way to organize code in such a way [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5132,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[152,25,150,151,44,1,31],"tags":[54,47,105,103,48,113],"class_list":["post-5131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adonisjs","category-web-hosting-virtualization","category-laravel","category-react-js","category-kvm-xen","category-virtual-private-servers","category-web-hosting","tag-best-vps-hosting-server-maryland","tag-cheap-cloud-servers","tag-cheap-storage-server-hosting","tag-cheapest-vps","tag-dedicated-server-hosting-in-washington-d-c","tag-speed-test-vps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Understanding react app structure for a cleaner project build<\/title>\n<meta name=\"description\" content=\"Understanding React App structure for a cleaner project build. Structure or clean architecture software design for React App\" \/>\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.cloudsurph.com\/react-project-clean-structure\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding react app structure for a cleaner project build\" \/>\n<meta property=\"og:description\" content=\"Understanding React App structure for a cleaner project build. Structure or clean architecture software design for React App\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudsurph Web Hosting Washington D.C.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CloudSurph\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-13T15:56:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-13T16:18:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/React-Project-Clean-structure.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"611\" \/>\n\t<meta property=\"og:image:height\" content=\"320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cloudsurph\" \/>\n<meta name=\"twitter:site\" content=\"@Cloud_Surph\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rony\" \/>\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.cloudsurph.com\\\/react-project-clean-structure\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/\"},\"author\":{\"name\":\"Rony\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\"},\"headline\":\"React Project &#8211; Clean Structure\",\"datePublished\":\"2022-06-13T15:56:16+00:00\",\"dateModified\":\"2022-06-13T16:18:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/\"},\"wordCount\":576,\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/React-Project-Clean-structure.jpg\",\"keywords\":[\"Best VPS hosting server Maryland\",\"Cheap Cloud Servers\",\"Cheap Storage Server Hosting\",\"Cheapest VPS\",\"Dedicated Server Hosting in Washington D.C\",\"Speed test VPS\"],\"articleSection\":[\"AdonisJS\",\"Cloud Hosting\",\"Laravel\",\"React Js\",\"Virtualization\",\"VPS Servers\",\"Web Hosting\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/\",\"name\":\"Understanding react app structure for a cleaner project build\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/React-Project-Clean-structure.jpg\",\"datePublished\":\"2022-06-13T15:56:16+00:00\",\"dateModified\":\"2022-06-13T16:18:18+00:00\",\"description\":\"Understanding React App structure for a cleaner project build. Structure or clean architecture software design for React App\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/React-Project-Clean-structure.jpg\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/React-Project-Clean-structure.jpg\",\"width\":611,\"height\":320,\"caption\":\"Understanding React App structure for a cleaner project build\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/react-project-clean-structure\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.cloudsurph.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Project &#8211; Clean Structure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#website\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"name\":\"Cloudsurph Web Hosting Washington D.C.\",\"description\":\"Dedicated Server Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.cloudsurph.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#organization\",\"name\":\"CloudSurph Technology Solutions\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.cloudsurph.com\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/cloudsurph-logo.png\",\"width\":2348,\"height\":1692,\"caption\":\"CloudSurph Technology Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/CloudSurph\\\/\",\"https:\\\/\\\/x.com\\\/Cloud_Surph\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.cloudsurph.com\\\/#\\\/schema\\\/person\\\/ac9b4dd136d96e50d5f29c560191e7ed\",\"name\":\"Rony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g\",\"caption\":\"Rony\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/cloudsurph\"],\"url\":\"https:\\\/\\\/www.cloudsurph.com\\\/author\\\/ron\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding react app structure for a cleaner project build","description":"Understanding React App structure for a cleaner project build. Structure or clean architecture software design for React App","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.cloudsurph.com\/react-project-clean-structure\/","og_locale":"en_US","og_type":"article","og_title":"Understanding react app structure for a cleaner project build","og_description":"Understanding React App structure for a cleaner project build. Structure or clean architecture software design for React App","og_url":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/","og_site_name":"Cloudsurph Web Hosting Washington D.C.","article_publisher":"https:\/\/www.facebook.com\/CloudSurph\/","article_published_time":"2022-06-13T15:56:16+00:00","article_modified_time":"2022-06-13T16:18:18+00:00","og_image":[{"width":611,"height":320,"url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/React-Project-Clean-structure.jpg","type":"image\/jpeg"}],"author":"Rony","twitter_card":"summary_large_image","twitter_creator":"@cloudsurph","twitter_site":"@Cloud_Surph","twitter_misc":{"Written by":"Rony","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#article","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/"},"author":{"name":"Rony","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed"},"headline":"React Project &#8211; Clean Structure","datePublished":"2022-06-13T15:56:16+00:00","dateModified":"2022-06-13T16:18:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/"},"wordCount":576,"publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"image":{"@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/React-Project-Clean-structure.jpg","keywords":["Best VPS hosting server Maryland","Cheap Cloud Servers","Cheap Storage Server Hosting","Cheapest VPS","Dedicated Server Hosting in Washington D.C","Speed test VPS"],"articleSection":["AdonisJS","Cloud Hosting","Laravel","React Js","Virtualization","VPS Servers","Web Hosting"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/","url":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/","name":"Understanding react app structure for a cleaner project build","isPartOf":{"@id":"https:\/\/www.cloudsurph.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#primaryimage"},"image":{"@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/React-Project-Clean-structure.jpg","datePublished":"2022-06-13T15:56:16+00:00","dateModified":"2022-06-13T16:18:18+00:00","description":"Understanding React App structure for a cleaner project build. Structure or clean architecture software design for React App","breadcrumb":{"@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cloudsurph.com\/react-project-clean-structure\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#primaryimage","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/React-Project-Clean-structure.jpg","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2022\/06\/React-Project-Clean-structure.jpg","width":611,"height":320,"caption":"Understanding React App structure for a cleaner project build"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cloudsurph.com\/react-project-clean-structure\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cloudsurph.com\/"},{"@type":"ListItem","position":2,"name":"React Project &#8211; Clean Structure"}]},{"@type":"WebSite","@id":"https:\/\/www.cloudsurph.com\/#website","url":"https:\/\/www.cloudsurph.com\/","name":"Cloudsurph Web Hosting Washington D.C.","description":"Dedicated Server Hosting","publisher":{"@id":"https:\/\/www.cloudsurph.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cloudsurph.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.cloudsurph.com\/#organization","name":"CloudSurph Technology Solutions","url":"https:\/\/www.cloudsurph.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","contentUrl":"https:\/\/www.cloudsurph.com\/wp-content\/uploads\/2016\/04\/cloudsurph-logo.png","width":2348,"height":1692,"caption":"CloudSurph Technology Solutions"},"image":{"@id":"https:\/\/www.cloudsurph.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CloudSurph\/","https:\/\/x.com\/Cloud_Surph"]},{"@type":"Person","@id":"https:\/\/www.cloudsurph.com\/#\/schema\/person\/ac9b4dd136d96e50d5f29c560191e7ed","name":"Rony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40163fe1eb49d5eddd81954e8ad5122633e141df15b0733d07fbe4a156688ba5?s=96&d=mm&r=g","caption":"Rony"},"sameAs":["https:\/\/x.com\/cloudsurph"],"url":"https:\/\/www.cloudsurph.com\/author\/ron\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/comments?post=5131"}],"version-history":[{"count":4,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5131\/revisions"}],"predecessor-version":[{"id":5137,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/posts\/5131\/revisions\/5137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media\/5132"}],"wp:attachment":[{"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/media?parent=5131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/categories?post=5131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudsurph.com\/wp-json\/wp\/v2\/tags?post=5131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}