Ön Uç becerilerinizi geliştirmek için 9 proje daha

Giriş

İster programlamada yeni olun ister deneyimli bir geliştirici olun, yeni kavramlar ve diller/çerçeveler öğrenmek bu sektörde trendlere ayak uydurmak için bir zorunluluktur.

Örneğin, Facebook'un sadece dört yıl önce açık kaynaklı hale getirdiği ve dünya çapındaki JavaScript geliştiricilerinin bir numaralı tercihi haline gelen React'ı ele alalım.

Elbette Vue ve Angular'ın da kendi meşru hayran kitlesi var. Ayrıca Svelte ve Next.js veya Nuxt.js gibi diğer evrensel çerçeveler de var. Ve Gatsby, Gridsome ve Quasar... ve çok daha fazlası.

Kendinizi deneyimli bir JavaScript geliştiricisi olarak kanıtlamak istiyorsanız, eski güzel JS ile çalışmanın yanı sıra, çeşitli çerçeveler ve kitaplıklar konusunda en azından biraz deneyime sahip olmalısınız.

2020'de ön uç uzmanı olmanıza yardımcı olmak için, her biri farklı bir JavaScript çerçevesine ve kitaplığına odaklanan, oluşturup portföyünüze ekleyebileceğiniz bir teknoloji yığını olan dokuz farklı projeyi bir araya getirdim. Hiçbir şeyin size gerçekten bir şeyler yaratmaktan daha fazla yardımcı olamayacağını unutmayın, o yüzden ilerleyin, aklınızı kullanın ve bunu gerçekleştirin.

Makale EDISON Yazılımının desteğiyle çevrilmiştir. çok markalı mağazalar için sanal soyunma odaları oluşturuyorVe yazılım testleri.

React kullanan film arama uygulaması (kancalı)

Başlayabileceğiniz ilk şey React'ı kullanarak bir film arama uygulaması oluşturmaktır. Aşağıda son başvurunun nasıl görüneceğine dair bir resim bulunmaktadır:

Ne öğreneceksin
Bu uygulamayı oluşturarak nispeten yeni Hooks API'sini kullanarak React becerilerinizi geliştireceksiniz. Örnek projede React bileşenleri, çok sayıda kanca, harici bir API ve elbette bazı CSS stilleri kullanılıyor.

Teknoloji yığını ve özellikler

• Kancalarla tepki verin
• oluşturmak-tepki-Uygulama
• JSX
• CSS

Herhangi bir sınıf kullanmadan bu projeler size işlevsel React'e mükemmel bir giriş noktası sağlar ve 2020'de size kesinlikle yardımcı olacaktır. Bulabilirsin örnek proje burada. Talimatları izleyin veya kendiniz yapın.

Vue ile Sohbet Uygulaması

Yapabileceğiniz bir diğer harika proje ise favori JavaScript kitaplığım olan VueJS'yi kullanarak bir sohbet uygulaması oluşturmaktır. Uygulama şöyle görünecek:

Ne öğreneceksin
Bu eğitimde sıfırdan bir Vue uygulamasının nasıl oluşturulacağını öğreneceksiniz - bileşenler oluşturma, durumu yönetme, rota oluşturma, üçüncü taraf hizmetlere bağlanma ve hatta kimlik doğrulamayı yönetme.

Teknoloji yığını ve özellikler

• Görünüm
• vuex
• Vue Yönlendirici
• Vue CLI'si
• Itici
• CSS

Bu, Vue'yu kullanmaya başlamak veya 2020'de geliştirmeye başlamak için mevcut becerilerinizi geliştirmek için gerçekten harika bir proje. Bulabilirsin öğretici burada.

Angular 8 ile güzel hava durumu uygulaması

Bu örnek, Angular 8'i kullanarak güzel bir hava durumu uygulaması oluşturmanıza yardımcı olacaktır:

Ne öğreneceksin
Bu proje size, tasarımdan geliştirmeye ve dağıtıma hazır bir uygulamaya kadar sıfırdan uygulama oluşturma konusunda değerli beceriler öğretecektir.

Teknoloji yığını ve özellikler

• Açısal 8
• Firebase
• Sunucu tarafı oluşturma
• Izgara ve Flexbox ile CSS
• Mobil uyumluluk ve uyumluluk
• Karanlık mod
• Güzel arayüz

Bu her şeyi kapsayan projede gerçekten sevdiğim şey, bazı şeyleri tek başına çalışmamanızdır. Bunun yerine tasarımdan son dağıtıma kadar tüm geliştirme sürecini öğrenirsiniz.

Svelte kullanarak Yapılacaklar uygulaması

Svelte, bileşen tabanlı yaklaşımın yeni çocuğu gibidir; en azından React, Vue ve Angular'a benzer. Ve bu 2020'nin en yeni ürünlerinden biri.

Yapılacaklar uygulamaları her zaman en güncel konu olmayabilir ancak Svelte becerilerinizi geliştirmenize gerçekten yardımcı olacaktır. Bunun gibi görünecek:

Ne öğreneceksin
Bu eğitim size baştan sona Svelte 3 kullanarak nasıl uygulama oluşturulacağını gösterecektir. Bileşenleri, stili ve olay işleyicilerini kullanacaksınız

Teknoloji yığını ve özellikler

• İnce 3
• Bileşenleri
• CSS ile stillendirme
• ES 6 sözdizimi

