g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

İlk tam yığın web uygulamam

Bu makalede yazar, React.js ve Redux.js ön uç teknolojisini kullanacak ve Ruby on Rails API'sini çağırarak size mükemmel bir tam yığın Web uygulamasının nasıl oluşturulacağını öğretecek.

Yazar | Anne-Laure Chadeyas

Çevirmen | Crescent Moon, Baş Editör | Tu Min

Aşağıdaki çeviridir:

600'den fazla dersi öğrendikten ve 4 projeyi uyguladıktan sonra, artık son projem hakkında konuşabilirim. Flatiron School'da bu çevrimiçi yazılım geliştirme kendi kendine çalışma kursunu alırken, mezun olmak için beş proje tamamlamam gerektiğini biliyordum. Son proje ulaşılamaz görünüyor, çünkü bu proje henüz ustalaşmadığım birçok beceri gerektiriyor. Ama şimdi nihayet bu projeyi sunabilirim.

Bu projenin nihai amacı, Ruby on Rails API'sini çağırmak için ön uçta React.js ve Redux.js kullanarak güzel bir tek sayfalı uygulama oluşturmaktır.

Tek sayfalı uygulama

Öncelikle tek sayfalık uygulama nedir? Tek sayfalık bir uygulama, sunucudan yepyeni bir sayfa yüklemek yerine mevcut sayfanın içeriğini kullanıcının eylemlerine veya davranışlarına göre dinamik olarak yeniden yazan bir web sitesi veya web uygulamasıdır. Bunu başarmanın iki yolu vardır:

Tüm sayfa içeriğini tek sayfa yüklemede okuyun. Ancak uygulamanın karmaşıklığı düşünüldüğünde, bu uzun zaman alabilir, bu nedenle kullanıcı deneyimini etkileyecektir.
Belirli bir kullanıcı olayından sonra, sunucudan ilgili içeriği isteyin. Yaygın kullanıcı etkinlikleri arasında bir düğmeyi tıklama, sayfada aşağı kaydırma, bir öğenin üzerine gelme, klavyede bir tuşa basma vb. Yer alır.

Karmaşık uygulamalar için ikinci yöntem daha yaygındır. Sonuçta, tek sayfalık bir uygulamanın var olmasının nedeni, tam sayfa yeniden yüklemeyle kesintiye uğramadan daha sorunsuz bir kullanıcı deneyimi sağlayabilmesidir.

Kod açısından, tek sayfalı bir uygulama, uygulamanın tamamında yalnızca bir HTML sayfası olduğu anlamına gelir, genellikle bu sayfanın adı index.html'dir.

Uygulama yapısını oluşturun

Uygulama iki bölüme ayrılmıştır: ön uç ve arka uç. Ön uç, kullanıcı etkileşiminin, yani kullanıcı arayüzünün bir parçasıdır. Arka uç, sunucu ile kullanıcı arayüzü arasındaki bağlantıdan sorumludur. Bir uygulama oluşturmak için iki seçenek vardır:

