React ekosistemi, büyüyen bir geliştirme araçları ve kitaplıkları listesine dönüşmüştür. Alet bolluğu, popülerliğinin gerçek bir kanıtıdır. Geliştiriciler için, boyun kıran bir hızla değişen bu labirentte gezinmek baş döndürücü bir egzersiz olabilir. Kursunuzda gezinmenize yardımcı olmak için aşağıda 2020 için temel React araçlarının bir listesi bulunmaktadır.

Çengeller

Hook'lar, 16.8 sürümünden itibaren React'e eklenen yeni bir eklentidir. Sınıfsız bileşenlerde kullanışlı özelliklerin kilidini açarlar. Hook'larla, React artık aşağıdaki gibi yaşam döngüsü yöntemlerine ihtiyaç duymuyor: componentDidMount devleti yönetmek için. Bu, kaygıların ayrılmasını teşvik eder çünkü bileşenler kendi durumlarını yönetmiyor. Sınıf bileşenlerinin içine çok fazla durum yönetimi koymak karmaşıklığı artırıyor. Bu durum bilgili bileşenlerin bakımını zorlaştırır. Hook'lar, anahtar özellikler sağlayarak bu sorunu hafifletmeye çalışır.

Aşağıdaki temel Kancalar mevcuttur:

• useState: yaşam döngüsü yöntemleri olmadan sınıfsız bir bileşendeki durumu değiştirmek için
• useEffect: işleme sonrası işlevleri yürütmek için, Ajax isteklerini ateşlemek için kullanışlıdır
• useContext: bileşen bağlam verilerini değiştirmek için, bileşen sahne dışında bile

Artıları:

• durum yönetimi karmaşıklığını azaltır
• fonksiyonel bileşenleri destekler
• endişelerin ayrılmasını teşvik eder

Eksileri:

• bağlam verisi değiştirme, bilişsel yükü artırabilir

Fonksiyonel Bileşenler

İşlevsel bileşenler, sınıf bileşenleri olmadan JSX işaretlemesi oluşturmanın bildirime dayalı bir yoludur. Yaşam döngüsü yöntemlerinde durumu yönetmedikleri için işlevsel paradigmayı benimserler. Bu, çok fazla mantık olmadan UI işaretlemesine odaklanmayı vurgular. Bileşen desteklere dayandığından, test edilmesi daha kolay hale gelir. Aksesuarlar bir bire-bir işlenmiş çıktıyla ilişki.

React'te işlevsel bir bileşen şöyle görünür:

const SimpleComponent = ({isInit, data}) =>
<> {useEffect(() => {!isInt && loadAjaxData()})} {data}
</>

Artıları:

• yalnızca kullanıcı arayüzüne odaklanır
• test edilebilir bileşen
• Bileşen hakkında düşünürken daha az bilişsel yük

Eksileri:

• yaşam döngüsü yöntemi yok

React Uygulaması Oluşturun

Yeni bir React projesini başlatmak için mükemmel bir araç. Bu, tüm React bağımlılıklarını tek bir npm paketi aracılığıyla yönetir. Artık Babel, webpack ve diğer şeylerle uğraşmak yok. Bağımlılık araç zincirinin tamamı, react-scripts in package.json. Create React App'i herhangi bir sunucu tarafı oluşturma aracı ile entegre etmenin bir yolu var. Araç çıktıları index.html ve içindeki statik varlıklar public Klasör. Bu ortak klasör, statik varlıkların entegrasyona hazır olduğu temas noktasıdır.

Başlamak çok kolay:

npx create-react-app my-killer-app

Ve daha sonra yükseltmek daha da kolay:

npm i react-scripts@latest

Artıları:

• Başlaması kolay
• yükseltmesi kolay
• tek meta bağımlılık

Eksileri:

• sunucu tarafında işleme yoktur, ancak entegrasyona izin verir

Proxy Sunucusu

Versiyondan başlayarak react-scripts@0.2.3 veya üzeri, API isteklerinde proxy yapmak mümkündür. Bu, arka uç API ve yerel Create React App projesinin bir arada var olmasına izin verir. Müşteri tarafından talepte bulunarak /my-killer-api/get-data isteği proxy sunucusu üzerinden yönlendirir. Bu sorunsuz entegrasyon hem yerel geliştirmede hem de derleme sonrasında çalışır. Yerel geliştirici bağlantı noktasında çalışıyorsa localhost:3000, ardından API istekleri proxy sunucusundan geçer. Statik varlıkları dağıttıktan sonra, bu varlıkları barındıran arka uçtan geçer.

