ReactJS Nedir? Öğrenmeli miyim?

Merhabalar. Uzun zamandır vizeler, projeler vs derken burayı çok boşladığımı fark ettim.  Okulda İnternet Programlama dersinde yeniliklere açık bir hocamız sayesinde gördüğüm ReactJS’ten bahsetmek istedim bu yazıda. Ben React’ı oldukça sevdim. Keşke biraz daha erken haşır neşir olsaydım diye bile düşündüm.

ReactJS nedir?

ReactJS temelde, tek sayfa uygulamaları için özel olarak kullanıcı arabirimleri oluşturmak için kullanılan opensource JavaScript kütüphanesidir. Web ve mobil uygulamalar için görüntüleme katmanı işlemek için kullanılır. React ayrıca yeniden kullanılabilir UI componentleri oluşturmamızı sağlar.

React başta Facebook için çalışan bir yazılım mühendisi olan Jordan Walke tarafından oluşturulmuş. Önce Facebook’ta kullanılmaya başlanıyor. Şöyle ilginç bir öyküsü de varmış.

Facebook şirketi React’ı geliştiriyor ve web sitesinde bolca kullanıyor. Sonra Zuckerberg instagramı satın alıyor. O zamanlar Instagram’ ın mobil uygulamaları var ama Web sitesi yok. Zuckerberg bir web sitesi istiyor, bu arada Instagram’da çalışanlar Facebook çalışanları ile kaynaşmış kodları bile inceliyor.

Değişik bir yapı var Facebook’un kodlarında. Bu nedir diye soruyorlar. O zamanlar yapıya henüz React ismi bile verilmemiş. Instagram’dakiler diyor ki, bu yapı güzelmiş, bu sistemi Facebook’ tan bağımsız hale getirin, bizde web sitesini aynı yapı ile yapalım.

Oturuyorlar, sistemi bağımsız hale getiriyorlar, Instagramın tamamını bu sistem ile yazıyorlar. Projeyi de opensource yapıyorlar. Adına da React JS diyorlar.

React, geliştiricilerin sayfayı yeniden yüklemeden verileri değiştirebilecek geniş web uygulamaları oluşturmalarına olanak tanır. React’ ın temel amacı hızlı, ölçeklenebilir ve basit olmaktır. Projeyi oluşturmak biraz zaman alır. Ama oluşturduktan sonra iyi bir performans verir.

Yalnızca uygulamadaki kullanıcı arabirimlerinde çalışır. Bu, MVC şablonundaki görünüme karşılık gelir. MVC’deki AngularJS gibi diğer JavaScript kitaplıkları veya çerçevelerinin birleşimi ile kullanılabilir.

ReactJS’ e giriş yapalım:

JSX


React’ ta, şablonu oluşturmak için düz JavaScript kullanmak yerine, JSX kullanıyor. JSX, HTML’yi alıntılamayı ve alt bileşenleri işlemek için bu HTML etiketi söz dizimini kullanmasını sağlayan basit bir JavaScriptdir. HTML söz dizimi React’ın JavaScript çağrılarına dönüştürülür. Böylelikle saf JavaScript yazabiliriz.

React Native

React Native; IOS ve Android gibi mobil uygulamalara tepki mimarisi sağlayan 2015 yılında Facebook tarafından duyurulan native uygulamalar geliştirilmesini sağlayan bir kütüphanedir.

Virtual DOM

React’ta, her DOM nesnesi için, karşılık gelen bir “sanal DOM nesnesi” var. Sanal bir DOM nesnesi, hafif bir kopya gibi DOM nesnesinin bir gösterimidir.

Sanal bir DOM nesnesi, gerçek bir DOM nesnesiyle aynı özelliklere sahiptir, ancak ekrandaki nesneleri doğrudan değiştirebilecek gerçek şeyin gücünden yoksundur.

DOM’u manipüle etmek zaman alır. Sanal DOM’u manipüle etmek çok daha hızlıdır, çünkü hiçbir şey ekranda çizilmeyecektir. Gerçek bir evdeki odaları hareket ettirmek yerine sanal DOM’u bir plan düzenleme olarak manipüle etmeyi düşünün.

Öğrenmeli miyim?


Şimdi, önümüzde başlıca soru, React’ın neden kullanması gerektiğidir. Angular gibi web uygulaması geliştirme işlemlerini kolaylaştırmak için çok sayıda açık kaynak platform bulunmaktadır. Diğer rekabetçi teknolojilere ve ya framework’lere göre React’ın yararlarına hızlı bir şekilde göz atalım. Web dünyası her geçen gün değiştikçe, yeni bir framework’un öğrenilmesine zaman ayırmak zordur – özellikle de bu framework sonunda bir çıkmaza dönüştüğünde. Yani, yeni bir teknoloji arıyorsanız, ancak frameworklerin arasında kaybolduğunuzu hissediyorsanız, React öğrenmenizi öneririm.

  • Basitlik
    ReactJS hemen kavramak daha kolaydır. Bileşen tabanlı yaklaşım, iyi tanımlanmış bir yaşam döngüsü ve sadece düz JavaScript kullanımı, öğrenmek, profesyonel bir web (ve mobil uygulamalar) oluşturmak ve desteklemek için çok basit hale getirir. React, JavaScript’i HTML ile karıştırmanıza izin veren JSX adlı özel bir sözdizimini kullanır. Bu bir zorunluluk değildir; Geliştirici yine de düz JavaScript yazabilir ancak JSX’in kullanımı çok daha kolaydır.
  • Öğrenmesi Kolay
    HTML ve JavaScript’te temel bilgisi olan herkes  React’ı kolayca anlayabilirler; bu da öğrenmeli miyim sorusunun bir cevabıdır aslında.
  • Native Yaklaşımı
    React, mobil uygulamalar oluşturmak için kullanılabilir (React Native). Ve React, tekrar kullanılabilirliğin hevesli bir hayranıdır, yani kapsamlı kod yeniden kullanılabilirliği desteklenmektedir. Bu yüzden aynı zamanda IOS, Android ve Web uygulaması da yapabiliriz.
  • Tekrar Kullanılabilirlik
    React tek yönlü veri bağlamı kullanır ve Flux adlı bir uygulama mimarisi, bir kontrol noktası vasıtasıyla bileşenlerin akışını kontrol eder . Büyük ReactJS uygulamalarının kendi başına bulunan bileşenlerini ayıklamak daha kolaydır.
  • Performans
    React, bağımlılık için yerleşik bir kapsayıcı kavramını sunmuyor. Bağlamaları otomatik olarak enjekte etmek için Browserify, Require JS, EclaScript 6 modüllerini Babel, ReactJS-di aracılığıyla kullanabilirsiniz.
  • Test Edilebilirlik
    ReactJS uygulamalarının test edilmesi de kolaydır. React görünümleri state’in işlevleri olarak ele alınabilir, bu nedenle ReactJS görünümüne geçtiğimiz State’le işler yapabilir ve tetiklenen eylemlere, olaylara, işlevlere vb bakabilirsiniz.

 

Basit bir proje oluşturalım. Ben Ubuntu üzerinde Atom’da yazıyorum.

Bu komutla yeni bir React projesi başlatmış oluyoruz. Ardından bu proje klasörünün içine girip Atom’u açıyorum.

Projeyi ilk oluşturduğumuzda src’nin içi bu şekilde geliyor. Oluşturmak istediğimiz componentleri buraya oluşturup import ederek kullanabiliyoruz. Bir başka yazıda bir projeyi sıfırdan yazıp anlatmayı düşünüyorum. Bu konuda düşüncelerinizi yorum olarak bırakırsanız sevinirim. Şimdilik görüşmek üzere 🙂

About This Author

Süleyman Demirel Üniversitesi Bilgisayar Mühendisliği öğrencisiyim. Programlama, Web Teknolojileri ve Sosyal Medya ile ilgileniyorum. Bildiğim,öğrendiğim,gezip gördüğüm şeyleri buradan paylaşıyorum.

10 Comments

You can post comments in this post.


  • Açıklayıcı, sade ve detaylandırılmış bu güzel makale için teşekkürler.

    İyi çalışmalar diliyorum, başarılar.

    Onur Uzun 1 sene ago Reply


    • Çok teşekkür ediyorum motive edici yorumunuz için 🙂

      Burcu 1 sene ago Reply


  • Kısa ve sade bir şekilde bilinmesi gerekenler anlatılmış. Yazı için teşekkürler.

    Ali Yasin Eser 1 sene ago Reply


  • […] (Chrome, Firefox, Safari, Edge) ve IE9 +’yı destekler. React’tan bahsettiğim yazıya buradan […]

    React’ın Alternatifi Preact Nedir? | Burcu Altınok Blog 11 ay ago Reply


  • Güzel bir anlatım olmuş teşekkürler. Proje anlatma konusunda bir çalışmanız var mı ?

    Özcan 11 ay ago Reply


    • Ben teşekkür ederim 🙂 Şimdilik yok ama gelen istekler doğrultusunda yapabilirim.

      Burcu 11 ay ago Reply


  • […] ReactJS yazıma da göz atabilirsiniz. […]

    React Native Nedir? | Burcu Altınok Blog 10 ay ago Reply


  • Selamlar. Anlaşılabilir ve sade anlatiminiz için teşekkürler.
    ReactJs, AngularJs ve NodeJs’in amaçları ve kullanım yerleri ile, birlikte kullanilabilirliklerini açıklayan bir değerlendirme yaparsanız başlangıç seviyesi için çok güzel olur… Teşekkürler…

    Hasan 10 ay ago Reply


  • Salak salak basit şeyleri hikayeleştirip anlatmayı bırakın artık sadece makale olsun diye çöplüğe çevirdiniz interneti

    Buse 1 ay ago Reply


    • Sevgili Buse,
      Burada anlatılan hikaye tam olarak nedir gerçekten merak ettim yakalayabilirsen böyle kendini gizleyerek değil de özel olarak yazıp anlatmanı isterim.

      Burcu 1 ay ago Reply


Post A Reply