Yeni başlayan aptallar için React.JS, ticaret robotları yazarken kitaplığı kullanma

Acemi mankenler için React JS nedir, nedir, öğreticiler, kurulum, belgeler – ticaret robotları yazarken React JS kitaplığı nasıl kurulur ve kullanılır. Genellikle bilgisayar uzmanlarına yönelik iş ilanlarında, JavaScript kitaplığında becerilere sahip olduğunuzu söyleyen bir gereklilik bulabilirsiniz. Evet ve yalnızca yazılım geliştiricilerinden değil, aynı zamanda sitenin dahili geliştirmesiyle uğraşan programcılardan da harici tasarımla uğraşan programcılardan React bilgisi bekliyorlar. Bu ne tür bir kütüphane, işte ne gibi fırsatlar sunuyor ve yeni başlayanlar nerede tanışmaya başlıyor? Bu yazıda bunu çözelim.

JavaScript kitaplığı – Tepki: nedir

React.JS, sitelerin ve uygulamaların dış kabuğunu – kullanıcının etkileşimde bulunduğu arayüz – geliştirme sürecini iyileştirmek ve basitleştirmek için çevrimiçi sosyal ağ Facebook tarafından oluşturulan popüler
JavaScript programlama dilinin bir kütüphanesidir. Kütüphanenin ana özelliği bileşenler ve durumlardır. Bir bileşen, tasarlanan sistemin belirli bir bölümünün görünümünden sorumlu olan bir dijital kümenin bir parçasıdır.

Not! Bu tür bileşen parçaları iç içe yerleştirilebilir.

Durum, temsili oluşturma da dahil olmak üzere bir arabirimin ayrıntıları hakkındaki tüm verilerin bir koleksiyonudur. Örnekleri kullanarak, neyin ne olduğunu daha ayrıntılı ve net bir şekilde öğreneceğiz. Aşağıdaki resim bazı büyük bileşenleri göstermektedir – çevrimiçi bir sosyal ağda paylaşım, genel bilgiler içeren ve fotoğrafları gösteren bir bölüm. Her parça, bileşenler olan daha küçük bileşenleri içerir. Örneğin bir yayın, metin, fotoğraflar, bilgileri yayınlayan kullanıcının adı vb. içerir. Resim bölümü tek tek resimleri, genel bilgiler bölümü ise kısa bilgileri içerir.
Bu bileşenlerin (bileşenlerin) her birinin bir durumu vardır. Yani, genel bilgilerin olduğu bölüm farklı cihazlarda farklı görünecek, “beğen” öğesine basıldığında renk değiştirecek ve toplam beğeni sayısından sorumlu sayı; yayın ise metni kısaltabilir veya tamamını iletebilir.

Böylece, React.JS’nin esnekliği ifade edilir – arayüz bileşeni bir kez yazılır ve bundan sonra tüm olası durumlar verilir.

React kitaplığına neden ihtiyaç duyulur?

React.JS, JS veya HTML kodunu uygun bir formatta yazmak, kopyalarını oluşturmak ve görsel hale getirmek için olası seçeneklerden biridir. Buradaki bileşenler özel bir sistem dilinde yazılmıştır – JavaScript programlama dilinin öğelerini ve standartlaştırılmış HTML biçimlendirme dilini içeren JSX.
JSX’te yazılan kod oldukça spesifiktir. Web tarayıcısının bu sistem dilini anlaması gerekmemesi de önemlidir – React.JS kodu, herhangi bir tarayıcının sorunsuz algıladığı JS’ye aktarılır. Bunu yapmak için, kütüphanede oluşturulanlar, daha az bilinen programlama dillerindeki kodları JavaScript temsillerine dönüştüren özel derleyicilerden (bugün daha popüler olanlardan biri Babel js’dir) geçirilir.
İlk başta kullanım sistemi son derece mantıksız görünebilir ancak bir süre sonra alışırsınız ve mekanizmanın neden böyle tasarlandığını anlıyorsunuz. JavaScript kitaplığının bir dizi güçlü avantajı vardır:

