React'e Giriş, bölüm 1

Yayınlanan: 2020-07-02

Bu blogda, hem platformun kendisi hem de yeni şeyler öğrenmek zorunda kalan geliştiriciler için WordPress'in yeni geliştirme yığını ve onunla birlikte gelen devrim hakkında zaten konuştuk. Kısa bir süre önce, örneğin, Gutenberg'i genişletmek ve kullanıcı arayüzüne bir düğme eklemek için @wordpress/scripts paketinin nasıl kullanılacağını açıklayan bir gönderi yayınladım. Bir yazar olarak öğreticiler yazmayı seviyorum çünkü iyi bildiğim bir şeyi paylaşabiliyorum ve hep birlikte öğrenebileceğimizi hissediyorum.

Ne yazık ki, öğreticilerin büyük bir sorunu gizlediğini düşünüyorum: Birçoğunuz, sonunda doğru sonucu alsanız bile, neler olduğunu gerçekten anlamadan onları körü körüne takip ediyorsunuz. Ancak çoğu öğretici, her şeyin kafanızda tıkırdadığı ve her şeyin neden böyle olduğunu anladığınız içgörü ve kavrayış anı olan "aha anı"ndan yoksundur.

Bugün biraz ışık tutmak için React'in tanıtımıyla bir dizi yazıya başlamak istiyorum. React'in gizemini çözmek ve bunda hızla daha iyi olmanıza yardımcı olmak istiyorum. React'in neden böyle olduğunu ve her şeyin neden böyle olduğunu anlamanı istiyorum. React'in arkasındaki ilkeleri anlamanızı istiyorum. Daha iyi kod yazmanı istiyorum.

Fonksiyonel Programlama

React hakkında konuşmadan önce, bugün kullandığımız çerçevelerin çoğu ilkelerine dayandığından, işlevsel programlama hakkında konuşmak için birkaç dakika harcamaya değer olduğunu düşünüyorum. Ve React (Redux ile birlikte) bir istisna değildir.

İşlevsel programlama, programların işlevlerin uygulanması ve birleştirilmesiyle oluşturulduğu bir programlama paradigmasıdır. “Programlamanın” her zaman işlevleri oluşturmak ve çalıştırmakla ilgili olduğunu düşünebilirsiniz, değil mi? Tam olarak değil. Benimle ayı.

Örneğin, nesne yönelimli programlamayı düşünün. OOP'de programlar, nitelikler veya alanlar biçiminde veri ve yöntemler veya prosedürler biçiminde kod içerebilen nesneler oluşturularak ve oluşturularak oluşturulur. Görmek? İşlevler değil, nesneler.

Peki işlevsel programlamayı özel yapan nedir? İşlevsel programlamayı karakterize eden birkaç yön vardır: saf işlevler, referans şeffaflığı, değişmezlik, birinci dereceden vatandaşlar olarak işlevler, yüksek dereceli işlevler vb. için, onları ileriki yazılarda konuşabiliriz). Ancak bu gönderiyi kısa tutmak için bugün sadece bir özelliğe odaklanacağız…

Saf Fonksiyonlar

İşlevsel programlamayı diğer programlama paradigmalarından farklı kılan şeylerden biri, işlevleri nasıl tanımladığı ve işlevlerle nasıl çalıştığıdır. FP'de işlevler saftır, yani aşağıdaki iki koşulu karşılarlar:

  1. Aynı argümanlar verildiğinde her zaman aynı sonucu verir.
  2. Hiçbir yan etkisi yoktur

Örneğin, bu saf bir işlev değildir:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

çünkü birkaç yan etkisi var. Yani, global bir değişkeni değiştirir (yan etki 1) ve konsola bir miktar metin verir (yan etki 2).

Başka bir saf olmayan işlev şudur:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

çünkü gördüğünüz gibi her zaman aynı sonucu vermiyor. Belirli bir adla createElement her çağrıldığında, aldıkları sonuç farklıdır. Sonuçta, id niteliği Math.random aracılığıyla oluşturulur…

