Gereksinimler

• Düğüm ve makinenizde kurulu bir IDE.

React, 2013 yılında Facebook tarafından oluşturulmuş, açık kaynaklı, ön uç bir JavaScript kitaplığıdır. React, web uygulamalarını minimum kodlama ile daha hızlı ve verimli hale getiren en iyi JavaScript kitaplıklarından biridir.

Bu makalede, React'in temellerini ve bir tepki uygulamasının nasıl oluşturulacağını anlayacağız.

Neden Tepki? ❗️ ❗️

• Öğrenmesi daha kolay - Reaksiyon ünlü olduğundan ve birçok endüstri tarafından kullanıldığından, tepki üzerine çok sayıda iyi belge, blog, makale ve öğretici var. Bu yüzden kendi kendine öğrenmesi daha kolaydır.
• JSX - JSX'e sahip olmak, kodlamayı çok daha kolay hale getiren HTML ve JavaScript'in bir birleşimidir.
• Yeniden kullanılabilir bileşenler - Tepki olarak kodumuzu daha küçük boyutlu bileşenlere bölebilir ve bunları tekrar tekrar kullanabiliriz. Kod tabanını azaltmaya yardımcı olacaktır.

Makinenizde Düğüm >= 10.16 ve npm >= 5.6 olması gerekir .

Ardından komut satırını (CLI) açın ve aşağıdakileri create-react-app kullanarak global olarak makinenize kurun:

npm install -g create-react-app

Şimdi bir tepki uygulaması oluşturmak için 'İlk Tepki' adlı bir klasör oluşturuyorum ve bu klasörde terminali açıyorum. Ardından create-react-app <project name> terminali yazın. Proje adı olarak herhangi bir isim verebilirsiniz. Ancak proje adının büyük harf içermediğinden emin olun, aksi takdirde tepki hata verecektir.

Bu create -react-app, bir React uygulamasının şablonunu oluşturacaktır.

Ayrıca create-react-app'i yüklemeden doğrudan kullanabilirsiniz. Kullanım aşağıdaki komutu kullanabilir:

npx create-react-app <project name>

npx, npm içinde bulunan bir paket çalıştırıcı komutudur.

Şimdi proje dizinine gitmemiz gerekiyor. Tipcd <project name>

Ardından tepki uygulama türünü çalıştırmak içinnpm start

create-react-app örnek bir şablon oluşturduğu için, örnek uygulamayı çalıştırabilir ve görüntüleyebiliriz.

Projeyi başarıyla çalıştırdıktan sonra böyle bir şey elde edeceksiniz. Reaksiyon uygulamasını tarayıcıda otomatik olarak başlatır veya uygulamayı açmak için tarayıcınıza manuel olarak yazabilirsiniz http://localhost:3000/ .

Proje dizininin kısa açıklaması

VSCode kullanıyorsanız, code . projeyi VSCode'da açmak için proje dizinini yazmanız yeterlidir.

package.json - Bu dosya, proje için gereken bağımlılıkları ve komut dosyalarını içerir.

package-lock.json - Bu, bağımlılıklarımızın tutarlı bir şekilde yüklenmesini sağlar

.gitignore - Projeyi GitHub'a eklerken göz ardı etmemiz gereken dosyalar. GitHub'a eklemek istemediğimiz dosyaları manuel olarak da ekleyebiliriz.

README.md - Reaksiyon uygulamasıyla ilgili ayrıntılar (nasıl çalıştırılacağı, oluşturulacağı vb.)

node_modules - Kurulu olan tüm bağımlılıklarımız.

public - tepki örnek şablonunda kullanılan simgeler ve resimler , index.html - Projedeki tek HTML sayfası.

src - Geliştirme için en çok kullandığımız klasör.

i ndex.js - Kök bileşeni (Uygulama) ve DOM öğesini belirtin. Bu, daha önce gördüğümüz index.html ile bağlantılıdır.

App.js - Tarayıcıda görüntülenen HTML'den sorumludur. Tarayıcıda gördüğümüz görünümü temsil eder.

CSS dosyaları - CSS tasarımlarını içerir.

Bilmeniz Gereken Temel Kavramlar

JSX

JSX, XML/HTML benzeri bir sözdizimidir. JavaScript'e XML/HTML sözdizimi ekler.

Bileşen

Bir tepki uygulamasında bileşenler ana yapı taşlarıdır. Bir grup bileşen bir tepki projesi yapar.

Burada bu tek sayfanın 5 bileşen kullanılarak oluşturulduğunu görebilirsiniz. (Üstbilgi Dünyası, Ülke, Grafik ve Altbilgi). Üstbilgi ve altbilgiyi diğer sayfalarda da yeniden kullanabiliriz.

2 tip bileşen vardır.

• Sınıf Bileşeni
• Fonksiyonel Bileşen

Proplar değişmezdir; bu, özellikleri/verileri bir bileşenden diğerine aktararak bileşenleri dinamik hale getirmenin bir yoludur. Sadece bazı bilgileri ana bileşen tarafından alt bileşene iletmektir.

Durum

Durum, her sınıf bileşeninde, bilgileri dinamik olarak saklama yeteneğine sahip ve bileşen tarafından kontrol edilen bir değişkendir. Bu bir bileşen için özeldir.

Referanslar

• https://reactjs.org/docs/create-a-new-react-app.html