Proxy sunucusu ayarlamak için package.json:

"proxy": "http://localhost/my-killer-api-base-url"

Arka uç API göreceli bir yolla barındırılıyorsa, ana sayfayı ayarlayın:

"homepage": "/relative-path"

Artıları:

• arka uç API ile sorunsuz entegrasyon
• CORS sorunlarını ortadan kaldırır
• kolay kurulum

ile

• birden çok API içeren bir sunucu tarafı proxy katmanına ihtiyaç duyabilir

PropTipleri

React bileşeni için amaçlanan türü bildirir ve amacını belgeler. Bu, türler eşleşmezse yerel geliştirmede bir uyarı gösterir. Aşağıdakiler gibi tüm JavaScript temellerini destekler bool, number, ve string. Hangi aksesuarların gerekli olduğunu belgeleyebilir isRequired.

Örneğin:

import PropTypes; MyComponent.propTypes = { boolProperty: PropTypes.bool, numberProperty: PropTypes.number, requiredProperty: PropTypes.string.isRequired
};

Artıları:

• belgeler bileşeninin amacı
• yerel geliştirmede uyarıları gösterir
• tüm JavaScript temellerini destekler

Eksileri:

• derleme türü denetimi yok

daktilo ile yazılmış yazı

Derleme türü denetimi ile React projeleri için ölçeklenen JavaScript. Bu, tür bildirimleriyle tüm React kitaplıklarını ve araçlarını destekler. JavaScript'in bir üst kümesidir, bu nedenle tür denetleyiciyi devre dışı bırakmak mümkündür. Bu, hem amacı belgeler hem de eşleşmediğinde derleme başarısız olur. Create React App projelerinde, içeri aktararak açın --template typescript. TypeScript desteği sürümden itibaren mevcuttur react-script@2.1.0.

Bir pervane türü bildirmek için:

interface MyComponentProps { boolProp?: boolean; // optional numberProp?: number; // optional requiredProp: string;
}

Artıları:

• derleme türü denetimi
• Create React App dahil tüm React araçlarını ve kitaplıklarını destekler
• JavaScript becerilerinizi geliştirmenin güzel yolu

Eksileri:

• bir öğrenme eğrisi vardır, ancak devre dışı bırakılabilir

Redux

JavaScript uygulamaları için tahmin edilebilir durum yönetimi kapsayıcısı. Bu araç, durum verilerini yöneten bir mağazayla birlikte gelir. Durum mutasyonu yalnızca bir gönderim mesajı ile mümkündür. Mesaj nesnesi, redüktöre hangi mutasyonun ateşleneceğini bildiren bir tür içerir. Öneri, uygulamadaki her şeyi tek bir mağazada tutmaktır. Redux, tek bir mağazada birden çok azaltıcıyı destekler. Redüktörlerin giriş parametreleri ve çıkış durumu arasında bire bir ilişkisi vardır. Bu, redüktörleri saf işlevler haline getirir.

Durumu değiştiren tipik bir indirgeyici şuna benzeyebilir:

const simpleReducer = (state = {}, action) => { switch (action.type) { case 'SIMPLE_UPDATE_DATA': return {...state, data: action.payload}; default: return state; }
};

Artıları:

• tahmin edilebilir durum yönetimi
• tek bir mağazada birden fazla redüktör
• redüktörler saf fonksiyonlardır

Eksileri:

• sıfırdan kurmak biraz acı verici olabilir

React-Redux

Redux için resmi React bağları, iki ana modülde gelir: Provider ve connect. Sağlayıcı, bir React bileşenidir. store destek. Bu destek, tek bir mağazanın JSX biçimlendirmesine bağlanma şeklidir. Bağlan işlevi iki parametre alır: mapStateToProps, ve mapDispatchToProps. Bu, Redux'un durum yönetiminin bileşen donanımlarına bağlandığı yerdir. Durum değiştikçe veya yangın çıkardıkça, bağlar React'teki durumu ayarlamaya dikkat eder.

