2022’de Bugün React’i Kullanabileceğiniz 9 Yol – JSManifest

2022'de Bugün React'i Kullanabileceğiniz 9 Yol – JSManifest

Bu yazıda, uygulama oluşturmak için 2022’de React’i Kullanabileceğiniz 9 Yolu ele alacağız. Bunlar, video akışı hizmetlerinden metin düzenleyicilere kadar değişebilir.

1. Web siteleri

Listedeki ilk bariz (ama en önemlisi) web uygulamalarıdır. React.js, bildirimsel bir tarzda dinamik ve sağlam kullanıcı arayüzleri oluşturma yeteneği nedeniyle web geliştirme topluluğunda kullanılan en popüler JavaScript kitaplıklarından biridir.

React ile ilgili en iyi şey, fikirsiz olması ve bu nedenle onunla yapabileceğiniz çok çeşitli olasılıklar olmasıdır. sen istemek.

Kullanım durumunuz için mevcut bazı teknolojileri bilmiyorsanız, React’i bugün kullanmaya başlamanıza yardımcı olacak hızlı bir liste burada:

Statik Web Siteleri

  • GatsbyJS SEO’ya güçlü bir şekilde odaklanan statik web siteleri oluşturmak için en popüler çerçevedir. Hızlıdır, esnektir ve React kullanarak web uygulamaları geliştirmenize yardımcı olur. Yıllar boyunca sürekli olarak en son teknolojilerle güncel kalmakta ve sürekli değişen arama motoru algoritmalarına en iyi uygulamaları uygulamaktadır.

  • SonrakiJS React’i de kullanan hibrit statik ve sunucu tarafından oluşturulan web uygulamaları oluşturmak için en popüler çerçevelerden biridir.

2. Komut Satırı Arayüzü (CLI) Uygulamaları

JavaScript’te kendi komut satırı uygulamanızı React kullanarak geliştirmek istediyseniz, hemen şimdi yapabilirsiniz!

mürekkep komut satırında bileşen tabanlı kullanıcı arabirimleri oluşturmak için popüler bir JavaScript kitaplığıdır. Bunu mümkün kılmak için, terminalde Flexbox mizanpajları oluşturmak için Yoga’yı kullanırlar, böylece normalde kullanacağınız CSS özelliklerinin çoğu da hemen kullanılabilir hale gelir.

Gatsby, New York Times birlikte Twilio projelerinde mürekkep kullandılar.

Harika bir yerleşik sete sahiptir bileşenler ek olarak topluluk tarafından oluşturulan bileşenler kullanıma hazır ve daha ileri gitmek istiyorsanız kendi mürekkep bileşeninizi oluşturabilir ve mürekkep topluluğuyla paylaşabilirsiniz!

İşte kullanılan mürekkebe bir örnek:


import React from 'react'
import meow from 'meow'
import { render } from 'ink'
import App from './App'
import store from './store'

const header = (s: string) => co.fadedBlue(s)
const flag = (s: string) => co.magenta(s)
const cli = meow(
  `
	${header('Usage')}

	${header(`Options`)}
	  ${flag(`--config`)}, ${flag(`-c`)} Sets the config for operations
`,
  {
    flags: {
      config: {
        type: 'string',
        alias: 'c',
        default: store.get('configKey') || '',
      },
    },
  },
)

render(<App config={cli.config} />)

3. Masaüstü Uygulamaları

Kendi masaüstü uygulamanızı oluşturmayı düşündüyseniz, size yardımcı olabilecek birkaç kitaplık vardır.

Elektron yerel masaüstü uygulamaları oluşturmak için NodeJS topluluğunda en yaygın kullanılan kitaplıklardan biridir. Tepki ile birleştirdiğinizde, güçlü bir kombinasyon haline gelir çünkü karmaşık programlar oluşturmaya devam ederken eğlenceli ve kolay hale getirir!

Tepki NodeGUI Qt5 tarafından desteklenen masaüstü geliştirme deneyimine doğrudan tepki getirmek için yavaş yavaş popülerlik kazanıyor.

