{"id":19015739,"url":"https://github.com/fatihcaliss/github-followers-app","last_synced_at":"2026-05-05T14:10:19.217Z","repository":{"id":44389752,"uuid":"512243651","full_name":"fatihcaliss/github-followers-app","owner":"fatihcaliss","description":"User can check their  GitHub followers and following  which is followed or following by user.","archived":false,"fork":false,"pushed_at":"2022-07-10T11:20:27.000Z","size":3456,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-25T06:29:49.861Z","etag":null,"topics":["bootstrap","react","react-axios","react-bootstrap","react-router"],"latest_commit_sha":null,"homepage":"https://github-followers-app.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fatihcaliss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-09T17:16:21.000Z","updated_at":"2022-07-26T12:08:05.000Z","dependencies_parsed_at":"2022-07-15T01:16:08.776Z","dependency_job_id":null,"html_url":"https://github.com/fatihcaliss/github-followers-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fatihcaliss/github-followers-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatihcaliss%2Fgithub-followers-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatihcaliss%2Fgithub-followers-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatihcaliss%2Fgithub-followers-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatihcaliss%2Fgithub-followers-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fatihcaliss","download_url":"https://codeload.github.com/fatihcaliss/github-followers-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fatihcaliss%2Fgithub-followers-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278315198,"owners_count":25966775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","react","react-axios","react-bootstrap","react-router"],"created_at":"2024-11-08T19:39:27.893Z","updated_at":"2025-10-04T12:52:11.002Z","avatar_url":"https://github.com/fatihcaliss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :point_right: [Click here to see on browser](https://github-followers-app.vercel.app/)\n\n# Axios-Router Project\n\n###Project Tree\n![project](projecttree.jpg)\n\n### Kullanılan Paketler\n```\naxios,\nreact-router-dom,\nreact-bootsrap //index e link veriyoruz\nstyled-components\nYükleme Komutları\nnpm i axios or yarn add axios//axios ile veri çekeilmek için\nnpm i react-router-dom or yarn add react-router-dom//router yapısını kullanabilmemiz için\nnpm i react-bootstrap or yarn add react-bootstrap// style de react-boostrapi kullanabilmek\niçin\nnpm i styled-components or yarn add styled-components\n```\n### Projede Kullanılacak olan Api\n[Github Api](https://docs.github.com/en/rest/users)\nBuradan biz followers kısmını alacağız .\n[GithubAPiFollowers](https://api.github.com/users/anthonyharold67/followers?per_page=100)\n\nApi nin verdği farklı veriler de var isteyen inceleyip proje oluşturabilir ona göre.\n\n### React Router\nRouting Nedir ? \n```\nYönlendirme, kullanıcıya farklı sayfalar gösterme kapasitesidir. \nBu, kullanıcının bir URL girerek veya bir öğeye tıklayarak uygulamanın farklı \nbölümleri arasında hareket edebileceği anlamına gelir.\n```\n\nNeden react router kullanılıyor ?\n\nReact hepimizn bildiği gibi single page bir yapı. sayfalar arası gezinebilmek için router yapısını kullanırız.\n\nSingle Page Nedir?\n```\nSingle page application yani kısa adıyla SPA, tek HTML sayfası yükleyen bir uygulamadır \nve uygulamanın çalışması için gerekli tüm dosyaları (JavaScript, CSS vb) içerir. \nSayfa veya sonraki sayfalarla olan herhangi bir etkileşim için servera \ngidip gelmesi gerektirmez; bu da sayfanın yeniden yüklenmediği anlamına gelir.\nReactte SPA oluşturabilmenize rağmen, bu bir zorunluluk değildir. \nReact, hali hazırda çalışan bir sitenin küçük bölümlerini geliştirmek için \nde kullanılabilir. React’te yazılmış kod, diğer diller ile de kullanılabilir. \nFacebook’un sitesi buna en iyi örnektir\n```\n\nYani normal html projelerinde bizim örneğin home.html,about.html,profile.html yapılarımız var.Biz napıyoruz bunları biribirne `\u003ca\u003e` tagi ile bağlıyoruz. Aslında 3sayfada tek projeye ait ama html yapısından ötürü biz home.html den about.html e gitmek istediğimizde farklı bir sayfaya gidiyoruz.\nReact ta ise tek bir sayfa içinde sayfa olarak oluşturduğumuz componentler arasında geziniyoruz\n\n### React Router a özgü kavramlar\n**BrowserRouter**: Tanımlanan Yerlere Sayfaların Render Edileceğini Bildiren component. En dış sarmalayıcıdır.\n\n**Routes:** Konum her değiştiğinde, Routes en iyi eşleşmeyi bulmak için childları olan tüm alt Route öğelerine bakar ve kullanıcı arabiriminin bu dalını oluşturur.\n\n**Route:**  Url pathinde gelene göre hangi sayfanın(yani hangi componentin) render edileceğini belirten component. Ve eğer birden fazla Route varsa bunları Routes sarmalında tanımlamamız gerekir. Yoksa şu şekilde hata alırız:\n```\nBir \u003cRoute\u003e, yalnızca \u003cRoutes\u003e öğesinin alt öğesi olarak kullanılır, hiçbir zaman doğrudan işlenmez. Lütfen \u003cRoute\u003e'unuzu bir \u003cRoutes\u003e ile sarın.\n```\n**NavLink:**  Geçerli URL ile eşleştiğinde, render edilmiş elemente css ekleyecek bir `\u003cLink\u003e` sürümüdür. Css te a tagi olarak verebiliyoruz.*`Navlink` kullanmak için `react-router-dom`dan import etmemiz gerekiyor*\n\nKısaca Link,NavLink ve a href farkında bahsedelim\n```\nSingle page application uygulamarında temel mantık aynı sayfada sayfa yenilenmeden istenilen komponentin sayfaya çağırılmasıdır.\n\nBurada bazı react projelerinde dikkat çeken bir nokta projenin navigasyonunda gezerken sayfanın her linke \ntıklandığında sayfanın kendini yenilemesi (refresh) dir. \nBunun nedeni ise linke tıklandığında çağırılan komponentin\n\n\u003ca href=\"/componentAdi\"\u003e\u003c/a\u003e\nşeklinde çağırılmış olmasıdır.\n\nEğer a etiketi yerine react-dom elementi olan Link etiketi kullanılırsa\n\n\u003cLink to=\"/componentAdi\"\u003e\u003c/Link\u003e\nsayfa yenileme problemi ortadan kalkacaktır.\n\nBu kullanım sadece React özelinde değil diğer SPA uygulamarı içinde geçerlidir.\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffatihcaliss%2Fgithub-followers-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffatihcaliss%2Fgithub-followers-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffatihcaliss%2Fgithub-followers-app/lists"}