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

npm init react-app my-app

npx

npx create-react-app my-app

Yarn

yarn create react-app my-app

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 start

http://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-app

2.Manuel Kurulum

Yükleme next, reactve react-domprojenizde:

npm install next react react-dom
# or
yarn add next react react-dom

 package.json dosyasını açın ve aşağıdaki kodu ekleyin : 

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

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ışır

pagesProjenizin 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 HomePage

Uygulamanı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;

npx nano-react-app my-app

2. TypeScript için; 

npx nano-react-app my-app --ts

Uygulamayı ç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 ; 

npm install -g nwb

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:

npm install -g gatsby-cli

Yeni bir site oluşturun:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Dizinleri site klasörüne değiştirin:

cd gatsby-site

Geliş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.