Komple Bir Tepki Kazanı Eğitimi - Sıfırdan Kahramana

React'i öğrenmeye başladığımızda, projelerimizi yapmak için sıfırdan bir kazan yapmalı ya da toplum tarafından sağlanan bir kısmını kullanmalıyız. Neredeyse her zaman, derleme yapılandırması olmayan bir uygulama oluşturmak için kullandığımız create-react-app'dir. Veya sıfırdan kendi basit kazanımızı kendimiz yapıyoruz.

Bundan, akla geliyor: neden her zaman kullandığım ve hazır bıraktığım bütün bağımlılıkları olan bir kazan yapmıyorsunuz? Topluluk da böyle düşünüyordu, bu yüzden şimdi topluluğumuzun oluşturduğu birkaç kazan plakamız var. Bazıları diğerlerinden daha karmaşık, ancak her zaman en fazla zaman kazanma hedefi aynıdır.

Bu makale, bugün React topluluğunda kullanılan temel bağımlılıklar ile kendi kazanınızı sıfırdan nasıl oluşturabileceğinizi size öğretecektir. Bugünlerde en yaygın olan bazı özelliklerin bazılarını kullanacağız ve oradan istediğiniz gibi özelleştirebilirsiniz.

Bu yazının oluşturduğu kazan burada bulunabilir!

Başlamak

Her şeyden önce, kazanımıza başlamak için bir klasör oluşturacağız. Ne istersen onu isimlendirebilirsin, benimki reaksiyon cıvatasını isimlendireceğim.

Terminalini aç ve şöyle yap:

mkdir tepki-cıvata

Şimdi, oluşturulan klasöre gidin ve aşağıdaki komutu yazın:

npm init -y

NPM sizin için bir package.json dosyası yaratacak ve kurduğunuz tüm bağımlılıklar ve komutlarınız orada olacaktır.

Şimdi, kazanımız için temel klasör yapısını oluşturacağız. Şimdilik böyle olacak:

tepki delikli
    | --config
    | --src
    | --tests

webpack

Webpack, günümüzde JavaScript uygulamaları için en ünlü modül paketleyicidir. Temel olarak, tüm kodlarınızı birleştirir ve bir veya daha fazla paket oluşturur. Burada daha fazla bilgi edinebilirsiniz.

Bu kazan içinde kullanacağız, bu nedenle tüm bu bağımlılıkları kurun:

npm install - save-dev webpack webpack-cli webpack-dev-sunucu webpack-birleştirme html-webpack-eklentisi temiz-webpack-eklentisi img-yükleyici url-loader dosya yükleyici

Şimdi config klasörümüzde webpack adında başka bir klasör yaratacağız, daha sonra bu webpack klasörünün içinde 5 dosya yaratacağız.

Paths.js adlı bir dosya oluşturun. Bu dosyanın içinde tüm çıktı dosyalarınızın hedef dizini olacak.

İçine, tüm bu kodu koy:

Şimdi rules.js adında başka bir dosya oluşturun ve aşağıdaki kodu buraya yerleştirin:

Ondan sonra 3 dosya daha oluşturacağız:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Temel olarak, webpack.common.babel.js dosyamızda, giriş ve çıkış konfigürasyonumuzu kurduk ve gereken tüm eklentileri dahil ettik. Webpack.dev.babel.js dosyasında, modu geliştirme moduna ayarladık. Ve webpack.prod.babel.js dosyamızda, modu üretime ayarladık.

Bundan sonra, kök klasörümüzde, webpack.config.js adlı son web paketi dosyasını oluşturacağız ve aşağıdaki kodu gireceğiz:

Webpack konfigürasyonumuz hazır, bu yüzden artık kazan plakasının diğer bölümlerinde Babel, ESLint, Prettier vb. İle çalışacağız.

Babil

