Windows'ta React Nasıl Kurulur? Eksiksiz Kılavuz

ReactJS, çok eski ön uç geliştirme tekniklerini önemli ölçüde değiştiren ücretsiz, açık kaynaklı bir JavaScript kitaplığıdır. 2013 yılında halka açılan React, Facebook'un şirket içi bir projesiydi. O zamandan beri React, çeşitli kuruluşlar ve girişimler tarafından benimsenmiştir. Yeterli JavaScript, HTML ve CSS bilgisine sahip ön uç geliştiricileri, hem web hem de mobil uygulamalar için etkileşimli kullanıcı arayüzleri oluşturabilir. ReactJS'nin en büyük avantajlarından biri bileşen tabanlı yaklaşımıdır. Kapsüllenmiş yeniden kullanılabilir bileşenleri kendi bağımsız durumları ile oluşturmak, karmaşık kullanıcı arayüzlerini basitleştirir.

İlginç bir şekilde, ReactJS'de yazdığımız her şey HTML gibi görünebilir, ancak öyle değildir. JSX, JavaScript XML dosyası olarak bilinir. Bu JSX, Belge Nesne Modeli'nde işlenen React "öğelerini" üretir. Layman'ın terimleriyle, JSX, HTML gövdesinin içine JavaScript mantığı yazmamıza izin verir. Böylece React'i çok daha basit ve anlaşılması kolay hale getiriyoruz.

İdeal kullanımını sağlamak için, React JS'yi Windows'a nasıl kuracağımızı öğrenmeye başlayalım .

React JS Windows'a Nasıl Kurulur?

Windows için Sistem Gereksinimleri

ReactJ'leri kullanmak oldukça zahmetsiz olsa da, React JS'nin Windows'a nasıl kurulacağı süreci oldukça sıkıcı olabilir. ReactJS açık kaynaklı bir proje olduğu için internetten yazılım indirmek kadar basit değil. Her şeyden önce, Windows'unuzda ReactJS kullanmanın bazı önkoşulları vardır.

1. Windows Sürümü: Windows XP, Windows 7(32/64 bit) veya üstü.
2. En az 4 GB RAM gereklidir.
3. Sabit sürücünüzde en az 10 GB disk alanı.
4. Chrome, Microsoft Edge, Firefox vb. bir internet tarayıcısı.
5. ReactJS'de yazılmış kodun hatalarını ayıklamak ve test etmek için bir editör.

Dünyanın En İyi Üniversitelerinden Çevrimiçi Yazılım Geliştirme Kursları Öğrenin. Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Node.js'yi İndirme ve Yükleme

Node.js, sisteminizde ReactJS kodunu çalıştırmanıza yardımcı olan sunucudur. ReactJS gibi, aynı zamanda açık kaynak kodludur. Node.js yükleyici, geliştiricilerin kendi modüllerini açık kaynak topluluklarında barındırmak ve yayınlamak için kullandıkları çeşitli düğüm modüllerini içeren NPM'yi (Düğüm Paket Yöneticisi) içerir. Böylece Düğüm, NPM kayıt defteriyle yan yana çalışır ve bu, NPM CLI kullanılarak herhangi bir paketin kurulmasını kolaylaştırır. Düğüm ayrıca, kolay kurulum için ReactJS uygulamasını web paketlerini kullanan tek bir pakette toplar.

Node.js'yi indirmek ve kurmak için adım adım izlenen prosedür şu şekildedir:

1. Node.js'yi yüklemek için https://nodejs.org/en/ adresine gidin .
2. Windows işletim sistemi sürümünüze bağlı olarak uygun bir yükleyici seçmelisiniz.
3. Node.js ana sayfası, işletim sisteminize bağlı olarak bir LTS sürümü önerir. Üzerine tıklamak indirmeyi otomatik olarak başlatacaktır.
4. Yükleyiciyi indirilenler klasöründe bulacaksınız. Yükleyiciyi çalıştırın.
5. Ekranda, Son Kullanıcı Lisans Sözleşmesini isteyecek bir kurulum sihirbazı görünecektir. Kuruluma devam etmek için hüküm ve koşulları kabul edin.
6. Ardından kullanıcı, yükleyicinin varsayılan yolu ile bir hedef klasör seçmelidir. Devam etmek için ileri'ye tıklayın.
7. Yükleyici daha sonra yüklenecek özellikleri gösterir ve ayrıca ortam yolu değişkenlerini komut istemine ayarlar. Kuruluma başlamak için ileri'ye tıklayın.
8. Kurulum tamamlandıktan sonra, komut istemini kullanarak sisteminizdeki Node.js'yi doğrulayın.
9. Yüklü Node.js sürümünü kontrol etmek için komut istemine “node -v” yazın.
10. Npm kurulumunu da doğrulamak için komut istemine “npm -v” yazın.

React'i Kurmak

Node.js kurulumundan sonra, iki teknik kullanarak React JS'yi Windows'a kurabiliriz :

• Web paketi ve Babel'i kullanma

1. Kök Klasör Oluşturma

ReactJS'yi kurmadan önce, komut isteminde aşağıdaki komutları kullanarak "reactFile" adında bir kök klasör oluşturun.

C:\Kullanıcılar\kullanıcı adı\Desktop>mkdir tepki Dosyası

C:\Kullanıcılar\kullanıcı adı\Desktop>cd tepki Dosyası

Dizini oluşturduktan sonra, komut isteminde aşağıdaki komutu kullanarak bir package.json dosyası oluşturun. Bir package.json dosyası, modüller oluşturmaya yardımcı olur.

C:\Kullanıcılar\kullanıcıadı\Desktop>reactFile> npm init

Komut istemi daha sonra modülle ilgili bilgi ister; “-y” seçeneğini seçerek atlayın.

2. React'i yükleyin ve tepki-dom

Aşağıdaki npm komutlarını kullanarak React ve tepki-dom paketlerini kurun ve “-save” komutunu kullanarak paketleri package.json dosyasına ekleyin.

C:\Users\username\Desktop>reactFile> npm install tepki –save

C:\Users\username\Desktop>reactFile> npm install tepki-dom –save

Ücretsiz Yazılım Geliştirme Kurslarımızı Keşfedin

3. Webpack'i kurun

Aşağıdaki komutları kullanarak webpack, webpack-dev-server ve webpack-cli'yi yükleyin.

C:\Users\username\Desktop>reactFile> npm webpack'i kurun webpack-dev-server webpack-cli –save

4. Babel'i yükleyin

Babel, JavaScript kodunu tarayıcının anlayabileceği bir şeye dönüştüren bir aktarıcıdır. Bu nedenle, Babel'i ve onu takip eden eklentileri, yani babel-loader, babel-preset-env, babel-preset-react ve html-webpack-plugin'i kurmak çok önemlidir.

Tüm babel eklentilerini aynı anda kurmak için aşağıdaki komutu kullanın.

C:\Users\username\Desktop\reactFile>npm babel-core babel-loader'ı kurun babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. ReactJS Dosyaları Oluşturun

Yükleme işlemini tamamlamak için, komut istemini kullanarak belirli dosyaları manuel olarak oluşturmalıyız.

C:\Users\username\Desktop\reactFile>null yazın > index.html

C:\Users\username\Desktop\reactFile>null yazın > App.js

C:\Users\username\Desktop\reactFile>nul yazın > main.js

C:\Users\username\Desktop\reactFile>nul yazın > webpack.config.js

C:\Users\username\Desktop\reactFile>nul yazın > .babelrc

6. Derleyici, Sunucular ve Yükleyicileri Kur

Bu ReactJS dosyaları "reactFile" klasörü içinde oluşturulduktan sonra, dağıtım sunucusunu 8001 numaralı bağlantı noktasında veya webpack.-config.js'de istediğiniz herhangi bir bağlantı noktasında ayarlayarak hazırlayabilirsiniz.

webpack-config.js dosyasında aşağıdaki kodu kullanın,

const yol = gerekli('yol');

const HtmlWebpackPlugin = gerekli('html-webpack-plugin');

modül.ihracat = {

giriş: './main.js',

çıktı: {

yol: path.join(__dirname, '/bundle'),

dosya adı: 'index_bundle.js'

},

geliştirici sunucusu: {

satır içi: doğru,

bağlantı noktası: 8001

},

modül: {

tüzük: [

{

test: /\.jsx?$/,

hariç tut: /node_modules/,

yükleyici: 'babel-yükleyici',

sorgu: {

ön ayarlar: ['es2015', 'tepki']

}

}

]

},

eklentiler:[

yeni HtmlWebpackPlugin({

şablon: './index.html'

})

]

}

7. index.html'yi ayarlama

index.html'nin içine, kök öğe olarak div id=”app” ile normal bir HTML kodu yazın ve ardından HTML gövdesine index_bundle.js komut dosyasını ekleyin.

İsteğe Bağlı Yazılım Geliştirme Becerileri

8. App.js ve main.js'yi kurma

Bir sınıf veya işlev oluşturmak için React bileşenini App.js içine yazın. Oluşturmak istediğiniz metni, derlendikten sonra tarayıcıda görünecek olan bileşenin içine ekleyin. Ardından, sonuçların tarayıcıda görünmesi için bileşeni main.js içindeki kök Uygulama öğemize aktarın.

Bir “.babelrc” dosyası oluşturun ve aşağıdaki kod satırlarını ekleyin,

{

“ön ayarlar”:[“ortam”, “tepki”]

}

9. İçeriğin Web Sayfasında Görüntülenmesi

Kurulum nihayet tamamlandı ve komut istemine aşağıdaki komutu yazdığınızda sunucu çalışmaya başlayacak.

C:\Users\username\Desktop\reactFile>npm start

Enter tuşuna basar basmaz, tarayıcı size bileşenin içinde oluşturduğunuz mesajı gösterecektir.

• create-react-app komutunu kullanma

1. create-react-app'i kurun

Komut istemini açın ve create-react-app'i yüklemek için aşağıdaki kodu yazın.

C:\Users\username\Desktop>npx create-react-app my-app

Bu komut, gerekli tüm dosya ve klasörleri masaüstünüzün "uygulamam" klasörüne yükler. Bu tek satırlık kod, React'in sisteminize kurulumunu birkaç dakika içinde tamamlar.

2. Sunucuyu Çalıştırın

Komut istemine gidin ve yazın

C:\Kullanıcılar\kullanıcı adı\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>uygulamam> npm başlangıcı

React projeniz, projenizi mevcut bağlantı noktasında barındıran localhost'un yardımıyla tarayıcınızda çalışıyor.

Popüler Yazılım Mühendisliği Kurslarımızı keşfedin

Çözüm

ReactJS, piyasaya sunulduğundan bu yana ön uç geliştirme oyununu değiştirdi ve en popüler açık kaynaklı JavaScript kitaplıklarından biri haline geldi. Meta, Netflix ve Slack gibi birçok şirket ReactJS kullanıyor. En büyük avantajlardan biri, web sayfasındaki değişiklikleri işlemek için bileşenlerin yeniden kullanılabilirliğidir. Birkaç React uygulaması, Azure DevOps kullanılarak Azure Web App'e dağıtılır. Bu, şu anda BT endüstrisinde en çok aranan becerilerden biridir.

Bir React geliştiricisiyseniz, IIIT Bangalore'dan devOps'ta upGrad'ın Gelişmiş Sertifika Programı aracılığıyla Azure DevOps'u tanıyarak becerilerinizi geliştirebilirsiniz . Kurs, bir mülakat hazırlık kılavuzu ile birlikte 250 saatten fazla öğrenme modülü sunar. Ayrıca, size endüstrinin beklentilerine ilişkin net bir yol haritası verebilecek DevOps uzmanlarıyla kariyer danışmanlığı oturumlarına katılacaksınız. Kursun sonunda bir sertifika ve IIITB mezun statüsü alırsınız, bu da onu özgeçmişinize istisnai bir katkı yapar!