• sistem programlama dilini tanımak, bilinen JavaScript’ten daha kolaydır ve sonuç olarak, kodu desteklemek ve üzerindeki hataları ortadan kaldırmak birkaç kat daha az zaman alacaktır (yeni kod ve program yazma hızı buna göre artacaktır);
• kullanışlı ve pratik bir kurucu öğeler sistemi burada inşa edilmiştir – kodun çeşitli yazma aşamalarında ve farklı programlarda kullanılan ve ayrıca bağlama bağlı olarak değişen tekrarlayan bölümleri;
• her kurucu öğe yalnızca kendi durumuna tabidir , bu nedenle pratikte çalışmasında aniden bir hata bulunursa, koddaki eksiklikleri düzeltmek daha kolaydır; yanlış anlar yüzeye çıkar: düzgün çalışan bir eleman, elbette onunla ilgili olarak yanlış durum kullanılmadığı sürece, bu modda kararlı bir şekilde çalışmaya devam edecektir.

Böylece, React.JS kitaplığının zamandan önemli ölçüde tasarruf etmenize, kodu daha spesifik hale getirmenize, diziyi doğru sırada düzenlemenize ve tekrar büyük bloklar kullanmanıza olanak tanıdığı sonucuna varabiliriz. Bu avantajlar, kullanıcı arayüzleri oluşturma sürecinin maliyetini azaltmanın yanı sıra bu sürecin süresini hızlandırmayı mümkün kılar. JS ve HTML programlama dilini kullanma becerisine sahip olmak, JSX sistemini kullanmayı öğrenmek kolaydır – sadece birkaç gün içinde uzmanlaşmak.

Not! Büyük projelerle çalışırken, çok sayıda dinamik sayfa yazmak gerektiğinde kütüphaneyi kullanmak mantıklıdır. Küçük bir işletme sitesi bu tür karmaşıklıklara ihtiyaç duymaz.

A’dan Z’ye React JS temel kursu: https://youtu.be/GNrdg3PzpJQ

Yeni başlayanlar için tanıdık: temel kavramlar

Selam Dünya!

Kütüphanenin ilk sayfasına erişirken, kullanıcı küçük bir örnek olarak “Merhaba dünya!” şeklinde bir hoş geldiniz başlığı görecektir.

JSX sistem dilinin temelleri

JSX, iyi bilinen JavaScript’in bir uzantısı olan bir sistem programlama dilidir. İki dilin bir kombinasyonunu içerir – JA programlama ve standartlaştırılmış HTML biçimlendirme dili. Geliştiriciler, React’e kullanıcı arayüzünün tam olarak nasıl görünmesi gerektiğini göstermek için konsepti ayarlamak için kullanır. JSX, kitaplığın “parçalarını” oluşturur.

JSX nedir?

React kitaplığı, oluşturmanın özünün doğrudan kullanıcı arayüzünün mantığıyla ilgili olduğu mantığına bağlıdır: olayların nasıl işlendiği, belirli bir süre içinde durum nasıl değiştiği ve bilgilerin sunum için nasıl hazırlandığı. JS kitaplığı sistem dili olmadan kullanılabilir, ancak çok sayıda geliştirici, JavaScript kodundan oluşturulan bir kullanıcı arabirimi ile çalışırken netliği ve somutluğu nedeniyle onu değerli bulmaktadır. Ek olarak, uzantı, React’in geçersiz an ve hata bildirimleri oluşturmasını kolaylaştırır.

Sistem dilinde ifadelerin oluşumu

JSX, bir işlemde küme parantezleri içinde iyi yazılmış herhangi bir JavaScript ifadesini kullanmanıza olanak tanır.

JSX de bir ifadedir Kaynak kodu bayt olarak kodlandığında, herhangi bir JSX ifadesi JavaScript kategorisini hedefleyen standart bir JS işlev çağrısına dönüşür. Buradan resmi programlama dilinin sistem uzantısının if kılavuzu içinde ve dönemler için kullanılabileceği anlaşılmaktadır.

JSX, Nesnelerdir Uzantı tarafından temsil edilen nesnelere React öğeleri denir. Geliştiricinin ekranda görmek istediği sonucu netleştirir. Kitaplık bu nesneleri tanır ve bunları Belge Nesne Modeli oluşturma ve sürdürme sürecinde kullanır.

Ayrıntı oluşturma

Ayrıntılar, React programlarını oluşturan birçok küçük yapı taşıdır.
Ayrıntılar, geliştiricinin monitörde sonunda görmek istediği resimdir. Belge Nesne Modeli öğeleriyle karşılaştırıldığında, kitaplık öğeleri basittir ve çok fazla kaynak almaz. Elementler, bileşenlerin bileşenleridir.