Saf işlevler birçok nedenden dolayı harikadır: anlaşılması kolaydır ve sürpriz içermezler. Onlara bazı girdiler verirsiniz, size belirli bir çıktı verirler. Ve bu harika, çünkü fonksiyonları bu şekilde tanımlama onları bir fonksiyonun ne olduğuna dair matematiksel anlayışımıza yaklaştırıyor: her girdiyi iyi tanımlanmış bir çıktıyla eşleştiriyor.

React'teki Bileşenler

Saf işlevler ve işlevsel programlamanın ne yapması gerekiyor? Bakalım aralarındaki ilişkiyi çıkarabilecek miyiz…

Belgelerinde okuyabileceğiniz gibi, React, "Bileşenler" adı verilen küçük kod parçaları aracılığıyla kullanıcı arayüzleri oluşturmak için bir JavaScript kitaplığıdır. Bu, eğitimlerinde göreceğiniz ilk bileşendir:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Oldukça basit ve hatta kendi kendini açıklayıcı, değil mi?

Ama bir saniye bekleyin! Bu hiç de "saf bir işlev" gibi görünmüyor. Aslında bu, nesne yönelimli programlama kullanılarak uygulanan bir sınıftır.

Garip bir yüz buruşturma yapan kadın Gif

Evet, kesinlikle haklısın. Bu iyi görünmüyor… İşlevsel programlama hakkında konuşarak zamanımızı boşa mı harcadık?

Önceki bileşene tekrar bir göz atın. Nasıl görünüyor? Bu ne işe yarıyor? Bir alışveriş listesi oluşturmak için bir miktar HTML oluşturan tek bir yönteme ( render ) sahip bir sınıftır. Bu alışveriş listesi her zaman aynıdır (ahh, basit bir örnek), ancak bir değişken kısmı vardır: sınıfın bir dahili özelliği kullanıyor gibi göründüğü başlığı, this.props.name .

Yani, henüz React hakkında hiçbir şey bilmiyorsak ve sadece koda bakıp ne yaptığını çıkarmaya çalışırsak, aşağıdakileri görürüz:

  1. Bileşen bir "ad" alabilir. Bu ismi tam olarak nasıl aldığını bilmiyoruz ama aldığını biliyoruz. Sonuçta, this.props.name oldukça iyi bir ipucu.
  2. render yöntemi, (statik) bir "alışveriş öğeleri" listesi oluşturmak için bir miktar HTML üretir: Instagram , WhatsApp ve Oculus .
  3. Ortaya çıkan HTML %100 statik değildir; bir mülkün değerine göre değişebilen bir “ad” kullanır.

Nereye gittiğimi görüyor musun?

React'te Bileşenler Fonksiyonlar

Az önce saf bir işlevi tanımladık! Bir değer ( name ) alan ve iyi tanımlanmış bir çıktı (HTML) üreten bir bileşenimiz var. Bu, OOP'den uzaklaşıp önceki bileşeni bir işlev olarak uygulayabileceğimiz anlamına mı geliyor?

Ne düşündüğünden şüphe eden bir adamı gösteren GIF

Elbette! Az önce gördüğümüz aşırı karmaşık sınıf, props alan ve HTML döndüren daha basit ve anlaşılması daha kolay bir saf işlev olarak yeniden yazılabilir:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Bu, sahip olduğumuz şeyin aynısı, ancak çok daha basit. Bir programcı olarak uygulayabileceğim en basit şey olduğunu söylemeye bile cüret edebilirim: Bir React bileşeni, bazı sahne donanımlarını alan ve bir HTML çıkışı üreten bir işlevden başka bir şey değildir .

Ve bu kesinlikle öğrenmeniz gereken ilk derstir: React bileşeniniz saf bir işlevdir : props in, HTML out. Bir bileşen, verileri getirmek için eşzamansız işlevleri yürütmemelidir (bunlar yan etkilerdir). Bir bileşen, aldığı özellikleri de değiştiremez (değişmezlik).

Yani, bir kez daha: bir bileşen sadece bazı sahne donanımlarını alır ve HTML çıktısını üretir. Dönem.

Ama bekleyin, eğer bir bileşen bu kadar basitse, onlarla nasıl faydalı bir şey yapabiliriz? Pekala, bizi izlemeye devam edin, çünkü bunu bir sonraki yazıda konuşacağız!

Unsplash'ta Josiah Weiss'in öne çıkan görseli.