İlk seçenek, hem ön ucu hem de arka ucu aynı kod havuzuna (örneğin GitHub'daki kod deposu) koymaktır.
İkinci seçenek, biri arka uç ve diğeri ön uç için olmak üzere iki kod deposu oluşturmaktır. Bunun birçok avantajı vardır, bunlardan biri arka ucun (bu makaledeki API gibi) birden fazla ön uç tarafından yeniden kullanılabilmesidir.Diğer bir avantaj, düzenleyicide yönetilen dizinin daha küçük olmasıdır.

Yukarıdaki iki yöntem doğru veya yanlış değildir. dayalı Yukarıda Belirtilen iki neden. Uygulamayı oluştururken iki bağımsız kod deposu kullanmayı seçtim,

İlk kod deposu arka uçtur. API olarak bir Rails uygulaması oluşturmak için terminalde aşağıdaki komutu kullandım, ancak görünüm yok. Bu, normal bir Rails uygulaması oluşturmakla aynıdır, ancak bir parametre daha vardır.

raylar yeni my_ uygulama _backend --api

Ön uca gelince, "yarat-tepki" kullandım uygulama Oluşturucu.

npx oluştur-tepki- uygulama benim_ uygulama _başlangıç aşaması

Bu iki komut ihtiyacım olan tüm dosyaları oluşturmama yardımcı olabilir.

Bileşen türü hakkında

Projenin teknik gerekliliği, en az iki konteyner bileşeni ve beş durumsuz bileşenin yazılması gerektiğidir. React'teki bileşenler arayüzün temel öğeleridir. Üst bileşenden gelen girdileri kabul edebilir (props aracılığıyla erişilir) ve yeniden kullanılabilir.

Aşağıda, kapsayıcı bileşeni ve durum bilgisi olmayan bileşen ayrıntılı olarak açıklanmaktadır. Öncelikle durumun ne olduğunu açıklamamız gerekiyor. Durum, değişebilen verilerdir. Durum değişikliğinin birçok nedeni olabilir, bunlardan biri veritabanı güncellemesinin durum değişikliğine neden olması, diğeri ise kullanıcının verileri değiştirmesidir.

Kapsayıcı bileşenlerine durum bilgisi olan bileşenler de denir ve durum bilgisiz bileşenlere de sunum bileşenleri adı verilir. Kapsayıcı bileşenleri ve sunum bileşenleri arasında kesin bir ayrım yoktur Her geliştirici, her bileşeni kendi isteklerine göre düzenleyebilir. Ancak genel olarak konuşursak, kapsayıcı bileşeni durum bilgisine sahiptir ve performans bileşeninin durumu yokken durum değişikliği yoluyla izlenebilir.Geçilen sahne öğelerini görüntüleyebilir veya sabit içeriği sonsuza kadar görüntüleyebilir.

Bu yazıda tartışılan uygulamalara gelince, en temel segmentasyon yöntemini kullanmaya karar verdim. API'deki her model için bir konteyner bileşeni oluşturdum. Proje ilerledikçe, artık ihtiyaç duyulmayan bazı bileşenleri sildim ve bazı diğer bileşenleri de ekledim. Durum bilgisi olan bileşenler temelde formlardır. En iyi örnekler kayıt formları ve giriş formlarıdır. React'in formunda, her kullanıcı girişi, bir yerel durum değişikliği veya bir Redux depolama durumu değişikliği olabilen bir durum değişikliğiyle sonuçlanacaktır (Redux'u daha sonra tartışacağız). Durum bilgisi olmayan bir bileşene örnek olarak BicyclesL verilebilir. dır-dir T.js'deki bisikletlerin listesi Bu bileşen, CitiesContainer bileşeninden sahne aracılığıyla şehirlerin bir listesini kabul eder, bu da devletle hiçbir ilgisi yoktur.

React'te Yönlendirme

Tek sayfalık bir uygulamada sayfanın tamamı yeniden yüklenmeyeceği için ortaya çıkan sorunlardan biri de nasıl yönlendirileceğidir. Bir web uygulamasında yönlendirmenin rolü, bir kullanıcı belirli bir web sayfasını ziyaret ettiğinde ne yapılması gerektiğini belirlemektir. Tek sayfalık uygulamamızın yalnızca bir görünümü vardır, bu nedenle kullanıcı bir Rails uygulaması gibi bağlantıya tıkladığında başka bir görünüme geçmenin bir yolu yoktur.

Her şeyin bir çözümü var, bu problem için react-router kitaplığını kullanabiliriz. Aşağıdakiler dahil birçok işlevi vardır:

URL, yalnızca kök sayfanın URL'sini değil, kullanıcının mevcut konumunu gösterir
Kullanıcı tarayıcının ileri ve geri düğmelerini kullanabilir
Kullanıcı, belirtilen sayfaya atlamak için adres çubuğuna URL'yi girebilir

Yönlendirmenin nasıl çalıştığını tanıtmak için CitiesContainer'ı örnek alalım:

Uygulama .jsimport React from'react '; 'react-router-dom'dan {Route} dosyasını içe aktarın; CitiesContainer'ı './ container / CitiesContainer'dan içe aktarın; CitiesContainer sınıfı React'i genişletir .Com ponent { render { dönüş ( < Rota yolu = '/ şehirler' bileşeni = {CitiesContainer} / > ) } } varsayılanı dışa aktar Uygulama ;

Burada tam yol yerine yol kullanılır, bu nedenle / şehirler içeren tüm yollar işlenecektir. CitiesContainer kapsayıcısının içi aşağıdaki gibidir:

kapsayıcılar / CitiesContainer.js React'ten React'i içe aktar '; 'react-redux'dan {connect} içe aktar; 'react-yönlendirici-dom'dan {Route} dosyasını içe aktarın; {fetchCities} öğesini '../ actions / fetchCities'den içe aktarın; İçe aktar ŞehirlerL dır-dir t '../ components / CitiesL'den dır-dir t '; CityPage'i '../ components / CityPage'den içe aktarın; Bisikletleri içe aktarL dır-dir t '../ bileşenleri / BisikletlerL'den dır-dir t '; class CitiesContainer React'i genişletir .Com ponent { componentDidMount { inci dır-dir .props.fetchCities } render { dönüş ( < div > < Rotanın tam yolu = '/ şehirler' render = {= > < ŞehirlerL dır-dir t şehirler = {th dır-dir .props.cities} / > } / > < Tam yolu yönlendir = '/ Cities /: id' render = {(routerProps) = > < CityPage {... routerProps} şehirler = {th dır-dir .props.cities} / > } / > < Rota yolu = '/ Cities /: id / bicycles' render = {(routerProps) = > < BisikletlerL dır-dir t {... routerProps} şehirler = {th dır-dir .props.cities} / > } / > < / div > ) } } const mapStateToProps = durum = > { dönüş { şehirler: eyalet.cities } } varsayılan bağlantıyı dışa aktar (mapStateToProps, {fetchCities}) (CitiesContainer)

React-router-dom paketi, geliştiriciler için routerProps sağlar. Bu öznitelik, URL'nin içeriğini props'e bir parametre olarak iletebilir. Burada, sahne aracılığıyla şehrin kimliğine erişebilir ve ardından ihtiyaç duyduğumuz şeyi bulmak için şehirleri filtreleyebiliriz (sahne donanımı aracılığıyla erişilir) Şu Kent.

Redux kullanın

Sonunda Redux hakkında konuştuk. Redux nedir? Kendime bu soruyu sordum ve Google'a da sordum. Bu videoyu Youtube'da buldum (https: // www. Youtube .com / watch? v = np8A_aW7Pew), giriş çok açık. Ben de sana yardım etmeyi umuyorum. Redux belgeleri bize Redux'un JavaScript uygulamaları için "öngörülebilir" bir durum kapsayıcısı olduğunu söyler. Belge Redux'un 4 yönünü vurgulamaktadır:

tahmin edilebilir: Tüm ortamlarda tutarlı davranan ve test edilmesi daha kolay olan uygulamaların yazılmasına yardımcı olur.
Merkezileştirme: Durumun merkezileştirilmesi ve uygulamanın mantığı, durum sürekliliği gibi güçlü işlevleri gerçekleştirebilir.
Ayarlanabilir: Redux DevTools, uygulama durumu değişikliklerinin zamanını, konumunu, nedenini ve yöntemini kolayca izleyebilir.
esnek: Redux, herhangi bir UI katmanıyla kullanılabilir Birleştirmek kullanın.

Uygulamamızda Redux birçok kolaylığa sahiptir, ancak en önemli nokta mevcut kullanıcının bilgilerine her yerden erişebilmenizdir (o anda oturum açmış bir kullanıcı varsa). Kullanıcı bilgilerini, mevcut kullanıcıyı sahne içinden geçiren bileşenlerle sınırlı olmamak üzere, uygulamadaki herhangi bir konumdan erişilebilen Redux depolamasına kaydediyoruz. Aslında, herhangi bir alt bileşen Redux deposuna iki yoldan biriyle bağlanabilir:

MapsStateToProps kullanarak, bileşenden Redux depolamaya erişmeden durum içeriğini props'a yerleştirebilirsiniz.
MapD'yi kullanın dır-dir patchToProps, bileşenden Redux deposuna erişmeden eylemleri dağıtabilirsiniz.

Bu şekilde durum yönetimi ve durum göstergesi ayrılabilir. Ancak bu, Redux'un tam işlevselliği değildir. Eşzamansız eylem yaratıcıları oluştururken hala thunk ara yazılım kullanıyoruz.

Ara yazılım nedir? Wikipedia'nın açıklaması, "yazılım bileşenleri arasındaki iletişimi kolaylaştırmak için sistem yazılımı ile uygulama yazılımını birbirine bağlayan yazılımı sağlamaktır". Ara katman yazılımını yapıştırıcı olarak düşünebilirsiniz. Yani thunk, daha önce yapamadığımız şeyleri yapmamıza izin veriyor. Thunk işlevinin parametresi d dır-dir yama, bu nedenle işlevlerde kullanılabilir, bu durumda eylem yaratıcılarında kullanılır. D nedeniyle dır-dir Yama bir işlev içinde kullanılabilir, bundan yararlanabilir ve onu yalnızca getirme isteğinin sonunda dağıtabiliriz. Aşağıdaki örnekte gösterildiği gibi, yalnızca tüm şehirler için getirme istekleri tamamlandıktan sonra dağıtırız:

eylemler / fetchCities.jsexport const fetchCities = = > { dönüş (d dır-dir yama) = > { getir (' http : // loca lh ost: 30 00 / api / v1 / şehirler) . sonra (yanıt = > response.json) . sonra (şehirler = > { d dır-dir yama({ tür: 'FETCH_CITIES', yük: şehirler }) }) } }

Veri kalıcılığını sağlamak için getirmeyi kullanın

Sunucudan verileri getirerek, GET ile alabilir veya POST ile sunucuya veri gönderebiliriz. GET ile veri almanın yolu, önceki yönlendirme tartışmasında bahsedilen CitiesContainer örneğine başvurabilir. Aşağıdaki eylem denetleyicisinde, GET ile tüm şehirleri almak için getirme işlevini kullanıyoruz:

Kimlik doğrulama bölümünde, eylem oluşturucuda oturum açmak POST ile sunucuya veri göndermenin bir örneğidir:

eylemler / auth.jsexport const oturum açma = kimlik bilgileri = > { dönüş (d dır-dir yama) = > { getir (' http : // loca lh ost: 30 00 / api / v1 / login ', { kimlik bilgileri: 'include', yöntem: 'POST', başlıklar: { 'İçerik türü': ' uygulama lisans / json ' }, body: JSON.stringify (kimlik bilgileri) }) . sonra (yanıt = > response.json) .then (kullanıcı = > { if (user.error) { alert (user.error) } Başka { d dır-dir patch (setCurrentUser (kullanıcı)) d dır-dir yama (resetLoginForm) } }) .catch (console.log) } } dışa aktarma const setCurrentUser = kullanıcı = > { dönüş { yazın: 'SET_CURRENT_USER', yük: kullanıcı } } ihracat const resetLoginForm = = > { dönüş { tür: 'RESET_LOGIN_FORM' } }

Şekillendirmeye gelince, orijinal planım Bootstrap'in React sürümünü kullanmaktı, çünkü bu duyduğum tek kitaplıktı. Tarzlar söz konusu olduğunda hâlâ acemiyim ve gezinme çubuğunu bulamadım. aramak React'te hangi çerçeveler mevcuttur? Sonra bu makalede (https: // medium .com / @ zeolearn / 6-best-reactjs-based-ui-frameworks-9c780b96236c) Tam ihtiyacım olan Semantik UI React Menu bileşenini gördüm. Başka stil çerçevelerini hiç kullanmadım, bu yüzden Anlamsal UI ile kullanımı daha kolay olan diğer bileşenleri karşılaştırmanın bir yolu yok, ancak Anlamsal UI'nin kullanımının çok kolay olduğunu söylemeliyim.

Stil bu projenin odak noktası değil, ancak bu stili bu uygulamada uygulamayı planlıyorum. Temel yapıyı ve temel işlevleri kurdum ve şimdi yeni işlevler eklemek daha kolay. Uygulamanın işlevselliğini geliştirmeye devam etmeyi planlıyorum.

Orijinal: https: // orta .com /@annelaure.developer/my-first-full-stack-web- uygulama lisans-8ac82db61b10

Bu makale bir CSDN çevirisidir, lütfen yeniden basımın kaynağını belirtin.

Programcıların dikkatine, bu WeChat grubu İngilizce öğrenebilir ve tüm süreç ücretsizdir

Jia Yangqing teşekkür mektubu: Ali açık kaynak 10 yıldır, binlerce açık kaynak insana saygı gösterin