Bir bağlantı şöyle görünebilir:

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; const mapStateToProps = (state) => state.simple;
const mapDispatchToProps = (dispatch) => bindActionCreators({() => ({type: 'SIMPLE_UPDATE_DATA'})}, dispatch); connect(mapStateToProps, mapDispatchToProps)(SimpleComponent);

Artıları:

• Redux için resmi React bağlamaları
• JSX işaretlemesiyle bağlanır
• bileşenleri tek bir mağazaya bağlar

Eksileri:

• öğrenme eğrisi biraz dik

Redux-Thunk

Redux için eşzamansız API çağrıları yapmak için Thunk ara yazılım. Eşzamansızlığın kilidini açmak için bir thunk arkasında yürütmeyi erteliyor. Thunk, değerlendirmeyi erteleyen bir işlevdir. Örneğin, () => 1 + 1, çünkü anında infaz edilmiyor. Bu, mağaza durumuna erişim ve sevkiyat gibi nezaketlerle birlikte gelir. Thunk'ta isteğe bağlı parametreler de desteklenir.

Örneğin:

const loadData = () => async (dispatch, getState, optionalAsyncTool) => { const state = getState(); const response = await optionalAsyncTool.get('/url/' + state.data); dispatch({type: 'SIMPLE_LOAD_DATA', payload: response.data});
};

Artıları:

• eşzamansızlık için mükemmel araç
• devlete erişim ve sevk
• isteğe bağlı parametre ile yapılandırılabilir

Eksileri:

• ilk başta, kullanışlılık çok net değil

Redux Kaydedici

Mağazadan geçen tüm gönderileri yakalayan Redux için Logger. Her gönderim, geliştirici konsolunda bir günlük mesajında ​​gösterilir. Önceki ve sonraki duruma girmeye izin verir. Sevkiyattaki eylem, yük denetimi için de mevcuttur. Bu kaydedici yerel geliştirmede kullanışlıdır ve derleme sonrası sökülüp atılabilir.

Aşağıdakiler, Redux ara yazılımında olası bir kurulumdur:

import { createStore } from 'redux'; let middleware = []; if (process.env.NODE_ENV === 'development') { // rip out post-build const {logger} = require('redux-logger'); middleware.push(logger);
} export default () => createStore({}, applyMiddleware(...middleware));

Artıları:

• iyi Redux anlayışı
• mağazadaki tüm gönderileri yakalar
• yalnızca yerel geliştiricide çalıştırılabilir

Eksileri:

• istenmeyen mesajları filtrelemek zordur

Lodash

React bileşenleri için kullanışlı modern bir JavaScript yardımcı programı kitaplığı. Tepki formu girişi eşitlenir onChange Her tuş vuruşunda bir ateş. Bileşen, arka uç API'sinden veri alırsa, her tuş vuruşu için istekleri tetikler. Bu, arka uç API'sini spamlar ve birçok kişi UI'yi kullandığında sorunlara neden olur. Lodash, birçok tuş vuruşuyla bir API isteğini tetikleyen, iptal edilmiş olaylarla birlikte gelir.

Kurmak onChange açıklanmış olaylar:

onChange={(e) => debounce(updateDataValue(e.target.value), 250)}

Artıları:

• modüler bağımlılık
• kod bölme ile iyi oynuyor
• kullanımı kolay

Eksileri:

• olayların ne zaman iptal edileceğini bilmek hemen açık değil

Axios

Thunks'ta iyi çalışan vaat tabanlı HTTP istemcisi. Araç, tarayıcıdan Ajax istekleri yapmak için zaman uyumsuz / bekleme sözdizimini destekler. Yoluyla hata olması durumunda hata işlemeyi destekler catch. Aracın API'si GET, DELETE, POST, PUT ve PATCH gibi HTTP isteklerini destekler. Bu aynı zamanda Promise API çağrılarında da iyi oynar: Promise.all() paralel olarak HTTP istekleri göndermek için.

Aksiyolar bir thunk içinden şu şekilde çalışabilir:

const loadData = () => async (dispatch, getState, axios) => { try { const response = await Promise.all([ axios.get('/url'), axios.post('/url', getState()) ]); dispatch(updateData(response[0].data)); return dispatch(updateData(response[1].data)); } catch (reason) { return dispatch(error(reason.message)); }
};

Artıları:

• söz temelli
• eşzamansız / beklemeyi destekler
• hata işlemeyi destekler