Bence React ile çalışan hemen hemen herkes Babil'i ve bu basit aktarıcının hayatımıza nasıl yardımcı olduğunu duymuş. Ne olduğunu bilmiyorsanız, Babel, JavaScript kodunuzu herhangi bir tarayıcıda çalışabilen düz eski ES5 JavaScript'e dönüştüren bir aktarıcıdır.

Bir sürü Babel eklentisi kullanacağız, bu nedenle kök klasörümüze yükleyin:

npm install - save-dev @ babel / core @ babe / cli @ babel / node @ babel / eklenti-öneri-sınıf-özellikleri @ babel / eklenti-öneri-nesne-dinlenme-yayılma @ babel / eklenti-sözdizimi-dinamik- babel / eklenti-sözdizimi-ithalat-meta @ babel / eklenti-dönüşümü-zaman uyumsuz-jeneratör @ babel / eklenti-dönüşümü-çalışma zamanı @ babel / preset-env @ babel / preset-tepki @ babel / register @ babel / çalışma zamanı babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

Bundan sonra, kök klasörümüzde .babelrc adlı bir dosya oluşturacağız ve bu dosyanın içine aşağıdaki kodu koyacağız:

Artık projemiz Babel tarafından derlendi ve yeni nesil JavaScript sözdizimini problemsiz olarak kullanabiliyoruz.

ESLint

Bugünlerde proje projeleri için en çok kullanılan araç ESLint. Değişken kapsamı, bildirilmemiş değişkenlere atama vb. Gibi belirli hata sınıflarını bulmak gerçekten yararlıdır.

İlk önce, aşağıdaki bağımlılıkları yükleyin:

npm yüklemek - saklamak-dev eslint-config-airbnb eslint-config-prettier eslint yükleyici eslint-eklenti-babel eslint-eklenti ithalatı

Ardından, kök klasörümüzde .eslintrc adlı bir dosya oluşturun ve aşağıdaki kodu buraya yerleştirin:

Daha güzel

Güzel temelde bir kod biçimlendirici. Kodunuzu ayrıştırır ve gerektiğinde kodu sararak maksimum satır uzunluğunu dikkate alan kendi kurallarıyla yeniden yazdırır.

Sadece yüklemeniz gerekir:

npm install - save-dev güzel

Kök klasörümüzde .prettierrc adlı bir dosya oluşturun ve aşağıdaki kodu buraya yerleştirin:

Tepki

React, kullanıcı arayüzleri oluşturmak için açık kaynaklı bir JavaScript uygulama kütüphanesidir. Facebook tarafından geliştirilen ve arkasında büyük bir topluluk var. Bu makaleyi okuyorsanız, Tepki hakkında zaten bilginiz olduğunu varsayalım, ancak hakkında daha fazla bilgi edinmek istiyorsanız, buradan okuyabilirsiniz.

Aşağıdaki bağımlılıkları yükleyeceğiz:

npm install - saka tepki tepki-dom cross-env

Ayrıca, src klasörümüz içinde, basit bir HTML dosyası index.html oluşturacağız ve aşağıdaki kodu gireceğiz:

Ondan sonra basit bir React projesi oluşturacağız. Src klasörümüzde, şöyle bir index.js dosyası oluşturun:

Src klasörümüz içerisinde aşağıdaki yapıya sahip olacağız:

src
    | --actions
    | --components
    | --reducers
    | --reducers
    | --store

Bileşenler klasöründe App.js adlı bir dosya oluşturun ve aşağıdaki kodu girin:

Redux

Redux, başvurunuzun durumunu yönetmeyi kolaylaştırır. Buna bakmanın başka bir yolu, görüntülediğiniz verileri yönetmenize ve kullanıcı işlemlerine nasıl yanıt verdiğinize yardımcı olmasıdır. Bugünlerde pek çok insan MobX ya da sadece setState gibi diğer seçenekleri tercih ediyor, ama ben bu kazan için Redux'a bağlı kalacağım.

İlk önce bazı bağımlılıklar kuracağız:

npm install - saklamak redux tepki-redux redux-thunk

