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 projeIsmiII ) Tamamdır, bu noktadan sonra yazacak herkes için anlatıma geçeyim. Proje yaratırldıktan sonra
Kod:
-projeIsmı
|- public
|- src
| App.js
...
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;
Kod:
$ yarn start
Kod:
export const App = () => {
return <div className="App"> Hello World! </div>;
}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
Ö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.
Son düzenleme:
