Mala Anlatır Gibi React — 6: NPM ve Axios paketi

Npm, nodejs’de bir paket yöneticisidir. Normalde bir react projesi oluşturmak için npx kullanılabilir (cra) ama vite ile kurulum yapacaksanız eğer npm kullanırsınız. Npx de aynıdır. Burada bunların farklılıklarına girmeyeceğim.

Nodejs’i kurduğunuza göre, npm’de kurulur.

Bir react projesi oluşturduğunuzda ana dosya da npm i komutuyla beraber paketleri kurarsınız.

Ama biz burada proje içerisine paket kuracağız.

Bu paket linke istek atmamıza yardımcı olacak.

paketi yüklemek için terminale gelip npm i axios demeniz yeterli.

Paket kurulduktan sonra package.json’da adını göreceksiniz.

axios paketini yükledikten sonra kullanımı için şöyle bir örneklendirme vereceğim. Örnek olarak bir api’miz olsun. O Api’den listeleri çekeceğiz.

Önce paketi tabiî ki proje de tanımlamamız gerekiyor.

// module
import axios from 'axios'

//commonjs
const axios = require('axios')

GET isteği.

axios.get("URL")

// meselâ bir örnek olarak kullanıcaları alalım

axios.get("https://jsonplaceholder.typicode.com/users")

GET isteği.

axios.get("URL")

// meselâ bir örnek olarak kullanıcaları alalım

axios.get("https://jsonplaceholder.typicode.com/users")

Bir örnek yapalım:

axios.get("https://jsonplaceholder.typicode.com/users")
.then((res)=> {
  console.log("Kullanıcılar: ", res.data)
})
.catch((err)=> console.log("Hata", err.message))

Peki bunları react’de nasıl kullanacağım?

const [users, setUsers] = useState([])

.then(()=>{}) içine, 
setUsers(res.data) ile birlikte bu verileri 
tutuyoruz sonra ekrana bastırmak için

{users.map((user, i)=><li>
  Kullanıcı Adı: {user.username} ve Yaşı: {user.age}
</li>)}

Bazı ayarlar:

axios.get(url, {})

// bir örnek
axios.get(url, {
   headers: {
       "Authorization": `TOKENİNİZ`
   }
)

Diğer farklı methodlar var, POST, PUT, PATCH, DELETE fakat bunlar neden lâzım?

Çünkü api kullanacağımız zaman, bu paket lâzım olacak ve bu methodları bilmeniz gerekli. İleri ki yazılar da backend de yazacağız. Fakat şuan sadece React ile devam ediyoruz.