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

ile konteyner "MyDiv" Olacak kimliği React öğesiyle doldurulmuş. İçinde React elementini yaratırız.

   React elementimizi, 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
 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 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)  Merhaba this.props.name, this.props.notifications yeni bildirime ve this.props.messages yeni iletilere sahipsin. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 İlk argümanı 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).
 JavaScript’ten dolayı Kullanılmış sınıf adı yerine sınıf Bir sınıf niteliğini bir HTML etiketine geçirmek için (className = "özeti").
 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.
 daha fazla okuma
 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:
 Facebook'un blog yazısı açık neden React'i kurdular?.
 Andrew Ray'in mükemmel blog yazısı Tepki'nin iyisi ve kötüsü hakkında.
 Kodlayıcı açık React ve AngularJS nasıl karşılaştırılır?.
 FreeCodeCamp's olup olmadığını hakkında düşünme parçası MVC ön uçta öldü.
 HackerNoon'un makalesi React ile ilgili performans nasıl optimize edilir.