React.js ile Başlarken
React.js bir esnek ve bileşen tabanlı İçin JavaScript kütüphanesi etkileşimli kullanıcı arayüzleri oluşturmak. Öyleydi Facebook tarafından yaratılmış ve açık kaynaklı ve Dropbox, AirBnB, PayPal ve Netflix gibi önde gelen teknoloji şirketleri tarafından kullanılmaktadır. Tepki, geliştiricilerin veri ağırlıklı uygulamalar oluşturun Bu, acısız bir şekilde güncellenebilir. sadece gerekli bileşenleri yeniden oluşturma.
Tepki Katmanını görüntüle MVC yazılım tasarım deseni, ve esas olarak DOM manipülasyonuna odaklanır. Bugünlerde herkes Tepki hakkında konuşuyor, bu yazıda nasıl yapabileceğinize bir göz atıyoruz başlamak.
Tepki Yükle
React’i kurabilirsiniz. npm paket yöneticisi ile veya tarafından gerekli kütüphaneleri elle ekleme HTML sayfanıza Tavsiye edilir Babel ile React kullanarak Bu size sağlar ECMAScript6 sözdizimini ve JSX'i kullanın React kodunuzda.
Eğer istersen el ile tepki verin, resmi dokümanlar bu HTML dosyasını kullan. Sayfayı tıklatarak indirebilirsiniz. Dosya> Sayfayı Farklı Kaydet…
Tarayıcınızdaki menü İhtiyacınız olacak komut dosyaları (React, DOM React, Babel) da indirilecek tepki-example_files /
Klasör. Sonra aşağıdaki komut dosyası etiketlerini ekleyin. HTML belgenizin bir kısmı:
Bunları indirmek yerine, React komut dosyalarını ekleyebilirsiniz CDN'den yanı sıra.
Ayrıca kullanabilirsiniz küçültülmüş sürümler Yukarıdaki JavaScript dosyalarından biri:
Eğer istersen npm ile tepki ver, En iyi yol kullanmaktır. Tepki Uygulaması Oluştur Facebook Incubator tarafından oluşturulan Github repo - bu, React docs'ın önerdiği bir çözüm. React dışında, aynı zamanda Webpack, Babel, Autoprefixer, ESLint ve diğer geliştirici araçlarını içerir. Başlamak için aşağıdaki CLI komutlarını kullanın:
npm install -g oluştur-reaksiyonu-uygulaması oluştur-reaksiyonu-uygulaması my-app cd my-app npm başlangıç
Hazır olduğunuzda yapabilirsiniz yeni React uygulamasına eriş üzerinde localhost: 3000
URL:
Daha fazla okumak istiyorsanız nasıl yüklenir, kontrol et kurulum rehberi dokümanlar.
Tepki ve JSX
Zorunlu olmasa da, JSX sözdizimini kullanın React uygulamalarınızda. JSX'in anlamı JavaScript XML, ve o düzenli JavaScript içine transpiles. JSX’in en büyük avantajı JavaScript dosyalarınıza HTML eklemenizi sağlar, bu nedenle React elemanlarının tanımlanmasını kolaylaştırır.
JSX hakkında bilmeniz gereken en önemli şeyler:
- Etiketler küçük harfle başla (küçük deve kılıfı) renderlenir normal HTML öğeleri olarak.
- Etiketler büyük harfle başla (üst deve kılıfı) renderlenir tepki bileşenleri olarak.
- Herhangi bir kod kaşlı ayraçlar içinde yazılı … yorumlanır değişmez JavaScript olarak.
Hakkında daha fazla bilgi edinmek istiyorsanız JSX'i React ile kullanma dokümanlardaki bu sayfayı inceleyin ve varsayılan JSX belgeleri JSX wiki'ye bakabilirsiniz.
Tepki öğeleri oluşturma
Tepki olan bileşen tabanlı mimari geliştiricilerin yarattığı yeniden kullanılabilir bileşenler farklı problemleri çözmek için. Bir React bileşeni, bir veya birkaç taneden oluşur. Elemanları tepki bunlar React uygulamalarının en küçük birimleri.
Aşağıda görebilirsiniz basit bir React elemanı örneği Bu bir HTML sayfasına bir Beni tıklayın düğmesini ekler. HTML’de bir React elementimizi, Bileşenleri tepki Hangi yeniden kullanılabilir, bağımsız UI birimleri Verileri kolayca güncelleyebileceğiniz Bir bileşen bir veya daha fazla React elemanından yapılabilir. sahne donanımı Hangi keyfi girdiler Bir bileşene veri iletmek için kullanabilirsiniz. Bir React bileşeni, JavaScript işlevlerine benzer şekilde çalışır; bir tür çıktı üretir. Ya kullanabilirsiniz klasik işlev sözdizimi veya yeni ES6 sınıfı sözdizimi için bir React bileşeni tanımlayın. Bu makalede, ikincisini kullanacağım, çünkü Babel ECMAScript 6'yı kullanmamıza izin veriyor. ES6'sız bir bileşen nasıl oluşturularak ilgileniyorsanız, belgelerin Bileşenler ve Aksesuarlar sayfasına bakın.. Aşağıda, görebilirsiniz basit tepki bileşeni örnek olarak yaratacağız. Bir siteye giriş yaptıktan sonra kullanıcının gördüğü temel bir bildirimdir. Olacak üç veri parçası var. davadan davaya değişim: kullanıcının adı, mesaj sayısı ve bildirim sayısı, bunları geçeceğiz sahne olarak. Her React bileşeni bir JavaScript sınıfıdır. uzanır Merhaba this.props.name, this.props.notifications yeni bildirime ve this.props.messages yeni iletilere sahipsin. İlk argümanı JavaScript’ten dolayı Kullanılmış Eşleşen HTML sayfası aşağıdaki gibidir: React belgelerinde, başka pek çok güzel örnek var. React bileşenleri oluşturma ve yönetme, ve sahne hakkında bilmeniz gerekenler. React ile Facebook tanıttı yeni bir tür çerçeve Ön uç geliştirme içine MV * tasarım modelini zorluyor. Nasıl çalıştığını ve onunla neler başarabileceğinizi ve başaramayacağınızı daha iyi anlamak istiyorsanız, size yardımcı olabilecek bazı ilginç makaleler:"MyDiv"
Olacak kimliği React öğesiyle doldurulmuş. İçinde React elementini yaratırız. tag, right before the ending
tag. Note that if you want to use the JSX syntax, you need to add the
type="text/babel"
attribute in order to make Babel perform the compiling.
ReactDOM.render ()
yöntem hangi iki gerekli parametreyi alır, Tepki elemanı () ve onun konteyner (
Document.getElementById ( 'myDiv')
). Hakkında daha fazla okuyabilirsiniz React elemanları nasıl çalışır? içinde “Render Elemanları” dokümanlar bölümü.Bileşen oluştur
React.Component
temel sınıf. Bizim bileşenimiz çağrılacak İstatistikleri
kullanıcıya temel bir istatistik sağlar. Önce biz oluştur İstatistikleri
sınıf ile sınıf İstatistikleri React.Component … genişletir
sentaks, sonra biz ekrana getir arayarak ReactDOM.render ()
yöntem (daha önceki bölümdeki ikincisini zaten kullandık). sınıf İstatistikleri React.Component render () return (genişletir)
ReactDOM.render ()
yöntem oluşur React bileşenimizin adı (
), ve onun sahne (isim
, bildirimleri
, ve mesajları
) değerleri ile. Sahne değerlerini açıkladığımızda, dizgiler tırnak içine alınmış (sevmek "John Doe"
) ve sayısal değerler kıvrımlı parantez içinde (sevmek 3
).sınıf adı
yerine sınıf
Bir sınıf niteliğini bir HTML etiketine geçirmek için (className = "özeti"
).
daha fazla okuma