https://github.com/yaserdemet/ghusers-router
https://github.com/yaserdemet/ghusers-router
axios bootstrap reacthooks reactrouter vercel-deployment
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yaserdemet/ghusers-router
- Owner: yaserdemet
- Created: 2022-07-06T15:19:57.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-16T14:55:40.000Z (almost 4 years ago)
- Last Synced: 2025-01-30T14:40:41.978Z (over 1 year ago)
- Topics: axios, bootstrap, reacthooks, reactrouter, vercel-deployment
- Language: JavaScript
- Homepage: https://axios-router-page.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
# Axios-Router Project
### At the end of the project, i will have covered these topics;
🛠 Props and State Logic
🛠 React Hooks ( useState, useEffect, useNavigate, useLocation )
🛠 Global State Management ( Context Api )
🛠 Private Router
🛠 React Router Pages
🛠 3rd Part Libraries ( Axios )
🛠 Crypto apiKeys in .env files
🛠 Deployment with Vercel and Netlify
🛠 Conditional Rendering
🛠 Pagination
### At the end of the project, i will be able to;
✅ improve coding skills within HTML & CSS & JS & ReactJS.
✅ use git commands (push, pull, commit, add etc.) and Github as Version Control System.
### 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/yaserdemet/followers?per_page=100)
### 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.
```