O zaman Redux mağazamızı yaratacağız ve buraya bir eyalet koyacağız. Mağaza klasörümüzde, bir index.js dosyası oluşturun ve aşağıdaki kodu buraya yerleştirin:

Şimdi, indirgeyiciler klasörümüz içinde bir index.js oluşturun ve aşağıdaki kodu yazın:

Son olarak, src klasörümüzdeki index.js kodumuza gideceğiz ve kodu ile sarın ve mağazamızı uygulamamızın kullanımına sunmak için aksesuarlar olarak geçelim.

Böyle olacak:

Hepsi tamam. Redux mağazamız yapılandırılmış ve kullanıma hazır.

Yönlendirici tepki

React Router, React için standart yönlendirme kütüphanesidir. Temel olarak, kullanıcı arabiriminizi URL ile senkronize tutar. Kazanımızda kullanacağız, bu yüzden kurun:

npm install - sakla tepki-yönlendirici-dom

Bundan sonra, src klasöründeki index.js dizinimize gidin ve tüm kodu orada ile kaydırın.

Src klasörümüzdeki index.js kodumuz şöyle bitecek:

Tarz Bileşenleri

Stilli Bileşenler, React projenizi düzenlemenize yardımcı olduğundan, CSS'yi herkes için kolaylaştırır. Amacı, daha küçük ve tekrar kullanılabilir bileşenler yazmaktır. Kullanacağız ve daha fazla bilgi edinmek istiyorsanız, burada okuyun.

İlk önce kurun:

npm install - sade tasarımlı bileşenler

Ardından, bileşenler klasörümüzün içindeki App.js dosyasında, Styled Components'ı kullanarak basit bir başlık oluşturacağız. Başlığımız şöyle olacak:

Ve dosyamızın içinde, stilize edilmiş bileşenleri içe aktarmamız gerekiyor, bu nedenle dosyamız böyle olacak:

Jest & React Test Kütüphanesi

Jest, Facebook'tan açık kaynaklı bir JavaScript test kütüphanesidir. Başvurunuzu test etmeyi kolaylaştırır ve bize doğru çıktıyı veren ve olmayanlar hakkında birçok bilgi verir. React Test Kütüphane, React bileşenlerini test etmek için çok hafif bir çözümdür. Temel olarak, bu kütüphane Enzyme'in yerine geçmiştir.

Her uygulama bir çeşit test gerektirir. Bu makalede testler yazmayacağım ancak uygulamalarınızı test etmeye başlamak için bu araçları nasıl yapılandırabileceğinizi göstereceğim.

İlk önce ikisini de kuracağız:

npm install - save-dev jest jest-dom tepki-test kütüphanesi

Bundan sonra, package.json adresine gidin ve sonuçta aşağıdakileri yazın:

Ardından, config klasörümüze gidin ve içinde testler adı verilen başka bir klasör yarattı ve bu klasör içinde 2 dosya oluşturun.

İlk önce jest.config.js adlı bir dosya oluşturun ve aşağıdaki kodu girin:

Sonra rtl.setup.js adlı bir dosya oluşturun ve aşağıdaki kodu girin:

Hepsi tamam. Kazanımız çalışmaya hazır ve şimdi kullanabilirsiniz.

Şimdi package.json dosyamıza gidin ve aşağıdaki kodu girin:

Şimdi npm komutunu çalıştırırsanız ve localhost: 8080'e gidin, uygulamamızın iyi çalıştığını görmeliyiz!

Son kodumu görmek istiyorsanız, bu yazının oluşturduğu kazan burada!

Kazan dairesine dahil etmeyi sevdiğim bazı özellikler için bazı fikirlerim var, bu yüzden lütfen katkıda bulunmaktan çekinmeyin!

Twitter Beni Twitter'da takip et!
GitHub'da beni takip et!

Uzak bir fırsat arıyorum, bu yüzden duymak istediğim herhangi bir şey varsa, lütfen benimle iletişime geçin!