Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fatihcaliss/github-followers-app
User can check their GitHub followers and following which is followed or following by user.
https://github.com/fatihcaliss/github-followers-app
bootstrap react react-axios react-bootstrap react-router
Last synced: 10 days ago
JSON representation
User can check their GitHub followers and following which is followed or following by user.
- Host: GitHub
- URL: https://github.com/fatihcaliss/github-followers-app
- Owner: fatihcaliss
- Created: 2022-07-09T17:16:21.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-07-10T11:20:27.000Z (over 2 years ago)
- Last Synced: 2023-03-06T19:41:34.544Z (over 1 year ago)
- Topics: bootstrap, react, react-axios, react-bootstrap, react-router
- Language: JavaScript
- Homepage: https://github-followers-app.vercel.app/
- Size: 3.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :point_right: [Click here to see on browser](https://github-followers-app.vercel.app/)
# Axios-Router Project
###Project Tree
### Kullanılan Paketler
```
axios,
react-router-dom,
react-bootsrap //index e link veriyoruz
styled-components
Yükleme Komutları
npm i axios or yarn add axios//axios ile veri çekeilmek için
npm i react-router-dom or yarn add react-router-dom//router yapısını kullanabilmemiz için
npm i react-bootstrap or yarn add react-bootstrap// style de react-boostrapi kullanabilmek
için
npm i styled-components or yarn add styled-components
```
### Projede Kullanılacak olan Api
[Github Api](https://docs.github.com/en/rest/users)
Buradan biz followers kısmını alacağız .
[GithubAPiFollowers](https://api.github.com/users/anthonyharold67/followers?per_page=100)
Api nin verdği farklı veriler de var isteyen inceleyip proje oluşturabilir ona göre.
### React Router
Routing Nedir ?
```
Yönlendirme, kullanıcıya farklı sayfalar gösterme kapasitesidir.
Bu, kullanıcının bir URL girerek veya bir öğeye tıklayarak uygulamanın farklı
bölümleri arasında hareket edebileceği anlamına gelir.
```
Neden react router kullanılıyor ?
React hepimizn bildiği gibi single page bir yapı. sayfalar arası gezinebilmek için router yapısını kullanırız.
Single Page Nedir?
```
Single page application yani kısa adıyla SPA, tek HTML sayfası yükleyen bir uygulamadır
ve uygulamanın çalışması için gerekli tüm dosyaları (JavaScript, CSS vb) içerir.
Sayfa veya sonraki sayfalarla olan herhangi bir etkileşim için servera
gidip gelmesi gerektirmez; bu da sayfanın yeniden yüklenmediği anlamına gelir.
Reactte SPA oluşturabilmenize rağmen, bu bir zorunluluk değildir.
React, hali hazırda çalışan bir sitenin küçük bölümlerini geliştirmek için
de kullanılabilir. React’te yazılmış kod, diğer diller ile de kullanılabilir.
Facebook’un sitesi buna en iyi örnektir
```
Yani normal html projelerinde bizim örneğin home.html,about.html,profile.html yapılarımız var.Biz napıyoruz bunları biribirne `` 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.
React ta ise tek bir sayfa içinde sayfa olarak oluşturduğumuz componentler arasında geziniyoruz
### React Router a özgü kavramlar
**BrowserRouter**: Tanımlanan Yerlere Sayfaların Render Edileceğini Bildiren component. En dış sarmalayıcıdır.
**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.
**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:
```
Bir , yalnızca öğesinin alt öğesi olarak kullanılır, hiçbir zaman doğrudan işlenmez. Lütfen 'unuzu bir ile sarın.
```
**NavLink:** Geçerli URL ile eşleştiğinde, render edilmiş elemente css ekleyecek bir `` sürümüdür. Css te a tagi olarak verebiliyoruz.*`Navlink` kullanmak için `react-router-dom`dan import etmemiz gerekiyor*
Kısaca Link,NavLink ve a href farkında bahsedelim
```
Single page application uygulamarında temel mantık aynı sayfada sayfa yenilenmeden istenilen komponentin sayfaya çağırılmasıdır.
Burada bazı react projelerinde dikkat çeken bir nokta projenin navigasyonunda gezerken sayfanın her linke
tıklandığında sayfanın kendini yenilemesi (refresh) dir.
Bunun nedeni ise linke tıklandığında çağırılan komponentin
şeklinde çağırılmış olmasıdır.
Eğer a etiketi yerine react-dom elementi olan Link etiketi kullanılırsa
sayfa yenileme problemi ortadan kalkacaktır.
Bu kullanım sadece React özelinde değil diğer SPA uygulamarı içinde geçerlidir.
```