React'e başlamak göründüğü kadar kolay değildir, birden fazla framework ve tool zinciri mevcuttur ve doğru olanı seçmek önemlidir. Bu makalede, size bir react uygulaması oluşturmak için bazı basit ve en iyi frameworkleri göstereceğiz.
Hazırsak başlalım;
1. Create-React-App
Create-React-App , bir açık kaynak olan ve katkıda bulunan Facebook tarafından tasarlanmıştır. Yeni başlayanlar ve profesyoneller için basit ve kolay bir ortam sağlar ve herhangi bir kurulum yapılandırması gerektirmez. create-react-app, uygulamayı çeşitli şablonlarla kurmamızı sağlayan bir CLI ile birlikte gelir. Uygulamayı oluşturmak için aşağıdaki komutları kullanabilirsiniz.
npm
npx
Yarn
Bir şablon seçmek
Artık isteğe bağlı --template [template-name]olarak oluşturma komutuna ekleyerek bir şablondan yeni bir uygulama başlatabilirsiniz.
Bir şablon seçmezseniz, projenizi temel şablonumuzla oluşacaktır.
Şablonlar her zaman cra-template-[template-name] formatta adlandırılır, ancak yalnızca [template-name] to oluşturma komutunu sağlamanız gerekir.
npx create-react-app my-app --template [template-name]Npm'de “cra-template- *” arayarak mevcut şablonların bir listesini bulabilirsiniz .
Uygulamayı çalıştırmak için şunu kullanın:
npm start // or yarn starthttp://localhost:3000 adresiyle tarayıcıda açılacaktır.
2. Next.js
Next.js, React kullanarak sunucu tarafı oluşturma ve statik web uygulamaları oluşturmak için tasarlanmış bir JavaScript çerçevesidir. Başlamak için herhangi bir kurulum yapılandırmasına ihtiyaç duymaz ve ayrıca typcript'i de destekler. Çok popüler bir çerçevedir ve Netflix Jobs, Nike vb. Gibi büyük şirketler tarafından kullanılır. Next.js ile bir uygulama oluşturmak için aşağıdaki adımları kullanın.
Next.js kullanarak bir uygulama oluşturmanın iki yolu vardır
1. Create Next App CLI (Otomatik kurulum)
npx create-next-app # or yarn create next-app2.Manuel Kurulum
Yükleme next, reactve react-domprojenizde:
package.json dosyasını açın ve aşağıdaki kodu ekleyin :
Bu komut dosyaları, bir uygulama geliştirmenin farklı aşamalarına atıfta bulunur:
dev- next devGeliştirme modunda Next.js'yi başlatan çalışır build- next buildÜretim kullanımı için uygulamayı oluşturan çalışır start- next startNext.js üretim sunucusunu başlatan çalışırpagesProjenizin içinde bir dizin oluşturun .
./pages/index.js dosyanızı aşağıdaki içerikleri ekleyin :
function HomePage() { return <div>Welcome to Next.js!</div> } export default HomePageUygulamanızı geliştirmeye başlamak için npm run dev veya yarn dev komutunu çalıştırın.
Bu, geliştirme sunucusunu başlatır : http://localhost:3000
3. Nano-React-Uygulaması
Nano-react-app , create-react-app'in yerine geçer . Webpack yerine sıfır yapılandırmalı Parcel kullanır. Create-react-app yapısını en aza indirmek için tasarlanmıştır. Aşağıdaki komutları kullanarak bir uygulama oluşturmak için.
1. JavaScript için;
2. TypeScript için;
npx nano-react-app my-app --tsUygulamayı çalıştırmak için şağıdaki komut satırını kullanabilirsiniz;
npm startŞimdi tarayıcınızdan uygulama alanını açarak görüntüleyebilirsiniz : http://localhost:3000
4. Nwb
Nwb , yayınlanabilir React bileşenleri ve uygulamaları oluşturmak için harika bir çerçeve tasarımıdır. Sıfır yapılandırma geliştirme kurulumu sunar, ancak aynı zamanda ekstra işlevsellik için yapılandırma ve eklenti modüllerini de destekler. Bir uygulama oluşturmak için aşağıdaki komutu kullanabilirsiniz ;
5. Gatsby
Gatsby , web siteleri ve uygulamalar oluşturmak için açık kaynaklı bir çerçevedir. Geliştiricilerin web sitelerini çok hızlı bir şekilde oluşturmasına izin veren 2000'den fazla eklentiye sahiptir. Aşağıdaki komutları kullanarak uygulamayı oluşturmak için.
Gatsby CLI'yi yükleyin:
Yeni bir site oluşturun:
gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-worldDizinleri site klasörüne değiştirin:
cd gatsby-siteGeliştirme sunucusunu başlatın:
gatsby developŞimdi tarayıcınızdan uygulama alanını açarak görüntüleyebilirsiniz : http://localhost:3000
Sonuç
React'e başlamak için 5 basit ve en iyi yolu gördük. Tüm bu frameworklerin kendi artıları ve eksileri vardır, ihtiyaçlarımıza bağlı olarak doğru frameworkü seçmek önemlidir.