React Dosyalarını Tanıyalım, JSX Püf Noktaları

Merhabalar 🙂

Bu yazımda bir React projesinde geliştirme yaparken sıklıkla kullanacağımız dosyaların aslında tam anlamı ile ne işe yaradığı ile ilgili derlemiş olduğum bilgileri sizle paylaşacağım. Ek olarak JSX Püf noktalarına değineceğim.

Haydi Başlayalım !

Package.json

  • npm dosyalarını yönetmek için kullanılan bir Manifesto dosyası gibi davranmaktadır.
  • Bu alanda bakılması gereken iki önemli alan ; “dependencies” ve “scripts” kısımlarıdır.
  • Dependencies; Javascript projelerinin bağımlılıklarını gösteren kısımdır.
  • Şu anda aşağıdaki ekran görüntüsünde de göreceğiniz gibi ; oluşturmuş olan projede 6 tane bağımlılık yer almaktadır. Bunlar ; react, react-dom,react-scripts, @testing-library/jest-dom, @testing-library/react ve @testing-library/user-event.
  • React-scripts bağımlılığı aslında Script alanındaki Script dosyalarının çalıştırılmasını sağlayan bir yapıdır.
  • Örneğin; “npm run start” yazıp proje çalıştırılma istendiğinde, “react-scripts-start” çalışıtırılır ve bu sayede aslında Serverbaşlatılmış olur.
  • Npm-run-build ise ; eğer siz bu projenizi canlıya çıkaracaksınız; bu komut, tüm Javascript,CSS dosyalarını tek bir bundle haline dönüştürmektedir. Bunu da Webpack aracılığı ile yapmaktadır.

Index.js, App.js

  • React kütüphanesi içerisinde React’i dahil etmiştir. Ek olarak React-DOM kütüphanesi içerisinden React-DOM’u dahil etmiştir.
  • CSS dosyasını; “index.css” alanından dahil etmiştir.
  • Create React App olarak projeyi oluşturduğumuzda ; default olarak gelen Component App Component’idir. Görüntüyü oluşturan, JSX formatında render eden Component “AppComponent”tir.
  • Aşağıda da Root element olarak seçilmiş ve AppComponent’i bu alana render edilip, JSX formatı bu alanda oluşturulmuştur.
  • Aşağıdaki alanda Component Class’ı dahil edip extends ile Component’ı çağırınca otomatik olarak bir Component oluşturmuştur.
  • Her bir Component oluşturulurken Component’ten extends edilmesi gerekmektedir.( Tabiki Class ise)
  • Aşağıdaki alandaki gibi ; eğer Class yerine Function bir yapıya sahip ise o zaman; Extends edilmesine gerek kalmaz.
  • Class Component’i oluşturulurken Extend etmek yani miras almak şarttır.
  • Class içerisindeki Render fonkisyonu; eğer JSX formatında olacak ise olmazsa olmazlardandır.
  • Render fonksiyonu return ile JSX formatı dönmektedir.

Peki JSX formatı neydi ?

“Javascript içerisinde HTML yazmayı sağlayan bir formattı. JSX dostluktu, JSX emekti.” 🙂

  • App.js alanında yapılan bu işlemler; aşağıdaki gibi index.js alanında Render edilir ve sayfa oluşmuş olur.

BONUS: JSX Püf noktaları Özet

  • JSX formatı Javascript Extension’udur. Javascript içerisinde HTML kullanılmasını sağlanır.
  • App Component’i içerisinde ; Render fonksiyonu bulunmaktadır. Bu fonksiyon AppComponent sayfaya yerleştirilirken çağırılan bir fonksiyondur.
  • Render fonksiyonu Return yardımı ile JSX formatını dönmektedir.
  • JSX formatı sadece bir parent element dönebilir. Genel olarak aşağıdaki gibi; bir tane div dönülür.
  • Eğer birden fazla div dönmeye çalışırsanız; hata ile karşılacaksınız.

Görüşmek Üzere :))

Yararlandığım Eğitim

Sıfırdan ReactJs ve Context Api — Mustafa Murat Coşkun

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir