Yeni bir React projesi başlatmak, pek çok derleme aracı nedeniyle çok karmaşıktır. Tek bir React kodu satırı yazmadan önce birçok bağımlılığı, konfigürasyon dosyasını ve Babel, Webpack, ESLint gibi diğer gereksinimleri kullanır. Create React App CLI aracı tüm bu karmaşıklıkları ortadan kaldırır ve React uygulamasını basitleştirir. Bunun için NPM kullanarak paketi kurmanız ve ardından yeni bir React projesi almak için birkaç basit komut çalıştırmanız gerekiyor.

uygulama oluştur-tepki React projesini çok hızlı bir şekilde oluşturup çalıştırmanıza olanak tanıyan, yeni başlayanlar için mükemmel bir araçtır. Manuel olarak herhangi bir konfigürasyon gerektirmez. Bu araç aşağıdaki gibi gerekli tüm bağımlılıkları tamamlıyor: Web paketi , Babil React projesinin kendisi için ve ardından yalnızca React kodunu yazmaya odaklanmanız gerekir. Bu araç, geliştirme ortamını kurar, mükemmel bir geliştirici deneyimi sağlar ve uygulamayı üretim için optimize eder.

Gereksinimler

Create React App'in bakımı şu şekilde yapılır: Facebook ve herhangi bir şey üzerinde çalışabilir platformu , örneğin macOS, Windows, Linux vb. Create-react-app kullanarak bir React Projesi oluşturmak için aşağıdakileri sisteminize yüklemiş olmanız gerekir.

1. Düğüm sürümü >= 8.10
2. NPM sürümü >= 5.6

Güncel sürümünü kontrol edelim Düğüm Ve NPM Sistemde.

Komut isteminde Düğüm sürümünü kontrol etmek için aşağıdaki komutu çalıştırın.

 $ node -v 

Komut isteminde NPM sürümünü kontrol etmek için aşağıdaki komutu çalıştırın.

 $ npm -v 

Kurulum

Burada React'ı kullanarak nasıl kurabileceğimizi öğreneceğiz. MKK alet. Bunun için aşağıda verdiğimiz adımları takip etmemiz gerekiyor.

React'ı yükleyin

Aşağıdaki komutu kullanarak npm paket yöneticisini kullanarak React kurulumunu yapabiliriz. React kurulumunun karmaşıklığı konusunda endişelenmenize gerek yok. Create-react-app npm paket yöneticisi, React projesi için gereken her şeyi yönetecektir.

 C:Usersjavatpoint> npm install -g create-react-app 

Yeni bir React projesi oluşturun

React kurulumu başarılı olduktan sonra create-react-app komutunu kullanarak yeni bir React projesi oluşturabiliriz. Burada projem için 'reactproject' adını seçiyorum.

 C:Usersjavatpoint> create-react-app reactproject 

NOT:Yukarıdaki iki adımı kullanarak tek bir komutta birleştirebiliriz.npx. Npx, npm 5.2 ve üzeri sürümlerle birlikte gelen bir paket çalıştırma aracıdır.

 C:Usersjavatpoint> npx create-react-app reactproject 

Yukarıdaki komutun React'ı kurması ve 'reactproject' adında yeni bir proje yaratması biraz zaman alacaktır. Artık terminali aşağıdaki gibi görebiliriz.

Yukarıdaki ekran sistemimizde React projesinin başarıyla oluşturulduğunu anlatıyor. Şimdi tarayıcıdaki uygulamaya erişebilmemiz için sunucuyu başlatmamız gerekiyor. Terminal penceresine aşağıdaki komutu yazın.

 $ cd Desktop $ npm start 

NPM, sunucuyu başlatan ve uygulamaya varsayılan sunucu http://localhost:3000 üzerinden erişen bir paket yöneticisidir. Şimdi aşağıdaki ekranı alacağız.

Daha sonra projeyi Kod düzenleyicide açın. Burada Visual Studio Code kullanıyorum. Projemizin varsayılan yapısı aşağıdaki görseldeki gibidir.

React uygulamasında kök dizinde birçok dosya ve klasör bulunur. Bunlardan bazıları aşağıdaki gibidir:

node_modules:React kütüphanesini ve ihtiyaç duyulan diğer üçüncü taraf kütüphanelerini içerir.halk:Uygulamanın kamu varlıklarını tutar. React'ın uygulamayı varsayılan olarak öğeye bağlayacağı index.html dosyasını içerir.kaynak:App.css, App.js, App.test.js, index.css, index.js ve serviceWorker.js dosyalarını içerir. Burada, React'te çıktı ekranının görüntülenmesinden her zaman App.js dosyası sorumludur.package-lock.json:Npm paketinin node_modules ağacını veya package.json dosyasını değiştirdiği tüm işlemler için otomatik olarak oluşturulur. Yayınlanamaz. Üst düzey paket dışında başka bir yer bulursa dikkate alınmayacaktır.package.json:Proje için gerekli olan çeşitli meta verileri tutar. NPM'ye, projenin tanımlanmasına ve projenin bağımlılıklarının ele alınmasına olanak tanıyan bilgi verir.README.md:React konuları hakkında okunacak belgeleri sağlar.

React Ortam Kurulumu

Şimdi aç src >> Uygulama.js Dosyayı açın ve ekranda görüntülemek istediğiniz değişiklikleri yapın. İstenilen değişiklikleri yaptıktan sonra; kaydetmek dosya. Dosyayı kaydeder kaydetmez Webpack kodu yeniden derler ve sayfa otomatik olarak yenilenir ve değişiklikler tarayıcı ekranına yansıtılır. Artık istediğimiz kadar bileşen oluşturabiliriz, yeni oluşturulan bileşeni içeri aktarabiliriz. App.js dosya ve bu dosya ana dosyamıza dahil edilecek indeks.html Webpack tarafından derlendikten sonra dosya.

Daha sonra üretim modu için proje yapmak istiyorsak aşağıdaki komutu yazın. Bu komut, en iyi duruma getirilmiş üretim yapısını oluşturacaktır.

 $ npm build