Basit Bir React Uygulamasının Oluşturulması ve Uygulama Yapısının İncelenmesi

Merhaba, ben Muzaffer. CheckBox Consultancy ekibinde developer olarak yer alıyorum.

React konulu eğitim serisinin ilk çıktısı olan bu yazıda; basit bir react uygulaması oluşturup, uygulamanın genel yapısını inceleyeceğiz. Ama ilk önce React nedir ile ilgili kısa bir bilgi vermek istiyorum.

React’ ın kendi web sitesini incelediğinizde sizi karşılayan cümlelerden biri “Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi” cümlesidir. Aslında bu cümle genel anlamda birçok şeyi anlatsa da ben yine de bu cümle üzerinden biraz daha açıklama yapmak istiyorum.

Evet, React bir JavaScript kütüphanesidir. Yani temelde React kullanırken Javascript kullanıyoruz. Zaten bunu ilerleyen uygulamalarımıza geçtiğimizde siz de fark edeceksiniz.

React bir framework değildir. Sadece kullanıcı arayüzünün (UI) işlenmesine (rendering) odaklanır ve diğer konuların projenin ihtiyaçlarına göre şekillenmesini bekler. Bu yüzden de size tam bir front-end çözümü sağlamaz ve kullanırken birçok kütüphaneye de ihtiyaç duyarsınız.

Aklıma ilk gelen örnek, routing mekanizması için kullanılan react-router-dom kütüphanesidir. React’ ın uygulama geliştirme sürecinde kullandığımız web sitesinde de bunun örneğini görmekteyiz.

React’ la kullanıcı arayüzleri geliştiririz. React, MVC (Model-View-Controller) mimarisindeki view katmanına karşılık gelmekte olup, kullanıcı arayüzleri oluşturabilmemizi sağlar. Ayrıca React SPA (Single Page Application) uygulamaları geliştirmenize olanak sağlar. Dakikalar içinde React uygulaması oluşturup sizde kullanmaya başlayabilirsiniz.

React’ dan kısaca bahsettiğimize göre artık uygulamamıza geçebiliriz.

React Uygulaması Oluşturma

Bir Single Page React uygulaması oluştururken yapacağımız işlem aslında çok basit. Terminalde aşağıdaki komutu çalıştırmamız yeterli.

npx create-react-app first-app

Ben terminal olarak Visual Studio Code ide’sinin yerleşik terminalini kullanacağım. Dilerseniz siz direkt command prompt kullanarak da yukarıdaki komutu çalıştırabilirsiniz.

Komutu çalıştırıp işlem tamamlandığında karşımıza şu şekilde bir proje yapısı çıkıyor:

React uygulamamız oluştu. Bu uygulamayı nasıl çalıştıracağız dediğinizi duyar gibiyim 🙂 Uygulamayı çalıştırmadan önce terminalde uygulamamızın bulunduğu root dizinine gitmemiz gerekli.

cd first-app

Daha sonrasında da oluşturduğumuz uygulamayı aşağıdaki komut ile çalıştıracağız.

npm start

Her şey yolunda gittiyse karşımıza bu şekilde bir ekran açılmalı:

Uygulama Yapısının İncelenmesi

Uygulamamızı artık çalıştırdık. Yeni bir React uygulamasında birçok dosya oluşmaktadır. Bu dosyalardan genel olarak bir uygulamada kullanılanları ve bilinmesi gerekli olanları anlatmaya çalışacağım.

Yeni bir React uygulaması oluşturduğumuzda genel olarak şu şekilde bir uygulama yapısı ile karşılaşmaktayız:

İlk olarak “public/index.html” dosyasından bahsetmek istiyorum. Bu dosya uygulamamızın şablon görevini üstlenmektedir. Tüm kullanıcı arayüzlerinin işlendiği .html dosyasıdır.

Bir diğer önemli dosyamız ise “src/index.js” dosyasıdır. Bu dosya ise Javascript dosyalarımızın giriş noktasıdır. Tüm .js dosyalarımızın işlendiği dosya olup, logical render süreci de buradan kontrol edilir.

Uygulamanın build olabilmesi için “public/index.html” ve “src/index.js” dosyalarının konumları ve isimleri değiştirilmemelidir.

Şimdi de node_modules klasöründen bahsetmek istiyorum.

Bu klasörde, uygulamamızda kullanacağımız tüm kütüphanelerin dosyaları bulunmaktadır. Az önce oluşturduğumuz uygulamamızda ek olarak bir kütüphane eklememiş olsak da, React uygulamamızın çalışabilmesi için hali hazırda gerekli olan kütüphaneler bulunmaktadır.

Bu duruma ek olarak web uygulamaları oluştururken projenin yapısına göre birçok farklı kütüphaneye de ihtiyaç duyabiliriz. Bu kütüphaneleri uygulamamıza eklediğimizde node_modules altına eklenmiş olacaklardır.

Son olarak package.json dosyasından bahsedeceğim. Aslında bu dosya React özelinde bir dosya değildir. Npm (Node Package Manager) kullandığımız her projede ve genel olarak da ana dizinde bulunur. Bu dosya projenin metadata bilgilerini içerir ve ayrıca uygulamamızda kullandığımız tüm kütüphaneleri de görebiliriz.

Evet arkadaşlar bugünkü uygulamamız bu kadar. Bir React uygulamasını nasıl oluşturabildiğimizi ve uygulama yapısını beraber incelemiş olduk. Elimden geldiğince bu seriye devam etmeye çalışacağım. Yazımızı beğendiyseniz, paylaşırsanız çok seviniriz.

Herkese sağlıklı, mutlu günler dileriz.

Muzaffer Özkara

Referanslar:
React – Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi

Create React App

What React Is and Why It Matters

Yazının medium.com’da yer alan yayını için tıklayabilirsiniz.