React, çok yönlü web uygulamaları için kullanıcı arabirimleri oluşturmak üzere kullanabileceğiniz, iyi bilinen bir JavaScript kitaplığıdır. React uyarlanabilir ve daha güçlü ve etkili uygulamalar yapmak için onu diğer teknolojilerle birleştirebilirsiniz.

React'i çeşitli teknolojilerle nasıl entegre edeceğinizi öğrenin ve birden fazla kaynaktan fayda elde edin.

1. Tepki + Düzeltme

Redux, React ile birlikte kullanılan bir durum yönetimi kitaplığıdır. Redux, merkezi uygulama durumu yönetimini kolaylaştırır. Birçok durum içeren karmaşık uygulamalar oluştururken, React ve Redux birlikte iyi çalışır.

İşte Redux'un React ile nasıl kullanılacağına dair bir örnek:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { mağaza oluştur } itibaren"yeniden düzenleme";
içe aktarmak { Sağlayıcı } itibaren"tepki redux";
sabit başlangıçDurumu = { saymak: 0 };
işlevredüktör(durum = başlangıçDurumu, eylem) 





instagram viewer
{
anahtar (Eylem Türü) {
dava'ARTTIRMA':
geri dönmek { saymak: eyalet.sayı + 1 };
dava'AZALMA':
geri dönmek { saymak: eyalet.sayı - 1 };
varsayılan:
geri dönmek durum;
 }
}

sabitiçe aktarmak Tepki itibaren'tepki';
içe aktarmak { sorgu kullan, gql } itibaren"@apollo/müşteri";
sabit GET_USERS = gql`
 sorgu GetUsers {
 kullanıcılar {
 İD
 isim
 }
 }
;
işlevKullanıcılar() {
sabit { yükleme, hata, veri } = useQuery (GET_USERS);
eğer (Yükleniyor) geri dönmek<P>Yükleniyor...P>;
eğer (hata) geri dönmek<P>Hata :(P>;
geri dönmek (
mağaza = createStore (redüktör);
işlevTezgah() {
sabit say = kullanSelector(durum => durum.sayım);
sabit gönderim = useDispatch();
geri dönmek (


Sayı: {sayı}</p>
 sevk etmek({ tip: 'ARTTIRMA' })}>+</button>
 sevk etmek({ tip: 'AZALMA' })}>-</button>
 </div>
 );
}
işlevUygulama() {
geri dönmek (


 </Provider>
 );
}
ihracatvarsayılan Uygulama;

Bu örnek, başlangıç ​​durumu 0 olan bir Redux deposu oluşturur.. Bir redüktör işlevi daha sonra ARTTIRMA Ve AZALTMA operasyonlar. kod kullanır seçiciyi kullan Ve kullanımGönderim devam eden sayımı almak ve etkinlikleri tek tek göndermek için kancalar.

Son olarak, mağazanın tüm uygulama tarafından erişilebilir olmasını sağlamak için sayaç bileşenini sağlayıcı bileşenine sarın.

2. Next.js ile Sunucu Tarafında İşleme

Next.js, web sitesi hızını optimize eden ve SEO HTML'yi istemcilere ileterek ve kullanarak taktikler React bileşenlerinin sunucu tarafında işlenmesi.

Güçlü araç seti, React ile birlikte çalışarak olağanüstü performans ve yüksek arama motoru sıralamaları sağlar.

// sayfalar/index.js
içe aktarmak Tepki itibaren'tepki';
işlevEv() {
geri dönmek (


Merhaba Dünya!/h1>


Bu, sunucu tarafından oluşturulmuş bir React bileşenidir.</p>
 </div>
 );
}
ihracatvarsayılan Ev;

Bu modelde, adı verilen bir React bileşenini karakterize edersiniz. Ev. Next.js, sunucuda oluşturduğunda bu bileşenin içeriğiyle statik bir HTML sayfası oluşturur. Sayfa istemciden bir ziyaret aldığında, HTML'yi istemciye gönderir ve bileşeni nemlendirerek dinamik bir React bileşeni olarak işlev görmesini sağlar.

3. GraphQL ile Veri Alma

GraphQL, API'ler için REST'e yetkin, güçlü ve uyarlanabilir bir alternatif sunan bir sorgulama dilidir. GraphQL ile verileri daha hızlı alabilir ve kullanıcı arayüzünü daha hızlı güncelleyebilirsiniz.

Bu, GraphQL'yi React ile kullanma yolunun bir örneğidir:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { sorgu kullan, gql } itibaren"@apollo/müşteri";
sabit GET_USERS = gql`
 sorgu GetUsers {
 kullanıcılar {
 İD
 isim
 }
 }
