SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

ReactJS Ders 2: Merhaba Dünya

ReactJS ders serimizde ilk uygulamamızı yapalım.

Bir önceki derste ReactJS Kurulumunu aktarmıştık. Şimdi ise basit bir uygulama oluşturup uygulamımızı çalıştıralım.
Öncelikle çalışma yapacağımız dizine CMD veya POWERSHELL ile gidelim. Benim çalışma klasörüm şu şekilde
F:\calisma-masasi\reactjs
Çalışma Alanımız ve Proje Oluşturma Komutları
ReactJS Ders 2: Merhaba Dünya

Tabii proje oluştururken isimlendirme uyarısı da alabiliriz. Örneğin "Büyük harf" kullanımı uyarısı gibi.
Proje Oluşturma Uyarısı
ReactJS Ders 2: Merhaba Dünya

React bize uyarıda bulundu bu durumda proje adında düzeltme yaparak çalışmamıza devam edelim.
Npm Komutu
npx create-react-app reactprojesi

Projemiz kuruldu, kurulan projenin klasör yapısını paylaşalım.
Proje Klasör Yapısı
ReactJS Ders 2: Merhaba Dünya

Visual Studio Code ile projemizin açıp VS Code içerisindeki görünümünü paylaşalım.
VS Code Klasör Yapısı
ReactJS Ders 2: Merhaba Dünya

ReactJS klasör yapısına aşina olduktan sonra ReactJS'in çalışma mantığını anlatmaya çalışalım.
ReactJS Çalışma Mantığı
ReactJS Ders 2: Merhaba Dünya

Mantığını birkaç cümle ile aktarmaya çalışırsak
index.js içerisindeki kod bloğunda index.html içindeki id="root" olan elemente erişim sağlanır. Erişilen elemente <App /> koduyla App.js'nin içeriği getirilerek render işlemi yapılır.
Projemizi çalıştırmak için VS Code içerisinde terminal açıp
Npm Komutu
npm start
komutunu çalıştıralım.
ReactJS Projemizin Çalışma Zamanı
ReactJS Ders 2: Merhaba Dünya

Yorumlar

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum