Yeni bir React Uygulaması Oluşturun

En iyi kullanıcı ve geliştirici deneyimi için tümleşik araç kullanın.

Bu sayfa, görevlere yardımcı olan bazı popüler araçları anlatır.

• Birçok dosya ve bileşene ölçeklendirme.
• Npm’den üçüncü parti kütüphanelerin kullanımı.
• Yaygın hataların erken fark edilmesi.
• JS ve CSS’in geliştirme anında canlı olarak güncellenmesi.
• Çıktının canlı ortam (production) için optimize edilmesi.

Bu sayfada tavsiye edilen araçlar başlangıç için ayarlama gerektirmez.

Bir Araca İhtiyacınız Olmayabilir

Eğer yukarıda anlatılan sorunlarla karşılaşmazsanız veya henüz kendinizi JavaScript araçları kullanmak konusunda rahat hissetmiyorsanız, React’i yalın <script> etiketi ile HTML sayfasına eklemek (isterseniz JSX ile birlikte) seçeneğini aklınızda bulundurun.

Bu aynı zamanda, hâlihazırda var olan web sitesine React’i entegre etmenin en kolay yoludur. Eğer yardımcı olabileceğini düşünüyorsanız, her zaman daha büyük bir araç ekleyebilirsiniz!

Tavsiye Edilen Araçlar

React takımı öncelikli olarak şu çözümleri öneriyor:

• Eğer React öğreniyorsanız veya yeni bir tek sayfa uygulama oluşturuyorsanız, Create React App kullanın.
• Eğer Node.js ile sunucu tarafında işlenen bir sayfa geliştiriyorsanız, Next.js‘i deneyin.
• Eğer sabit içerikli bir web sitesi, geliştiriyorsanız, Gatsby‘yi deneyin.
• Eğer bileşen kütüphanesi geliştiriyor veya var olan bir kod temeli ile entegre ediyorsanız, Daha esnek araçlar‘ı deneyin.

Create React App

Create React App, React öğrenmek için rahat bir ortamdır ve React ile yeni bir tek sayfa uygulama geliştirmeye başlamanın en iyi yoludur.

En son JavaScript özelliklerini kullanabilmeniz için geliştirme ortamınızı kurar, güzel bir geliştirici deneyimi sağlar ve uygulamanızı canlı ortam (production) için optimize eder. Bilgisayarınızda Node >= 14.0.0 ve npm >= 5.6 sürümlerinin yüklü olması gerekir. Bir proje oluşturmak için, aşağıda yer alan komutları çalıştırın.

npx create-react-app my-app
cd my-app
npm start

Not

İlk satırdaki npx bir harf hatası değildir. — npm 5.2+ ile gelen bir paket çalıştırma aracıdır.

Create React App, backend mantığı veya veri tabanlarını idare etmez; sadece frontend geliştirme düzenini oluşturur, yani bunu istediğiniz herhangi bir backend ile kullanabilirsiniz. Arka planda, Babel ve webpack kullanır, fakat bunlar hakkında hiçbir şey bilmeniz gerekmiyor.

Ürün yayınlamaya hazır olduğunuzda, npm run build komutunu çalıştırmak build klasöründe uygulamanızın optimize edilmiş bir derlemesini oluşturur. Create React App hakkında daha fazlasını kendi README’sinden ve kullanıcı rehberinden öğrenebilirsiniz.

Next.js

Next.js, React ile statik ve sunucu tarafından işlenen uygulamalar geliştirmek için popüler ve hafif bir çatıdır. Hazır olarak stillendirme ve yönlendirme çözümleri içerir, ve sunucu ortamı olarak Node.js kullandığınızı varsayar.

Next.js’i resmi rehberinden öğrenin.

Gatsby

Gatsby, React ile statik web siteleri geliştirmenin en iyi yoludur. React bileşenlerini kullanmanıza olanak sağlar, fakat en hızlı yükleme süresini garanti etmek için önceden işlenmiş HTML ve CSS çıktılarını verir.

Gatsby’yi resmi rehberinden veya yeni başlayanlar galerisinden öğrenin.

Daha Esnek Araçlar

Aşağıdaki araçlar daha fazla esneklik ve seçenek sunmaktadır. Bunları daha tecrübeli kullanıcılar için öneriyoruz:

• Neutrino; webpack‘in gücünü ön ayarların sadeliği ile birleştirir, React uygulamaları ve React bileşenleri için bir ön ayar da içerir.
• Nx, yerleşik olarak React, Next.js, Express ve daha fazlası için desteğe sahip, tam donanımlı bir monorepo oluşturma aracıdır.
• Parcel; React ile çalışan, hızlı, ayarlama gerektirmeyen bir web uygulama paketleyicisidir.
• Razzle; herhangi bir yapılandırma gerektirmeyen ancak Next.js’e göre daha fazla esneklik sunan, bir sunucu tarafında işleme çatısıdır.

Sıfırdan Bir Araç Zinciri Oluşturmak

Bir JavaScript derleme araç zinciri tipik olarak aşağıdakilerden oluşur:

• Bir paket yöneticisi, Yarn veya npm gibi. Bu, uçsuz bucaksız üçüncü parti paket ekosisteminden faydalanmanıza ve bunları kolayca yüklemenize ve güncellemenize olanak sağlar.
• Bir paketleyici, webpack veya Parcel gibi. Bu, modüler kod yazmanıza ve yazdığınız kodları yükleme zamanını optimize etmek için küçük parçalar halinde beraber paketlemenize olanak sağlar.
• Bir derleyici Babel gibi. Bu, yazdığınız modern JavaScript kodunun eski tarayıcılarda da çalışmasını sağlar.

Eğer sıfırdan kendi JavaScript araç zincirinizi kurmayı tercih ederseniz, bazı Create React App fonksiyonelliklerini yeniden oluşturan şu rehbere bir göz atın.

Özel araç zincirinizin ürün için doğru bir şekilde kurulduğunu garanti altına almayı unutmayın.