Eksileri:

• daha harika olamaz

var

Jest, JavaScript projeleri için basitliğe odaklanan bir test çerçevesidir. İyi haber şu ki, Create React App ile yerleşik olarak geliyor. Babel, TypeScript ve Node kullanan projelerde çalışır. Çoğu React projesinde konfigürasyon yoktur. Testler, kod değişikliklerinin kaydını tutan ve testleri yeniden çalıştıran izleme modunda çalıştırılabilir. API şunları içerir: it, ve expect hızla başlamak için.

Testlerin yürütüldüğünden emin olmak için bir akıl sağlığı kontrolü:

it('says true is true', () => { expect(true).toBe(true);
});

Artıları:

• Create React App ile kolay kurulum
• akıcı API
• saat modunda çalışır

Eksileri:

• React bileşenlerini oluşturmak için çok çıplak kemikler

Enzim

React için bileşenlerin test edilmesini kolaylaştıran bir JavaScript test aracı. API'nin, bileşen geçişi için jQuery kadar sezgisel olması amaçlanmıştır. Enzimi elde etmek için iki pakete ihtiyacı vardır: enzymeve ayrı bir adaptör. Adaptör, React sürümüyle uyumlu olmalıdır. Örneğin, enzyme-adapter-react-16 React için ^16.4.0, enzyme-adapter-react-16.3 için ~16.3.0vb. Adaptörün bir yapılandırma dosyasına ihtiyacı var setupTest.js Jest ile entegre olmak için.

React 16'yı kullanırken, Enzyme'i şu şekilde kurun:

npm i --save-dev enzyme enzyme-adapter-react-16

Artıları:

• React bileşenlerini destekler
• Jest test çerçevesini destekler
• sezgisel API

Eksileri:

• Jest'te adaptör kurmak biraz zahmetli

Sığ Oluşturucu

Bu, deneyleri bir seviye derinlikle sınırlandırmak için yararlıdır. Bir ağaç hiyerarşisindeki alt bileşenlerini etkilemeden üst bileşeni işler. Bu, testi izole eder ve iddiaları daha sağlam hale getirir. Sığ oluşturma, bileşenlerin geçişi için iyi bir Enzim API yığınını destekler. shallow API, yaşam döngüsü yöntemlerini çağırır. componentDidMount ve componentDidUpdate oluşturma sırasında. Hooks ile sığ oluşturucu, useEffect. Bir ipucu yapmak console.log(component.debug()) sığ oluşturucunun gördüklerini incelemek için.

Yüzeysel oluşturucuyu kullanarak bir React bileşenini test etmek için:

const component = shallow(<ParentComponent data={"Dave"} />);
expect(component.find('p').at(0).text()).toBe('Dave');

Artıları:

• izolasyon testi
• tam özellikli API
• hızlı hata ayıklamaya izin verir

Eksileri:

• Bu elması zor durumda bulmak için Enzyme API'sindeki seçenekler denizinde gezinmeniz gerekir

Hikaye kitabı

React bileşenlerinin izole olarak manuel olarak test edilmesi için açık kaynaklı araç. Hikaye kitabı, ulaşılması zor durumlara girmek için bileşenler oluşturmak için bir sanal alan sağlar. Alay etmeye izin verir, böylece bileşenleri yeniden üretilmesi zor olan anahtar durumlarda oluşturabilir. Kurulum, kullanılırken Create React App ile otomatiktir react-scripts. Hikaye Kitabındaki her hikaye, birçok durum içeren tek bir bileşeni hedefleyebilir. Hikaye dosyalarının aşağıdaki gibi bir kuralları vardır: component.stories.js böylece kişi onları hızlıca bulabilir.

Storybook ile başlamak için:

npx -p @storybook/cli sb init

Artıları:

• ulaşılması zor durumları kapsar
• bileşenleri korumalı alanda işler
• Create React App ile entegre olur

Eksileri:

• testleri otomatikleştirmek zor

Reaksiyon Önyükleme

Bu, React için yeniden oluşturulan en popüler ön uç çerçevedir. Her Bootstrap bileşeni, bir React bileşeni olarak sıfırdan oluşturulmuştur. Bu, Bootstrap JavaScript ve jQuery gibi nükleer bağımlılıkların yerini alır. En son beta sürümü Bootstrap 4.3'ü destekler. React Bootstrap, sürüm 4'te zaten bulunan binlerce Bootstrap temasıyla çalışır. Her bileşenin erişilebilirliği dikkate alınır ve varsayılan olarak erişilebilirdir. Kutudan çıktığı gibi Create React App'i destekler ve özel temalar da desteklenir.