Bu yola girmeye karar verirseniz, yukarıdakilere harika bir eşlik eden bu kitaplıklardan bazılarından bahsetmeye değer:

  1. tepki-masaüstü birçok Windows 10 ve MacOS Sierra bileşenini içeren yerel bir masaüstü deneyimi getirme hedefiyle bir dizi kullanıma hazır tepki bileşeni sağlar:

Windows 10:

tepki-masaüstü-pencere-düğme-bileşeni-masaüstü-applications.png
tepki-masaüstü-navigasyon-bölmesi-navpane-tepki-bileşeni.png

MacOS Sierra:

mac-list-tepki-bileşeni
mac-window-component-react-application-macos-sierra.png

  1. tepki-yönlendirici-dom kullanarak sayfalarınızı yönlendirmenize yardımcı olabilir. HashRouter dosya tabanlı ortamlar için bileşen veya BrowserRouter istek tabanlı ortamlar için. Bu harika çünkü kullanıcılarınızın daha önce ziyaret ettikleri adımlara gitmelerine izin veriyor.

  2. Taslak masaüstü uygulamaları için karmaşık veri odaklı arabirimler oluşturmak için optimize edilmiş bileşenler sağlayan başka bir tepki tabanlı bileşen kitaplığıdır:

blueprint-react-table-component-for-desktop-application.png

4. Videolar, Video Oynatıcılar ve Akış

GatsbyJS, NextJS veya kelimenin tam anlamıyla diğer herhangi bir UI çerçevesini birleştirip tepki vermek ve video oynatabilen ve hatta sorunsuz bir video akışı deneyimi sağlayan kendi uygulamalarınızı oluşturabilirsiniz.

İlk olarak, web sayfalarınızda video oynatmanıza yardımcı olabilecek bazı kitaplıklar şunlardır:

  • tepki veren oyuncu dosya yolları, YouTube, Facebook, DailyMotion ve diğerleri dahil olmak üzere çeşitli URL’lerden video oynatmak için bir tepki bileşenidir. Çeşitli kaynaklardan medya oynatmak için uygun biçimlendirme ve harici SDK’ları yükleyen akıllı bir bileşendir.

  • tepki-video-renderer ayrıca video oynatmak için başka bir tepki bileşenidir

  • tepki-video-kaydedici videoları kaydetmenizi sağlayan bir tepki bileşenidir.

  • tepki-video-ilerleme videoların süre ilerlemesini çerçeve sınırlarında göstermeye yardımcı olabilecek bir tepki bileşenidir:

  • tepki-video-ilerleme-demo

  • tepki-modal-video bir modda video oynatmanıza yardımcı olabilir

  • Twilio-video uygulamalarınıza gerçek zamanlı sesli ve görüntülü sohbet eklemenizi sağlar. Bu, birden fazla kişinin aynı sohbet odasına katılmasına ve Zoom benzeri bir deneyime sahip olmasına olanak tanır.

Kullanıcılarınız için isteğe bağlı video (VOD) deneyimleri oluşturmak üzere bu deneyimi bir araya getirebilirsiniz.

AWS Elemental MediaConvert herhangi bir cihaz için isteğe bağlı video varlıkları oluşturmak için yüksek kaliteli bir video kod dönüştürme teknolojisi kullanarak videolarınızı bağlı cihazlara veya televizyonlara teslim edilmek üzere biçimlendirmeye ve sıkıştırmaya yardımcı olabilir. Bunu, tüm kullanıcılar tarafından kullanılabilecek bir formatı birleştirmek için Apple ve Microsoft tarafından geliştirilen en yeni kod dönüştürme teknolojisini kullanarak yapar. Ayrıca iki kova oluşturmak için (biri girdi için diğeri çıktı için) S3’ü kullanmanız ve ardından MediaConvert’in çıktıyı depolaması için ardışık düzeni tetiklemek için bir işlev kullanmanız gerekir. Bu videolar, o kovaya eklediğiniz CDN tarafından alınır ve video oynatıcılarınız tarafından yayınlanabilir. Bu, tepki vermek için harika bir proje gibi geliyor!

