React Axios1

 Axios en kısa tabiriyle front-end tarafından kendi Api mızdan yada başka bir Restful api dan veri çekmemize yarar.

 Şimdi https://rallycoding.herokuapp.com/api/music_albums adresinden veri çekelim.
 https://jsonplaceholder.typicode.com/ sizde burada çekebilirsiniz. Buradan title, artist ve image propertilerini çekeceğim boostrap ile güzel bir card section yapıp burada göstereceğim.

 React projenizi setup ettiğinizi düşünüyorum. 

 Yeni bir component oluşturur iken class base component oluşturmamız gerekiyor. Çünkü componentDidMounth methodu ile render methodumuzdan önce verilerimizi getireceğiz. Life cycle methodlarıda method base componentlerde kullanılmaz.

npm i axios komutu ile projemin olduğu dizine axios kütüphanesini de dahil ediyorum.

Componentimi şimdilik yazımı bu şekilde. Clasik boostrap card kullandım. Ben projeme boostrap css kullandım. Nasıl Kullanacağı blogun içinde mevcutbakabilirsiniz.

Şimdi bu componentimin çalışmasını kontrol etmek üzere Home componentimden çağıracağım. Yine route konusunu daha önce işlemiştim. Eğer bilmiyor iseniz yine bu blogtan bulabilirsiniz. Eğer router kullanmadıysanız aynı şekilde App.js den de çağırabilirsiniz.


Görüldüğü gibi Componentimiz çalıştı sorunumuz yok. Şimdi sırada axios ile get işlemi yapıcaz. Datalarımızı alacağız
Axios Methodumuzu çağıralım. Axios aracılığı ile asenkron şekilde data alacağım. (Asenkronun burada ki en tatlı anlamı biraz süre içinde gidecek ve yapacak). Biz bu asenkron işlemin ne zaman biteceğini bilemeyiz. Ama biterken bize promise dönmesini isteriz. Promise bize işlemlerin gitmesi gerektiği gibi gittiğini belirler. Promise alabilmek için bizim .then() ile yaparız.
.then() aslında get işlemi tamamlandığında then() içindeki method çalışır. Burayı biraz daha açıklamakta fayda var.
axios.get("https://rallycoding.herokuapp.com/api/music_albums")
 Burası tamamlandığında then() çalışır.
Log umuz ilede cevaplarımızı alıyoruz.Sonuç itibari ile göreceğimiz sayfa.

Görüldüğü üzere data arrayımızın içinde 5 tane obje var. Bu objelerin {title: "Red", artist: "Taylor Swift", url: "https://www.amazon.com/Red-Taylor-Swift/dp/B008XNZMOU", image: "https://images-na.ssl-images-amazon.com/images/I/41j7-7yboXL.jpg", thumbnail_image: "https://i.imgur.com/K3KJ3w4h.jpg"}

Yapmamız gereken posts [] statesi oluşturup için axios.get den gelen dataları set etmek ardındanda bunları dinamik şekilde göstermek.


Kodların son hali


Ekran Görüntüsü

Dinamik şekilde gösterme yaparken dikkat etmem gereken postList ' im  JSX dönen bir array dir. Jsx lerimi return ile dönmem gerekir. İkinci dikkat etmem gereken yer componentlerin return methodu yanlızca bir tane root divi nin içinde elemetler olmalıdır.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Laravel & React 1

Resim
    Bu seride back-end tarafında php Laravel kullanan Front-End tarafın da ise React kullanan bir uygulama geliştireceğiz.   Öncelikle php kullanabilmemiz için yani php kodlarını local bilgisayarımızın derleyebilmesi için php server kurmamız gerekiyor. Bunun için Xamp kullanabiliriz. Xamp Adresi:  https://www.apachefriends.org/tr/download_success.html  JavaScript tarafında bu işlemi Node Js ile yapıyorduk. Burada Xamp İle yapacağız. Xampı kurarken kurduğunuz diskte anadizini seçmeyi unutmayın.  Daha sonra composer yüklememiz gerekiyor. Bu paket yükleyicisi tıpkı bizim JavaScripte kullandığımızı npm(node packed manager) gibi. Composer yüklemek için : https://getcomposer.org/download/ Composer 'ı kurarken kurulum yaptığınız yerin xampın içindeki php olmasına dikkat edin. Composer'i kurduktan sonra artık Command Line 'ımıza Composer komutları yazabileceğiz. Şimdi cmd imizi açalım ve bilgisayarımıza global Laravel 'i yükleyelim. Komutlarım : ...
Devamı

React ile Kişisel Blog Sayfası Oluşturma 1

Yapılacaklar : React kurulum ve Router işlemleri , Materialize.css kütüphanesi ve Header Componentinin tasarlanması. Blog adında bir klasör oluşturun içine Server  klasörü ve : npm create-react-app Client komutlarını yazın.  Server klasörümüzde back - end tarafımız olacak. Client  te ise front-end bölümleri olacak. Component oluşturup bu komponentleri react-router-dom kullanarak app de çağırma işlemi yapacağız. Src nin içine Component klasörü oluşturun. Ve component klasörün içine şimdilik şu 3 tane componentleri oluşturdum.  src/component/Header.js import React , { Component } from 'react' ; class Header extends Component { render (){ return ( < div > Header </ div > ) } } export default Header ; src/component/Landing.js import React , { Component } from 'react' ; class Landing extends Component { render () { return ( < div > AnaSayfa diyelim mi bea </ div > ) } ...
Devamı

Github' a proje atma (Visual Studio Code ile)

Resim
Öncelikle bir github hesanızın olması ve giriş yapmış olmanız gerekmekte. Giriş yaptıktan sonra Sol taraftan New seçilir.  Repository name Hangi isim ile tutulacağıdır. Description ise açıklama alanı create repository Dediğimizde yeni bir repository alanı oluşur. Açılan Açılan bu sayfada ki böülüm hangi yol haritasını izlememiz gerektiğini bize söyler; …or create a new repository on the command line echo "# PersonelBlogWithReactAndExpress" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/abdullahsuhaisk/PersonelBlogWithReactAndExpress.git git push -u origin master commend line kısmına sırası ile şu adımlar izlenir: Benim kullanı git init => projemize .git adında dosya kurar yapılan değişiklikler düzenlenmeleri vs kaydeder. git add . => Canta gibi düşünüyorum ben bunu yapılan değişikliklerimi çantama ekliyorum. git commit -m "Commite isim ver" => Daha...
Devamı