;
işlevKullanıcılar() {
sabit { yükleme, hata, veri } = useQuery (GET_USERS);
eğer (Yükleniyor) geri dönmek<P>Yükleniyor...P>;
eğer (hata) geri dönmek<P>Hata :(P>;
geri dönmek (


 {data.users.map(kullanıcı => (
{kullanıcı.adı}/li>
 ))}
 </ul>
 );
}
işlevUygulama() {
geri dönmek (


Kullanıcılar</h1>

 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu model, sorguyu kullan işlevi @apollo/müşteri GraphQL Programlama arabiriminden istemcilerin özetini getirmek için kitaplık. Kullanıcı listesi daha sonra kullanıcı arayüzünde görüntülenir.

4. CSS-in-JS ile Şekillendirme

CSS-in-JS, React bileşenlerini şekillendirmek için JavaScript tabanlı bir yöntemdir. Karmaşık stil sayfalarını yönetmeyi kolaylaştırır ve stilleri modüler ve bileşen tabanlı bir stilde yazmanıza olanak tanır.

İşte React ile CSS-in-JS'nin nasıl kullanılacağına dair bir örnek:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak tarz itibaren'stil bileşenleri';
sabit Düğme = stil düğmesi`
 arka plan rengi: #007bff;
 renk: #fff;
 dolgu malzemesi: 10piksel 20piksel;
 sınır yarıçapı: 5piksel;
 yazı Boyutu: 16piksel;
 imleç: işaretçi;
 &: üzerine gelin {
 arka plan rengi: #0069d9;
 }
;
işlevUygulama() {
geri dönmek (


beni tıkla!/Button>
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu örnek bir oluşturur tarz düğme bileşenini kullanarak tarz işlev. Düğmenin deneyim tonunu, metin tonunu, yastıklamayı, satır taramayı, metin boyutunu ve imleci tanımlar.

Kullanıcı fareyi düğmenin üzerine getirdiğinde arka plan rengini değiştiren bir gezinme durumu da tanımlanır. Düğme nihayet bir React bileşeni kullanılarak oluşturulur.

5. Veri Görselleştirme için D3 ile Entegrasyon

D3, bir veri işleme ve görselleştirme JavaScript kitaplığıdır. React kullanarak güçlü ve etkileşimli veri görselleştirmeleri yapabilirsiniz. D3'ün React ile nasıl kullanılacağına dair bir örnek aşağıdaki gibidir:

içe aktarmak Tepki, { useRef, useEffect } itibaren'tepki';
içe aktarmak * gibi d3 itibaren"d3";
işlevGrafik çubuğu({ veri }) {
sabit ref = useRef();
 useEffect(() => {
sabit svg = d3.select (ref.current);
sabit genişlik = svg.attr('Genişlik');
sabit yükseklik = svg.attr('yükseklik');
sabit x = d3.scaleBand()
 .domain (veri.harita((D) => d.etiket))
 .menzil([0, Genişlik])
 .dolgu malzemesi(0.5);
sabit y = d3.scaleLinear()
 .ihtisas([0, d3.maks (veri, (d) => d.değer)])
 .aralık([yükseklik, 0]);
 svg.selectAll("doğru")
 .data (veri)
 .girmek()
 .ek("doğru")
 .attr('X', (d) => x (d.etiket))
 .attr('y', (d) => y (d.değeri))
 .attr('Genişlik', x.bant genişliği())
 .attr('yükseklik', (d) => yükseklik - y (d.değeri))
 .attr('doldurmak', "#007bff");
 }, [veri]);
geri dönmek (
400}>
 {/* eksenler buraya gelir */}
 </svg>
 );
}
ihracatvarsayılan Grafik çubuğu;

Bu kod bir tanımlar Grafik çubuğu kabul eden bileşen veri önceki kod parçacığında prop. çağırır kullanımRef anahattı çizmek için kullanacak olan SVG bileşenine referans yapmak için kancayı kullanın.

Bundan sonra, grafiğin çubuklarını oluşturur ve ölçekleri tanımlar. useEffect() kancası, verilerin değerlerini ekranın koordinatlarına eşler.

6. WebSockets ile Gerçek Zamanlı İşlevsellik Ekleme

WebSockets'in uygulanması, bir istemci ile sunucu arasında sürekli iletişimi sağlayan tamamen işlevsel iki yönlü bir yol oluşturur. React'in tartışma panoları, canlı güncellemeler ve uyarılar gibi web uygulamalarına sürekli fayda sağlamasına olanak tanırlar.

WebSockets'i React ile şu şekilde kullanırsınız:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak ben itibaren"socket.io-istemci";
işlevSohbet odası() {
sabit [mesajlar, setMessages] = useState([]);
sabit [inputValue, setInputValue] = useState('');
sabit soket = io(' http://localhost: 3001');
 useEffect(() => {
 soket.açık('İleti', (mesaj) => {
 setMessages([...mesajlar, mesaj]);
 });
 }, [mesajlar, yuva]);
sabit işlemeGönder = (e) => {
 e.preventDefault();
 soket.emit('İleti', Girdi değeri);
 GirdiDeğerini ayarla('');
 };
geri dönmek (




 {mesajlar.harita((mesaj, ben) => (
{mesaj}/li>
 ))}
 </ul>


 tür="metin"
 değer={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"göndermek">Gönder</button>
 </form>
 </div>
 );
}
ihracatvarsayılan Sohbet odası;

Bu örnekte, bir Sohbet odası kullanan bileşen socket.io-istemci kitaplığı bir WebSocket sunucusuna bağlanmak için. kullanabilirsiniz kullanımDevlet mesajların özeti ve bilgi değeri ile başa çıkmak için kanca.

Yeni bir mesaj alındığında, useEffect hook, mesaj listesine bir mesaj olay güncellemesini tetiklemek için bir dinleyiciyi kaydeder. Olay mesajı için bir giriş değeri silmek ve göndermek için, bir işlemeGönder işlev.

Ardından, hem giriş alanı ve düğmesi olan form hem de güncellenmiş mesaj listesi ekranda gösterilecektir.

Her form gönderiminde, işlemeGönder işlevi kaçınılmazdır. Mesajı sunucuya iletmek için bu yöntem soketi kullanır.

7. Mobil Geliştirme için React Native ile Entegrasyon

React Local, iOS ve Android aşamaları için taşınabilir uygulamaları teşvik etmek üzere bağlanan React'i kullanarak yerel evrensel uygulamalar oluşturmaya yönelik bir sistemdir.

React Native'in React ile entegrasyonunu kullanarak, React'in bileşen tabanlı tasarımını ve yeniden kullanılabilir kodunu mobil ve web platformlarında kullanabilirsiniz. Bu, mobil uygulama geliştirme döngülerini ve pazara sunma süresini azaltır. React Native, React kitaplığından yararlanan yerel mobil uygulamalar geliştirmek için popüler bir çerçevedir.

Gibi hayati programlama ve kitaplıklarla tanışın Node.js, Yerel CLI'yi Yanıtla, Ve xcode veya Android Stüdyosu, iOS ve Android ile ayrı ayrı uğraşan tasarımcılar için esastır. Son olarak, basit React Native bileşenleri, geliştiricilerin iOS ve Android platformları için sağlam ve zengin özelliklere sahip mobil uygulamalar oluşturmasını sağlar.

React'i Diğer Teknolojilerle Birleştirin

React, çevrimiçi uygulamalar oluşturmak için çok sevilen ve etkili bir kitaplıktır. React, kullanıcı arayüzleri oluşturmak için harika bir seçenektir, ancak yeteneklerini artırmak için diğer teknolojilerle birlikte de kullanılır.

Geliştiriciler, React'i bu teknolojilerle entegre ederek daha iyi bir kullanıcı deneyimi sunan daha karmaşık ve gelişmiş uygulamalar oluşturabilir. React ve onun araç ve kitaplık ekosistemi, temel bir web sitesi veya karmaşık bir web uygulaması oluşturmak için gereken her şeyi kapsar.