Bileşenler ve Aksesuarlar

Bileşenler, kullanıcı arayüzünü ayrı ayrı üzerinde çalışmak daha kolay olan bağımsız parçalara bölmeyi mümkün kılar. Birleştirilebilir ve birden çok kez kullanılabilirler. Bileşenlerin işlevselliği çoğunlukla JavaScript programlama dilinin işlevselliğine benzer. Props adı verilen girdi bilgilerini alırlar ve geliştiricinin monitörde görmek istediği geliştirme modelini gösteren React öğelerini döndürürler.

Bileşen çeşitleri: işlevsel ve sınıf

Bir kitaplık bileşenine işlev olarak başvurmak en kolay yoldur.
Bileşenler ayrıca ES6 sınıf biçiminde de gösterilebilir.

İlginç! React kitaplığı bu iki tür bileşeni benzer şekilde tanımlar.

sahne

Proplar, salt okunur olan değişmez nesnelerdir. Bu nedenle, bir bileşen, hangi türe ait olursa olsun, aksesuarlarına hiçbir şey yazmamalıdır.

Durum ve yaşam döngüsü

İlk olarak, durumu işyerinde nasıl düzgün bir şekilde uygulayacağımızı bulalım. Bileşen durumu hakkında bilinmesi gereken üç önemli şey vardır:

1. Durumu doğrudan değiştirmeyin, setState yöntemini kullanın. Durumu doğrudan değiştirebileceğiniz tek alanın yapıcı olduğunu unutmayın.
2. Durum güncellemeleri senkronize olmayabilir.
3. Bilgi akışının tek yönü vardır. Bileşen yapımında, hiçbiri durumun başka bir bileşene atanıp atanmadığını bilmiyor. Bir işlevsel veya sınıflandırma aracı kullanarak, şu veya bu bağımsız işlevsel öğenin nasıl oluşturulduğu önemli değildir. Buna “aşağı akış” veri akışı denir. Bir durum her zaman bazı öğeler için tanımlanır ve bu durumun yapısal çağrışımları yalnızca hiyerarşik düzende “alt” konumdaki parçaları etkileyebilir.

Tipik olarak, durum “yerel”, “dahili” veya gizli olarak adlandırılır. Yalnızca işlevsel öğenin kendisi tarafından görülebilir ve React’in diğer bölümleri tarafından görülmez. Kütüphane programlarında, bağımsız bir işlevsel öğenin belirli bir duruma sahip olup olmadığı, o parçanın zamanla değişebilen içsel bir gelişimidir. Çalışmada bileşenleri durumlu ve devletsiz olarak birleştirebilmeniz de ilginçtir.

Olay analizi

Olayları React bileşenlerinde ayrıştırma süreci, belge nesne modeli öğelerindeki olayları işlemeye benzer. Ancak, onları birbirinden ayıran birkaç özellik vardır:

1. JavaScript kitaplığındaki olaylar, standart olandan farklı bir tarzda adlandırılır.
2. Geliştirici, Sistem Genişletilmiş Programlama Dilini kullanarak, bir dize yerine olay işleyicisi olarak bir alt yordamı iletir.

Öğelerin koşullu işlenmesi

JavaScript kitaplığı, geliştirme öğelerinin mantığını bağımsız bileşenlere ayırmayı mümkün kılar. Şu anda hangi duruma sahip olduklarına bağlı olarak, genel görüntüleme için görüntülenebilir veya gizlenebilirler. Öğelerin koşullu sunumu, JavaScript programlama diline dayalı koşullu ifadelerle aynı prensipte çalışır. Bazen kütüphane, durumun bazı öğelerin gizlenmesini veya oluşturulmasını nasıl etkilediğine dair bir açıklama gerektirir. Burada koşullu bir JS yardımcısı veya if’ye benzer ifadeler kullanmak daha mantıklıdır.

Bileşenleri Değiştirme

React kitaplığı elemanları değişkenlere eklenebilir. Bu, bir koşulun bileşenin bir kısmının çizilmesi gerekip gerekmediğini veya parçanın geri kalanı değişmeden kalırken bir anlam ifade etmediğini belirttiğinde pratik bir çözümdür.

Listeler ve Anahtarlar

Bu bölüm birkaç bileşen içerir:

1. Birden çok eleman çizimi . Kullanıcı bir dizi eleman oluşturabilir ve bunu küme parantezleri kullanarak sistem programlama diline gömebilir.
2. Elementlerin temel listesi . Çoğu zaman, kullanıcılar ve geliştiriciler, listeleri doğrudan bir bileşen parçası içinde ayarlar.

Anahtarlar

React JavaScript kitaplığındaki bir anahtar, bir bileşen listesi oluşturulurken girilmesi gereken özel bir aracı belirtir. Anahtarlar, JavaScript kitaplığının hangi öğelerin ayarlandığını, eklendiğini veya kaldırıldığını belirlemesine yardımcı olur. Belirli bir süre geçtikten sonra React’in yapısal verilerin bileşenlerini ilişkilendirebilmesi için bunları işaretlemek önemlidir.

Formlar

JS kitaplığında, standartlaştırılmış biçimlendirme dili öğeleri, belge nesne modelinin bileşenlerinden biraz farklı çalışır çünkü form öğelerinin başlangıçta gizli bir durumu vardır.

Yönetilen Öğeler

Standart bir biçimlendirme dilinde input , select , textarea gibi formlar durumlarını kendi kendine yönetme ve geliştirici yeni bilgiler girdiğinde güncelleme eğilimindedir. React.js durumu, yönetilen bir oluşturma öğesindeki giriş alanlarının değerini her zaman tanımlar. Bu, kullanıcının orijinal verilen koddan biraz daha fazlasını yazması gerektiğini gösterse de, artık bu değeri kullanıcı arayüzünün diğer bölümlerine aktarmak mümkündür.

Devletin yükselişi

Durum kaldırma, her geliştiricinin bilmesi ve çalışma sürecinde uygulayabilmesi gereken standartlaştırılmış bir şablondur. Bunu kullanmak, karmaşık ve genellikle işe yaramaz durum yönetimi modellerini ortadan kaldıracaktır.

Devletin yükselişini kontrol etmek neden bu kadar gerekli?

Devletin, bunu gerektiren kısımlar için geçmişteki bileşenler düzeyine yükseltilmesi, tüm unsurların devlete katılabilmesi için gereklidir. İstikrarlı bir durum düzeyi, onu ona bağlı olan tüm bileşenler arasında dağıtmayı kolaylaştıracaktır.

Kompozisyon ve Kalıtım

React.js güçlü bir kompozisyon modeli içerir, bu nedenle öğeler arasında önceden yazılmış kodu yeniden kullanmak için kalıtım yerine parçalardan bir bütün oluşturma sürecini kullanmanız önerilir. Böylece, aksesuarlar ve bileşen parçalarından tek bir bütün kompozisyon oluşturma yeteneği, geliştiriciye, kabuğu ve elemanın davranışını belirli ve güvenli bir şekilde oluşturmak için gereken esnekliği sağlar.

Hatırlatma! Bileşen parçaları, kitaplıkları veya işlevleri oluşturan temel parçalar da dahil olmak üzere ilgisiz aksesuarlar alabilir.

Bileşenlerle ikinci veya üçüncü kez çalışmak için görünüm gerektirmeyen bir işlev kullanmanız gerekirse, onu ayrı bir JS modülüne çekin. Bir bileşene taşıyın ve oluşturulan işlevi daha fazla genişletmeden kullanın. React veya Vue veya Angular, ne seçilir: https://youtu.be/Nm8GpLCAgwk

React.js İlkeleri

JavaScript kitaplığının tüm felsefesi React kılavuzunda gizlidir. Görünüşe göre bu uzun ve çok önemli değil, ancak birçok kullanıcı okuduktan sonra her şeyin yerine oturduğunu iddia ediyor. Belgeler oldukça eski, ancak yine de çok değerli ve alakalı –
https://ru.reactjs.org/docs/thinking-in-react.html . React js öğreticisi https://ru.reactjs.org/tutorial/tutorial.html

React.js kitaplığının işlevselliği