Bir React projesinde React Bootstrap'i çalıştırmak için:

npm install react-bootstrap bootstrap

Sonuç şöyle görünebilir:

Artıları:

• React bileşenleri ile sıfırdan yeniden oluşturuldu
• akılda erişilebilirlik
• Create React App'i destekler

Eksileri:

• React App Oluşturma'da özel temalar zor olabilir

Malzeme Arayüzü

Daha hızlı ve daha kolay web geliştirme için popüler React bileşenleri. Bu, kendi tasarım sisteminizi oluşturmanıza veya Materyal Tasarım ile başlamanıza olanak tanır. Hem premium hem de ücretsiz şablonlar ve temalar mevcuttur. Premium temaların işleve bağlı olarak bir fiyat etiketi vardır. Material-UI, hızlı kurulum için bir NPM paketi aracılığıyla gelir.

Material-UI ile başlamak için:

npm install @material-ui/core

Sonuç şöyle görünebilir:

Kaynak

Artıları:

• daha az çabayla güçlü bir kullanıcı arayüzü oluşturun
• birçok bileşen sunar
• birçok şablon sunar

Eksileri:

• bazı premium şablonların maliyeti vardır, ancak paraya değer olabilir

Elemental Kullanıcı Arayüzü

Başlangıçta KeystoneJS'de kullanılmak üzere React uygulamaları için bir araç seti. Gerçek dünyanın gerekliliklerinden doğan deneysel bir kullanıcı arayüzü araç takımıdır. Hedef, bağımsız veya birlikte paketlenmiş, tartışmasız bir React bileşenleri setidir. Göze çarpmayan bir varsayılan stil ve esnek tema yetenekleriyle birlikte gelir.

Elemental UI ile başlamak için:

npm i elemental --save

Sonuç şöyle görünebilir:

Artıları:

• yeniden kullanılabilir bağımsız bileşenler
• esnek varsayılan stiller
• gerçek dünya senaryolarından esinlenmiştir

Eksileri:

• hala geliştiriliyor

Anlamsal Arayüz

Resmi Semantic UI React entegrasyon UI araç seti. JQuery ücretsiz olarak gelir çünkü tüm jQuery işlevleri React'te yeniden oluşturulur. Bildirim temelli bir API, sağlam özellikler ve prop doğrulaması sağlar. Aracılığıyla büyütme as çıktının kontrolüne izin verir, MenuLinks ve react-router. Steno sahne, işaretleme oluşturur, bu, kullanım durumlarıyla çalışmayı kolaylaştırır. Alt bileşenlerin işaretlemeye tam erişimi vardır; bu esneklik, özelleştirme bileşenlerinin kilidini açar. Durum bilgili bileşenler, ekstra kablolama olmadan kutudan çıkar çıkmaz durumu yönetir. Örneğin, Dropdown tıklamayla açılır onClick için open destek. Bir pervane ayarlamak, kontrolü bu pervane değerine devrederken, geri kalanı otomatik olarak kontrol edilir.

React Semantic UI'deki büyütme şöyle görünebilir:

import { Link } from 'react-router-dom'; <Menu> <Menu.Item as={Link} to="/menu-item"> Menu Item </Menu.Item>
</Menu>

Ve bu görünüm ve his:

Kaynak

Artıları:

• jQuery ücretsiz
• props aracılığıyla bildirimsel
• büyütme bol miktarda özelleştirmeye izin verir

Eksileri:

• herhangi birini bulmak zor

Sonuç

Gösterildiği gibi, React'in ekosistemi son birkaç yılda patladı. React bileşenlerini tutarlı bir pakette yeniden kullanmak isteyen kuruluşlar için tercih edilen araçtır. Her araç, birkaç karşılıklı bağımlılıkla bağımsızdır. 2020 için tavsiyem bu araçları en azından bir denemektir.

Bu arada, tavsiye ettiğimiz daha fazla okumayla React becerilerinizi geliştirin:

Kaynak: https://www.sitepoint.com/essential-react-tools/?utm_source=rss