{"id":559,"date":"2022-09-04T18:56:28","date_gmt":"2022-09-04T15:56:28","guid":{"rendered":"https:\/\/mryed.com\/?p=559"},"modified":"2022-09-04T18:58:17","modified_gmt":"2022-09-04T15:58:17","slug":"react-ornek-proje","status":"publish","type":"post","link":"https:\/\/mryed.com\/en\/yazilim\/kodlama\/react\/react-ornek-proje\/","title":{"rendered":"React \u00d6rnek Proje – Hal\u0131 Ekleme ve \u00c7\u0131karma"},"content":{"rendered":"

Kendimi geli\u015ftirmek ad\u0131na son 2-3 ayd\u0131r html<\/a><\/em>, css, javascript<\/a><\/em> and bootstrap<\/a><\/em> e\u011fitim videolar\u0131 izledim. \u015euan ise react ve node.js alan\u0131nda ilerlemeye \u00e7al\u0131\u015f\u0131yorum. Bu kapsamda yaz\u0131l\u0131m bilimi<\/a><\/em> kanal\u0131n\u0131n reactjs e\u011fitim i\u00e7eri\u011fini tamamlad\u0131m ve react \u00f6rnek proje haz\u0131rlad\u0131m.<\/p>\n\n\n\n\n\n\n\n

React \u00d6rnek Proje<\/h2>\n\n\n\n

Proje dosyalar\u0131na github<\/a><\/em> arac\u0131l\u0131\u011f\u0131 ile ula\u015fabilirsiniz.<\/p>\n\n\n\n

Projeyi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in react kurulumu haricinde;<\/p>\n\n\n\n

npm install react-pose\nnpm install axios\nnpm install -g json-server\nnpm install react-router-dom@5.2.0<\/code><\/pre>\n\n\n\n
 kurumlar\u0131n\u0131 yapmal\u0131s\u0131n\u0131z. Daha sonra projeyi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in;<\/p>\n\n\n\n
npx json-server --watch api\/db.json\nnpm start<\/code><\/pre>\n\n\n\n
Proje G\u00f6r\u00fcnt\u00fcleri<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ana sayfada daha \u00f6nce json dosyas\u0131na eklenmi\u015f hal\u0131 markalar\u0131n\u0131 g\u00f6r\u00fcyoruz. Silinme i\u015flemi de yine bu sayfa i\u00e7erisinde yap\u0131l\u0131yor. Markalara t\u0131klad\u0131\u011f\u0131m\u0131zda ise fiyat ve desen bilgileri geliyor. Buradan istersek \u00fcr\u00fcn\u00fc d\u00fczenleyebiliyoruz. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Hal\u0131 ekleme sayfas\u0131nda ise default olarak kapal\u0131 gelen bir form bulunuyor. Formu a\u00e7\u0131p istenen bilgileri girip yeni hal\u0131 eklemesi yapabiliriz.<\/p>\n\n\n\n
Haz\u0131rlanan \u00f6rnek proje bu kadar. React<\/a><\/em> \u00fczerinde \u00e7al\u0131\u015fmaya devam edece\u011fim. \u015euana kadar videosunu izleyip de anlayamad\u0131\u011f\u0131m tek konu redux yap\u0131s\u0131. Onunda zamanla daha \u00e7ok video izledik\u00e7e ve proje g\u00f6rd\u00fck\u00e7e oturaca\u011f\u0131n\u0131 tahmin ediyorum.<\/p>","protected":false},"excerpt":{"rendered":"
Kendimi geli\u015ftirmek ad\u0131na son 2-3 ayd\u0131r html, css, javascript ve bootstrap e\u011fitim videolar\u0131 izledim. \u015euan ise react ve node.js alan\u0131nda ilerlemeye \u00e7al\u0131\u015f\u0131yorum. Bu kapsamda yaz\u0131l\u0131m bilimi kanal\u0131n\u0131n reactjs e\u011fitim i\u00e7eri\u011fini tamamlad\u0131m ve react \u00f6rnek proje haz\u0131rlad\u0131m.<\/p>","protected":false},"author":1,"featured_media":565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,64,11],"tags":[],"class_list":["post-559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kodlama","category-react","category-yazilim"],"yoast_head":"\nReact \u00d6rnek Proje - Hal\u0131 Ekleme ve \u00c7\u0131karma - Yunus Emre<\/title>\n<meta name=\"description\" content=\"Hal\u0131 ekleme, d\u00fczenleme ve \u00e7\u0131karma i\u015flemleri i\u00e7in react \u00f6rnek proje \u00e7al\u0131\u015fmas\u0131. State, json, axios kullan\u0131mlar\u0131n\u0131 g\u00f6rebilirsiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mryed.com\/en\/yazilim\/kodlama\/react\/react-ornek-proje\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React \u00d6rnek Proje - Hal\u0131 Ekleme ve \u00c7\u0131karma - Yunus Emre\" \/>\n<meta property=\"og:description\" content=\"Hal\u0131 ekleme, d\u00fczenleme ve \u00e7\u0131karma i\u015flemleri i\u00e7in react \u00f6rnek proje \u00e7al\u0131\u015fmas\u0131. State, json, axios kullan\u0131mlar\u0131n\u0131 g\u00f6rebilirsiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mryed.com\/en\/yazilim\/kodlama\/react\/react-ornek-proje\/\" \/>\n<meta property=\"og:site_name\" content=\"Yunus Emre\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-04T15:56:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T15:58:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mr.YED\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mr.YED\" \/>\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:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/\"},\"author\":{\"name\":\"Mr.YED\",\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\"},\"headline\":\"React \u00d6rnek Proje – Hal\u0131 Ekleme ve \u00c7\u0131karma\",\"datePublished\":\"2022-09-04T15:56:28+00:00\",\"dateModified\":\"2022-09-04T15:58:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/\"},\"wordCount\":208,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\"},\"image\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg\",\"articleSection\":[\"Kodlama\",\"React\",\"Yaz\u0131l\u0131m\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/\",\"url\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/\",\"name\":\"React \u00d6rnek Proje - Hal\u0131 Ekleme ve \u00c7\u0131karma - Yunus Emre\",\"isPartOf\":{\"@id\":\"https:\/\/mryed.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg\",\"datePublished\":\"2022-09-04T15:56:28+00:00\",\"dateModified\":\"2022-09-04T15:58:17+00:00\",\"description\":\"Hal\u0131 ekleme, d\u00fczenleme ve \u00e7\u0131karma i\u015flemleri i\u00e7in react \u00f6rnek proje \u00e7al\u0131\u015fmas\u0131. State, json, axios kullan\u0131mlar\u0131n\u0131 g\u00f6rebilirsiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage\",\"url\":\"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg\",\"contentUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg\",\"width\":1920,\"height\":900,\"caption\":\"react-ornek-proje\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/mryed.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React \u00d6rnek Proje – Hal\u0131 Ekleme ve \u00c7\u0131karma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mryed.com\/#website\",\"url\":\"https:\/\/mryed.com\/\",\"name\":\"Yunus Emre\",\"description\":\"Software Engineer\",\"publisher\":{\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mryed.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\",\"name\":\"Mr.YED\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\",\"url\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\",\"contentUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\",\"width\":360,\"height\":360,\"caption\":\"Mr.YED\"},\"logo\":{\"@id\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\"},\"description\":\"Mobil, web ve Microsoft tabanl\u0131 uygulamalar geli\u015ftiren bir yaz\u0131l\u0131m m\u00fchendisiyim. Kariyerim boyunca farkl\u0131 sekt\u00f6rlerde edindi\u011fim deneyimlerle \u00f6zellikle Power Platform, Power Apps, Power Automate ve kurumsal s\u00fcre\u00e7 otomasyonu konular\u0131nda uzmanla\u015ft\u0131m. Bu blogda yaz\u0131l\u0131m geli\u015ftirme, otomasyon ve Microsoft teknolojileri \u00fczerine edindi\u011fim tecr\u00fcbeleri payla\u015f\u0131yorum.\",\"sameAs\":[\"http:\/\/mryed.com\",\"https:\/\/www.linkedin.com\/in\/yunus-emre-demirel\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React \u00d6rnek Proje - Hal\u0131 Ekleme ve \u00c7\u0131karma - Yunus Emre","description":"Hal\u0131 ekleme, d\u00fczenleme ve \u00e7\u0131karma i\u015flemleri i\u00e7in react \u00f6rnek proje \u00e7al\u0131\u015fmas\u0131. State, json, axios kullan\u0131mlar\u0131n\u0131 g\u00f6rebilirsiniz.","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:\/\/mryed.com\/en\/yazilim\/kodlama\/react\/react-ornek-proje\/","og_locale":"en_US","og_type":"article","og_title":"React \u00d6rnek Proje - Hal\u0131 Ekleme ve \u00c7\u0131karma - Yunus Emre","og_description":"Hal\u0131 ekleme, d\u00fczenleme ve \u00e7\u0131karma i\u015flemleri i\u00e7in react \u00f6rnek proje \u00e7al\u0131\u015fmas\u0131. State, json, axios kullan\u0131mlar\u0131n\u0131 g\u00f6rebilirsiniz.","og_url":"https:\/\/mryed.com\/en\/yazilim\/kodlama\/react\/react-ornek-proje\/","og_site_name":"Yunus Emre","article_published_time":"2022-09-04T15:56:28+00:00","article_modified_time":"2022-09-04T15:58:17+00:00","og_image":[{"width":1920,"height":900,"url":"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg","type":"image\/jpeg"}],"author":"Mr.YED","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mr.YED","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#article","isPartOf":{"@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/"},"author":{"name":"Mr.YED","@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1"},"headline":"React \u00d6rnek Proje – Hal\u0131 Ekleme ve \u00c7\u0131karma","datePublished":"2022-09-04T15:56:28+00:00","dateModified":"2022-09-04T15:58:17+00:00","mainEntityOfPage":{"@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/"},"wordCount":208,"commentCount":0,"publisher":{"@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1"},"image":{"@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage"},"thumbnailUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg","articleSection":["Kodlama","React","Yaz\u0131l\u0131m"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/","url":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/","name":"React \u00d6rnek Proje - Hal\u0131 Ekleme ve \u00c7\u0131karma - Yunus Emre","isPartOf":{"@id":"https:\/\/mryed.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage"},"image":{"@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage"},"thumbnailUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg","datePublished":"2022-09-04T15:56:28+00:00","dateModified":"2022-09-04T15:58:17+00:00","description":"Hal\u0131 ekleme, d\u00fczenleme ve \u00e7\u0131karma i\u015flemleri i\u00e7in react \u00f6rnek proje \u00e7al\u0131\u015fmas\u0131. State, json, axios kullan\u0131mlar\u0131n\u0131 g\u00f6rebilirsiniz.","breadcrumb":{"@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#primaryimage","url":"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg","contentUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2022\/09\/Analog-Zaman-Saati.jpg","width":1920,"height":900,"caption":"react-ornek-proje"},{"@type":"BreadcrumbList","@id":"https:\/\/mryed.com\/yazilim\/kodlama\/react\/react-ornek-proje\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/mryed.com\/"},{"@type":"ListItem","position":2,"name":"React \u00d6rnek Proje – Hal\u0131 Ekleme ve \u00c7\u0131karma"}]},{"@type":"WebSite","@id":"https:\/\/mryed.com\/#website","url":"https:\/\/mryed.com\/","name":"Yunus Emre","description":"Software Engineer","publisher":{"@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mryed.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1","name":"Mr.YED","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png","url":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png","contentUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png","width":360,"height":360,"caption":"Mr.YED"},"logo":{"@id":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png"},"description":"I am a software engineer who develops mobile, web, and Microsoft-based applications. Throughout my career, I have gained experience in various industries and specialized in Power Platform, Power Apps, Power Automate, and enterprise process automation. In this blog, I share my experiences in software development, automation, and Microsoft technologies.","sameAs":["http:\/\/mryed.com","https:\/\/www.linkedin.com\/in\/yunus-emre-demirel\/"]}]}},"_links":{"self":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":4,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts\/559\/revisions\/568"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/media\/565"}],"wp:attachment":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/categories?post=559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/tags?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}