Çok fazla iyi Svelte başlangıç ​​projesi yok, bu yüzden buldum bu başlangıç ​​için iyi bir seçenek.

Next.js'yi kullanan e-ticaret uygulaması

Next.js, sunucu tarafı oluşturmayı anında destekleyen React uygulamaları oluşturmak için en popüler çerçevedir.

Bu proje size şuna benzeyen bir e-ticaret uygulamasının nasıl oluşturulacağını gösterecektir:

Ne öğreneceksin
Bu projede Next.js ile nasıl geliştirme yapacağınızı, yeni sayfalar ve bileşenler oluşturmayı, verileri ayıklamayı ve bir Next uygulamasını biçimlendirip dağıtmayı öğreneceksiniz.

Teknoloji yığını ve özellikler

• Next.js
• Bileşenler ve Sayfalar
• Veri örnekleme
• stilizasyon
• Proje Dağıtımı
• SSR ve SPA

Yeni bir şeyler öğrenmek için e-ticaret uygulaması gibi gerçek dünyadan bir örneğe sahip olmak her zaman harikadır. Yapabilirsiniz öğreticiyi burada bulabilirsiniz.

Nuxt.js ile tam teşekküllü çok dilli blog

Nuxt.js, Vue için, Next.js ise React için odur: sunucu tarafı işlemenin ve tek sayfalı uygulamaların gücünü birleştirmek için harika bir çerçeve
Oluşturabileceğiniz son uygulama şu şekilde görünecektir:

Ne öğreneceksin

Bu örnek projede, ilk kurulumdan son dağıtıma kadar Nuxt.js kullanarak eksiksiz bir web sitesinin nasıl oluşturulacağını öğreneceksiniz.

Sayfalar ve bileşenler ve SCSS ile stil oluşturma gibi Nuxt'un sunduğu harika özelliklerin çoğundan yararlanır.

Teknoloji yığını ve özellikler

• Nuxt.js
• Bileşenler ve Sayfalar
• Hikaye bloğu modülü
• Hagfish
• Durum yönetimi için Vuex
• Stil için SCSS
• Nuxt ara yazılımları

Bu gerçekten harika bir proje, birçok harika Nuxt.js özelliğini içerir. Kişisel olarak Nuxt ile çalışmayı seviyorum, bu yüzden denemelisiniz çünkü bu sizi aynı zamanda harika bir Vue geliştiricisi yapacaktır.

Gatsby ile Blog

Gatsby, React ve GraphQL kullanan mükemmel bir statik site oluşturucudur. Bu projenin sonucudur:

Ne öğreneceksin

Bu eğitimde, React ve GraphQL kullanarak kendi makalelerinizi yazmak için kullanacağınız bir blog oluşturmak için Gatsby'yi nasıl kullanacağınızı öğreneceksiniz.

Teknoloji yığını ve özellikler

• Gatsby
• React
• GraphQL
• Eklentiler ve temalar
• MDX/Markdown
• Önyükleme CSS'si
• Şablonları

Eğer bir blog başlatmak istediyseniz, bu harika bir örnek React ve GraphQL kullanarak nasıl yapılacağı hakkında.

WordPress'in kötü bir seçim olduğunu söylemiyorum ama Gatsby ile React'ı kullanarak yüksek performanslı web siteleri oluşturabilirsiniz; bu harika bir kombinasyondur.

Gridsome'la Blog

Vue için Gridsome... Tamam, bunu Next/Nuxt'ta zaten yapmıştık.
Ancak aynı şey Gridsome ve Gatsby için de geçerli. Her ikisi de veri katmanı olarak GraphQL kullanıyor ancak Gridsome VueJS kullanıyor. Bu aynı zamanda harika bloglar oluşturmanıza yardımcı olacak muhteşem bir statik site oluşturucudur:

Ne öğreneceksin

Bu proje size Gridsome, GraphQL ve Markdown'a başlamak için basit bir blogun nasıl oluşturulacağını öğretecek. Ayrıca bir uygulamanın Netlify aracılığıyla nasıl dağıtılacağını da kapsar.

Teknoloji yığını ve özellikler

• Izgara
• Görünüm
• GraphQL
• Markdown
• netleştir

Bu kesinlikle en kapsamlı eğitim değildir ancak Gridsome'ın temel kavramlarını kapsar ve Markdown iyi bir başlangıç ​​noktası olabilir.

Quasar kullanan SoundCloud benzeri ses oynatıcısı

Quasar, mobil uygulamalar oluşturmak için kullanılabilecek başka bir Vue çerçevesidir. Bu projede bir ses oynatıcı uygulaması oluşturacaksınız, örneğin:

Ne öğreneceksin

Diğer projeler ağırlıklı olarak web uygulamalarına odaklanırken, bu size Vue ve Quasar çerçevesini kullanarak nasıl mobil uygulama oluşturulacağını gösterecek.
Cordova'nın halihazırda Android Studio/Xcode yapılandırılmış olarak çalışıyor olması gerekir. Değilse, kılavuzda size her şeyin nasıl ayarlanacağını gösteren Quasar web sitesine bir bağlantı bulunur.

Teknoloji yığını ve özellikler

• Quasar İstanbul
• Görünüm
• Cordova
• dalga sörfçü
• Kullanıcı Arayüzü Bileşenleri

Küçük projeQuasar'ın mobil uygulamalar oluşturma yeteneklerini gösteriyor.

Kaynak: habr.com