Turkhackteam.net/org - Turkish Hacking & Security Platform  
Geri git   Turkhackteam.net/org - Turkish Hacking & Security Platform >
Programlama
> Javascript



React.js Giriş - I

Javascript

Yeni Konu aç Cevapla
 
Seçenekler
Alt bir Hafta önce   #1
  • AR-GE Tim (Bug.Res.)
  • Üye Bilgileri
Üyelik tarihi
07/2017
Nereden
$ebp
Mesajlar
Konular


  
React.js Giriş - I




Merhaba arkadaşlar, bu seride sizlere birazcık React.js ve Redux'dan bahsetmek istiyorum.
Çoğunuzun duyduğunu varsayaraktan, react nedir diye uzatmayacağım ama kısaca bahsetmem
gerekirse; React, bir ecmascript(java scriptin havalı ismi) kütüphanesidir. Kullanıcılarına
daha güzel ve one way connection esasında ön yüz geliştirme olanağı sunar.
React aslında state based bir kütüphanedir. Yani, her verinin bir durumu vardır.
Bu state olayının analojisini, içecek otomatı gibi düşünebilrsiniz aslında. Otomatın başlangıç durumu para beklemesi, para atıldıktan sornaki durum içeceğin seçilmesi, içeceği verdikten sonra tekrar en baştaki durumu olan para beklemeye geri dönmesi gibi.

Redux'a daha sonralarda detaylı değinecek olsam bile, kısaca bahsetmem gerekirse; redux bize
yukarıda bahsi geçen durumlara global bir şekilde ulaşabilmemizi sağlar. Tüm componentleri birbirine bağlayarak durum aktarmaktansa, redux'ın bize sağladığı store* içerisinden bu durumları çekmek daha basit ve kullanışlı. Redux için bilinmesi gereken belli bir terminoloji mevcut. Action generators, dispatchers, store bunlardan bazıları.

Uyarı: Hali hazırda bilgisayarınızda nodejs ve "YARN" olduğunu varsayarak devam edeceğim
Yarn yerine npm de kullanabilirsiniz lakin ben yarn tercih edeceğim. Ben bilgisayarıma kurmam
uğraşamam diyenler için, https://reactjs.org/docs/try-react.html üzerinden codepen
yada sandbox'ı kullanabilirsiniz.


Bu kadar bilgilendirmeden sonra, en baştan başlayalım. Bu kısım bilgisayara kurulum yapacak kişiler için geçerli olacak.
I-a )
Kod:
$ npm i -g create-react-app
$ create-react-app projeIsmi
I-b ) create-react-app bize gerekli kurulum işlemini yapacaktır. webpack kurulumu da buna dahil.

II ) Tamamdır, bu noktadan sonra yazacak herkes için anlatıma geçeyim. Proje yaratırldıktan sonra
Kod:
-projeIsmı
|- public
|- src
| App.js
...
Daha komplike bir folder yapısı görmek istiyorsanız:

gibi bir folder yapısı olacak. İçerisine girip şunları yazalım;
Kod:
class App extends React.Component {
  render(){
    return <div className="App"> Hello World! </div>
  }
}

export default App;
ekleyelim.
Kod:
$ yarn start
Komutunu çalıştırdıktan sonra anasayfamızda "Hello World!" yazısını göreceğiz. Şimdi burada açıklamak istediğim ilk kısım, render fonksiyonu. React içerisinde 2 tip component çeşidi mevcut. Birincisi class, yukarıda gösterdiğim, ikincisi ise fonksiyon tipi componentler. Sıra onlara da gelecek lakin, class tipi component yaratırken render fonksiyonunu eklememiz şart. Classın renderlanması, yani browser üzerinde gözükmesi için bu şart.

Kod:
export const App = () => {
  return <div className="App"> Hello World! </div>;
}
Bu kod parçası yukarıda bahsi geçen fonksiyon olarak yazılan component şekli.

Bunların yanında React içerisinde en önemli konseptlerden birisi de "Lifecycle mehods"
Yani sayfanın hayatı ile ilgili olan metodlar.
  • componentWillMount
  • componentDidMount
  • componentWillRecieveProps
gibi. İsimlerden de anlayacağınız üzere, sayfanın durumu ile ilgili değişimlerde ki davranışlarını belirlemek için kullandığımız built-in fonksiyonlar bunlar.
Örneğin, sayfa yüklenmeden önce arkada bir şeylerin hallolmasını istiyorsak, 3. methodu kullanıyoruz. Bu method çağırıldığında sayfa daha yüklenme esnasında oluyor, şu loading ekranı gibi düşünebilrsiniz. Daha detaylı bilgi için -> https://reactjs.org/docs/react-component.html

Konunun devamında redux ve kullanımı hakkında bilgilendirme yapmayı planlıyorum. Tabi ki, react içerisinde router gibi çok sık kullanılan kütüphanelerde mevcut. "react-router", "react-router-dom" gibi.
Belki içimden gelirse, sıfırdan alıp basit bir uygulama yapmayı da anlatabilirim reactjs ile. Şuan frontend denildiğinde en popüler kütüphane react olduğu için, bilinmesinde fayda olacağı kanısındayım.


    


___________________________________________


"Emacs > Vim"
(•_•)
( •_•)>⌐■-■
(⌐■_■)

Konu kondanta tarafından (bir Hafta önce Saat 23:17 ) değiştirilmiştir..
 Offline  
 
Alıntı ile Cevapla
Alt bir Hafta önce   #2
  • AR-GE Tim Lideri
  • Üye Bilgileri
Üyelik tarihi
10/2015
Nereden
ntdll
Mesajlar
Konular


  


Elinize sağlık
    


___________________________________________

TürkHackTeam | Araştırma - Geliştirme Timi



 Online  
 
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından paylaşılmaktadır.
Bu konular yasalara uygunluk ve telif hakkı konusunda yönetimimiz tarafından kontrol edilse de, gözden kaçabilen içerikler yer alabilmektedir.
Bu tür konuları turkhackteamiletisim [at] gmail.com mail adresimize bildirebilirsiniz, konular hakkında en kısa sürede gerekli işlemler yapılacaktır.
Please Report Abuse, DMCA, Harassment, Scamming, Warez, Crack, Divx, Mp3 or any Illegal Activity to turkhackteamiletisim [at] gmail.com

Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz.
Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.



         

Powered by vBulletin® Copyright ©2000 - 2018

TSK Mehmetçik Vakfı

Türk Polis Teşkilatını Güçlendirme Vakfı



Google+

wau

Search Engine Friendly URLs by vBSEO 3.6.0 ©2011, Crawlability, Inc.