6. Hile sayfaları

React, bileşen yapısı nedeniyle kendi hile sayfalarınızı geliştirmek için kullandığınızda harika bir araç olarak hizmet eder. Sürükle ve bırak ile birleştirildiğinde, JavaScript’te neredeyse doğanın anasıdır, çünkü normalde belirli yerlerde belirli notlarınız olur, böylece bundan en iyi şekilde yararlanabilirsiniz.

React’te hile sayfaları oluşturmaya başlamak istiyorsanız, kontrol edebileceğiniz bir kitaplık burada:

tepki sayfaları snippet’leri kullanarak hile sayfaları oluşturmak amacıyla bir tepki kitaplığıdır. Snippet’ler arasında yumuşak geçişler yapmak için bir sürükle ve bırak API’si kullanır ve snippet’lerinizi süslemek için 20’den fazla temaya sahiptir.

javascript'te reaksiyon-csheets-tepki-kütüphane-generate-cheat-sheets-in-javascript

7. Metin editörleri

Eminim bunu okuyanların çoğu bir süredir interneti kullanıyordur, bu yüzden kesinlikle daha önce metin editörleriyle ilgili deneyime sahip olmuşsunuzdur. Yine de yaratmanın o kadar basit olmadığı ortaya çıktı. Ancak, hazır bulunan birkaç kitaplık ile tepki olarak kendinizinkini hızla oluşturmaya başlayabilirsiniz:

DraftJS Facebook’taki ekip tarafından oluşturulan ve zengin metin düzenleyicileri oluşturmanıza olanak tanıyan bir kitaplıktır… Tahmin ettiniz: Tepki! Alışmak biraz zaman alır, ancak bir kez alışmaya başladığınızda, ilerlemeyi fark ettiğinizde devam etmek gerçekten motive edicidir.

twitter-tweet-clone-draftjs-tepki-javascript-example.jpg

8. Belgeler

Dokümantasyon yazmak kolay ve anlaşılır olmalıdır. Neyse ki, işleri programlı bir şekilde daha da kolaylaştırmaya yardımcı olan, tepkiyle desteklenen bazı araçlar var.

içine bakabilirsin belge eğer henüz yapmadıysanız.

Docusaurus, optimize edilmiş web sitelerini hızlı bir şekilde oluşturmak için bir api sağlayan ve sayfalarınızı yapılandırmaktan çok içeriğinize odaklanmanıza yardımcı olan bir tepki kitaplığıdır. Facebook’taki (şimdi Meta olarak bilinen) mühendisler tarafından geliştirilmiştir. İçeriğinizi markdown veya mdx olarak yazabilirsiniz ve docusaurus daha sonra sunulmaya hazır statik html dosyaları oluşturacaktır. Algolia gibi yanan hızlı bir arama bileşeni ile birleştirin ve çok mutlu bir kitleye ulaşacaksınız 🙂

Ayrıca birde şu var Hikaye kitabı, kullanıcı arabirimi bileşenlerini ve sayfalarını ayrı ayrı oluşturmak için harika bir tepki kitaplığı. Bu yaklaşımın güzel yanı, belgelenecek birden fazla bileşeniniz varsa, belge oluşturma konusunda da doğal olarak harika olmasıdır:

storybookjs küçük resmi

9. Mobil Uygulamalar

Günümüz teknolojisinde mobil uygulamalar, bilgi aramanın yanı sıra başkalarıyla iletişim kurmak için en popüler ve evrensel teknolojilerden biri haline geldi, bu yüzden bu günlerde hepsi öfke.

JavaScript topluluğunda çok farklı değil, çünkü geliştiricilerin tepki ile mobil uygulamalarda geliştirdiğini hala görebilirsiniz.

tepki-yerel Android ve iOS için yerel uygulamalar oluşturmak için tepki yazmanıza izin veren, Facebook’tan oluşturulan başka bir kitaplıktır.

Coinbase, Shopify, Discord ve hatta Walmart gibi büyük ölçüde bilinen şirketlerin tümü, geliştirme aşamasında yerel tepkiler kullanır.

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.