kütüphaneleri JavaScript Görünümleri ve bilgileri görüntüleme biçimlerini manipüle etmekten sorumlu olan, uygulama geliştirmeyi geliştirici için daha kolay ve onları kullanan kullanıcılar için daha keyifli hale getiren daha fazla işlevsellik içerir.
Bu kütüphanelerimiz arasında Tepki, bir kütüphane olan JavaScript için kullanıcı arayüzlerinin oluşturulmasına odaklanan açık kaynak tek sayfalık uygulamalar veya tarafından kullanılan tek sayfalık uygulamalar Facebook ve Instagram Görünümlere atıfta bulunan her şeyi ele almak, kullanıcıya gösterilen verilerin sürekli değiştiği büyük uygulamaların sorununu çözmek.
Tepki özellikleri
Bahsettiğimiz bu sorunu çözmek için Tepki felsefesini aşağıdaki özelliklere dayandırır:
BasitBu özellik, uygulamamızın belirli bir noktada nasıl görünmesi gerektiğini ve bunu ne şekilde yaptığını ve ne yaptığını ifade eder. Tepki uygulamada temel değişiklikler yapıldığında, kullanıcı arayüzündeki tüm güncellemeleri otomatik olarak ele almasıdır.
bildirimselUygulamamızda bilgiler değiştiğinde Tepki sayfamızı yenileme işlevini yerine getirir, ancak yalnızca bilgilerin değiştiği yerde.
Birleştirilebilir bileşenlerin yapımıhakkında konuştuğumuzda Tepki, biz esas olarak yeniden kullanılabilir bileşenlerin yapımından bahsediyoruz, aslında bu kütüphane ile çoğu zaman yaptığımız şey bileşenleri oluşturmak ve kapsüllenmiş olmaları sayesinde kodun yeniden kullanımını, testleri ve işlevlerin ayrılmasını son derece yapıyorlar. basit.
Tepki Alma
Artık neyden oluştuğunu bildiğimize göre Tepki ve özellikleri, kütüphanenin en son sürümünü edineceğiz ve ünlü Hello World'ü göstermek için basit bir uygulama yapacağız.
En son sürümü edinmek için aşağıdaki bağlantıdaki kütüphaneye sahip bir tablet indiriyoruz. İndirdikten sonra, içeriği açıyoruz ve adı verilen bir klasöre yerleştiriyoruz. merhaba_tepki ve içinde adında bir dosya oluşturuyoruz merhaba_react.html aşağıdaki içeriği içerecektir:
Gördüğümüz gibi, dahil edilmesi sayesinde bir metni ana görünümümüzde oluşturmamıza izin veren oldukça basit bir koddur. tepki.js. Ek olarak kullandığımız JSX sözdizimi nedir XML bizim içinde JavaScript ve ardından adı verilen ikinci kütüphanenin uygulanması sayesinde kullanabileceğimiz dönüşümü tarayıcıda yapın. JSXTransformer.jsBuna ek olarak kodumuzu mantığını ayırarak daha okunabilir ve modüler hale getirebiliriz, bunu iki dosya yaparak başarabiliriz, bunun için bir tane oluşturuyoruz. merhaba_react.js ve aşağıdaki kodu koyuyoruz:
React.render (, document.getElementById ('example_react'));sonra bizim HTML yaptığımız şey, .js dosyamızı script etiketinin içine eklemek ve aynı işlemi yapacağız:
Örneğimizi tarayıcıda çalıştırdığımızda yanıtını görelim:
Gördüğümüz gibi, verilerin manipülasyonu oldukça basitti, ancak uygulamanın daha iyi bir yolu var. Tepki, bizim yaptığımız gibi, kod dönüştürücüyü kullanıyor JSX Konsol üzerinden aldığımız mesajda göreceğimiz gibi tarayıcının.
Bu konsol mesajı bize bu küçük uyarının çözümünü veriyor ve .js kodumuzu önceden derlememiz gerekiyor, bunun için paket yöneticisini kullanacağız. Node.js Bu görev için, eğer bu ortamı PC'mizde kurulu değilse, resmi sayfaya gidip Windows'ta çalışıyorsak indiriyoruz ve Linux'ta çalışıyorsak aşağıdaki adımları takip edebiliriz. bu öğretici.
Kodumuzu önceden derlemek
Bu görevi gerçekleştirmek için Node.js konsolumuza gidiyoruz ve yardımı ile npm aracı kurduk Tepki denilen komut konsolu için tepki araçları bunun için sadece bu satırı çalıştırmamız gerekiyor:
npm install -g tepki araçlarıŞimdi yaptığımız şey kodumuzu şu dile çevirmek JavaScript aşağıdaki gibi saf:
jsx -- merhaba_react.js izleBu, yalnızca kodumuzu çevirmekle kalmaz, aynı zamanda dosyayı otomatik olarak oluşturur. merhaba_react.js Uygulamamızda her değişiklik yapıldığında bu komutu çalıştırdığımızda konsoldan gelen yanıtı görelim:
Sonunda modifiye ediyoruz HTML kütüphanenin dahil edilmesinin kaldırılması JSXTransformer.js buna ihtiyacımız olmadığından ve komut dosyamızın dahil edilmesini geleneksel bir şekilde yaptığımızdan, görelim:
Merhaba React!Bahsettiğimiz gibi, konsol üzerinden yaptığımız son işlem, uygulamamızda her değişiklik yaptığımızda dosyayı otomatik olarak oluşturuyor, bu nedenle değişiklik yaptığımızda konsol bize aşağıdaki şekilde bildirimde bulunacaktır:
Gördüğümüz gibi, dosyada değişiklik yapıldığına dair iki bildirimimiz var; bunlar, kütüphaneyi kaldırma ve bir JavaScript dosyasının geleneksel olarak dahil edilmesini sağlama konusunda yaptığımız etkili değişikliklerdi.
İlk adımlarımızı atabileceğimiz bu öğreticiyi bu şekilde bitirdik. Tepki ve uygulamalarımızda uygulanması, bu, görüşlerimizde verilerin görselleştirilmesi için bileşenlerin oluşturulmasında bize yardımcı olur ve bunun sadece basit olmadığını, aynı zamanda bize geliştirmemizi çok daha kolay hale getirecek araçlar sağladığını doğrular.