JavaScript kitaplığını kullanarak, kullanıcı tüm dikkatini doğrudan UI geliştirme sürecine ve uygulamanın bileşenlerine verme fırsatı elde eder, en azından yazılı kodun oluşumu ve olası eksiklikleri tarafından dikkati dağılır. Kitaplık, programları daha hızlı geliştirmenize olanak tanır, bileşenleri ve bir bütün olarak tüm projenin sürecini yapılandırmayı ve düzenlemeyi kolaylaştırır. Bu nedenle, React.js, küresel ağdaki iletişimden, kullanıcı arayüzünden, program durumu kontrolünden ve diğer karmaşık sorunları çözme yeteneğinden sorumlu öğeleri içerir. Kütüphane ayrıca aşağıdaki işlevsel özelliklere sahiptir:

1. pratiklik _ React.js, küçültülmüş biçimde mevcuttur. Bu kompakt paketin net bir şekilde yapılandırılması gerekmez. Sitenin tarayıcı sürümünü açmak için gereken süreyi azaltan bir kod bölme özelliği zaten içerir, çünkü bu seçenek bileşenlerin aynı anda oluşturulmasını engeller.
2. Pompalanan ekosistem ve uyumluluk . Kütüphanede, diğer siteler tarafından desteklenen ve kullanıcının herhangi bir amaç için yeni karmaşık programlar geliştirmesine olanak tanıyan çok sayıda araç bulunmaktadır.
3. Tam işlevsellik . JavaScript kitaplığının ana avantajı, platformun tüm yeni sürümlerinin eskilerinin gereksinimlerini karşılamasıdır, böylece hem eski hem de güncellenmiş sürümü kullanabilirsiniz, hepsi desteklenir ve bu günle ilgilidir. Daha önce yayınlanan sürümler, en son güncellemelerden sonra eski hale gelmez.

Pratik kullanım

Kütüphanenin ana sayfasında, kullanıcılar için talimatlarda, React’i pratikte kullanmanın birkaç açıklayıcı örneği vardır. Bunları manuel olarak düzeltebilir ve çalıştırmayı deneyebilirsiniz. Yeni bir kullanıcı olsanız ve kütüphanenin özünü ve mantığını anlamasanız bile kodu kendinize göre ayarlayın ve sonucu görün.

JavaScript’te ticaret robotları yazarken React’in pratik uygulaması

Bir geliştiricinin JS’yi programlamadığını, ancak komut dosyaları (komut dosyaları) yazdığını anlamak önemlidir. bu nedenle, bir geliştirici kitaplığı kullanarak, ticaret amacıyla kullanılan bir sonraki ticaret robotu için kod yazabilir ve ayrıca görünümünü bu platforma dayalı olarak tasarlamaya devam edebilir. Aslında, ticaret için bir ticaret robotu da React.js kullanılarak çok sayıda geliştirilmekte olan bir uygulamadır. Bununla birlikte, bazı işlevlerin ve botun iç kısmının, buna uygun araçlar sağlayan diğer sitelerde yapılması gerekecektir.

GitHub ve React.js

GitHub , projelerin tüm versiyonlarını barındıran bir platformdur. Kullanıcı barındırma bağlantısını kurar, resmi GitHub web sitesindeki kayıt prosedüründen geçer ve ardından tüm dosyaları Git’ten aktardığı bir çevrimiçi depo oluşturur.
Git , günümüzde en popüler ve ilgili proje sürüm kontrol hizmetidir ve GitHub bir uzak kod deposudur.

Referans! Yalnızca uygun bağlantıyı izinle almış olan kullanıcılar, dosyaları düzenleme ve indirme erişimine sahiptir.

belgeler

JavaScript kitaplığı ile ilgili tüm eğitimler ve güncel materyaller en son güncelleme ile günceldir. Geliştiriciler ayrıca, kitaplığın ayrı bir sayfasında yayınlanan belgelerin eski sürümlerini genel okuma için derler ve yayınlar. Bu nedenle, yeni başlayanlar için site yönetimi becerilerine hakim olmak daha kolay olacaktır: hem eski hem de yeni malzeme – her şey burada, erişim herkes için ücretsiz.

Not! Kılavuzları okumayı unutmayın. En azından bir göz atın – zaten anlaşılmaz görünenlerin çoğu yerine düşecek.

React kütüphanesi günümüzde popüler ve alakalı bir platformdur. Çok yönlülüğü, geliştiricilerin daha kaliteli ve daha kısa sürede projeler yapmasına olanak tanır. Ayrıca platformu bilmek ve kullanma becerisine sahip olmak, bir uzmanın işgücü piyasasında daha fazla talep görmesini sağlar.