Web geliştirme dünyasında, hızlı ve etkili projeler oluşturmak isteyenler için React, güçlü bir araçtır. Bu yazıda, React’ı kurarak ilk web uygulamamızı geliştirecek, bileşenler oluşturacak ve projemizi build ederek gerçek bir sürüme dönüştüreceğiz.
React, yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Bu sayede bir projede sürekli kullanılan bir tasarım parçasını tekrar tekrar kod yazmaktan kurtulup, bileşenlerinizi dinamik bir şekilde oluşturabilirsiniz.
React-DOM sayesinde projeler hızlı ve performans kaybı olmadan çalışır. Büyük miktarda veri ile çalışabilir, projelerinizi kolayca ölçeklendirebilir ve duyarlı, akıcı web siteleri geliştirebilirsiniz.
Ağaç yapısı sayesinde hata ayıklama işlemleri kolaylaşır. Alt bileşenlerdeki hatalar üst bileşenleri etkilemez, bu da projelerinizi daha rahat geliştirmenize olanak tanır.
JSX kullanımı, kod enjeksiyonlarına karşı dayanıklılık sağlar. Hem sunucu hem de istemci tarafında yönetim süreçleri kolaydır ve SEO açısından avantaj sunar.
Bu yazımızda ise Linux üzerinde çalışmalarımızı gerçekleştireceğiz. Kurulum aşamalarımızı ise Linux’a göre gerçekleştireceğiz. Siz bilgisayarınızda yüklü olan işletim sistemi için uygun olan sürümü kullanabilirsiniz, ben Linux kullanan bir kişi olarak bu yazıda Linux’u kurulum ortamı olarak tercih ettim.
İlk olarak sistemimizi güncel tutmamız gerektiriyor.
Sonra ise kurulumu yapalım
Daha sonra Node Packet Managment kurulumu yapmamız gerekiyor. Bu paket özellikle NodeJS üzerinde yapacağımız tüm çalışmalarımızda gerekli modüllerin eklenmesi, kaldırılması gibi özellikleri sağlayacaktır.
Şimdi ise devam edelim. Şimdi ise NodeJS sürümümüze bakalım
Burada ise 18.9.0 sürümünü kurduk. Bu sürüm ise kullandığımız Linux dağıtımının depo sunucusundaki eşleşen bilgilere göre kuruldu. Bundan sonraki çalışmalarımızı ise bu sürüme göre kuracağız. En güncel sürüme ise NodeJS resmi web sitesinden ulaşabilirsiniz.
Ayrıca NPM sürümüne bakalım.
Şimdi ise React kurulumu yapmaya başlayalım
Burada yer alan bilgilere göre kurulum yapabiliriz. Genel olarak React’ı bir freamwork ile kullanmamızı önermektedir, resmi internet sitesini incelediğimizde biz doğrudan freamwork olmadan kuracağız. Biz kurulumu ise manuel olarak gerçekleştireceğiz.
Biz burada işletim sistemimize global olarak kurulum yapacağız. Bu sayede istediğimiz yerden npm kullanarak bir React uygulaması başlatabileceğiz. Burada ise @ karakterinden sonra latest yazarak en son sürümü yüklemiş olacağız.
Şimdi ise klasörümüze giriş giriyoruz ve projemizi başlatıyoruz. Uygulamamızı başlatacağız. Burada bizi yerel cihazımızda NPM ile birlikte bir sunucu başlattı. Port bilgisi ise otomatik olarak 3000 olarak ayarlandı.
Tarayıcımızın adres çubuğuna localhost:3000 veya http:localhost:3000 yazdığımızda karşımıza react ekranı gelecektir.
Şimdi WEB uygulamamız hazır. Yapmamız gereken ise src klasörü içindeki App.js ile işlem yapmak.
Biz burada ise App fonksiyonunu tamamen sileceğiz ve aşağıdaki fonksiyonu yazacağız.
Yukarıda ise HSD fonksiyonunu React’ın default olarak tanıması ve kolayca dışa aktarılabilmesi için export özelliğini kullandık. Eğer App.js içine başka bir fonksiyon yazdığımızı düşünürsek sadece HSD fonksiyonu dışarıdan erişilebilecektir.
Ve ilk React uygulamamızı oluşturmuş olduk
Sabırla okuduğunuz için teşekkür ederim , hiçbir ayrıntıyı atlamadan sizlere anlatmak istedim biraz uzun olmuş olabilir affola !
React Nedir?
Meta Open Source tarafından açık kaynak olarak geliştirilen bir web geliştirme kütüphanesidir ve Mayıs 2013 tarihinde tanıtılmıştır. JavaScript dilinde kullanılan bu kütüphane ile Model-View-Controller (MVC) yapısına uygun web uygulamaları geliştirebilirsiniz. İlk olarak Facebook gibi Meta platformlarında kullanılan React, günümüzde en popüler kütüphanelerden biri haline gelmiştir. Facebook, Instagram, X (Twitter), Netflix gibi teknoloji devleri bu teknolojiyi aktif olarak kullanmaktadır. React, yazdığınız JavaScript kodlarını render ederek HTML formatına dönüştürmek için JSX kullanır. Hızlı, dinamik, karmaşık ve büyük ölçekte arayüz tasarımı ve hata ayıklama işlemleri gerçekleştirebilirsiniz. React, tek sayfalı projeler geliştirmek için tasarlanmıştır. Bir projede çeşitli alanlar için ayrı sayfalar oluşturma sorununu ortadan kaldırır ve yazdığınız bileşenleri tek bir yerden görüntüleme imkanı sunar. React, bir ağaç yapısına göre çalışır. En üst katmandan aşağı doğru yazdığınız bileşenler arasında veri aktarabilir, bileşenlerin durumunu takip edebilir ve farklı alanlara göre bileşenlerinizi dallandırabilirsiniz. Bu özellik, karmaşık ve ileri seviye projeleri daha rahat geliştirmenize olanak sağlar.React Avantajları Nelerdir?
Öğrenmesi kolaydır, özellikle JavaScript dilinin esnek ve kolay öğrenilebilir yapısı sayesinde isteyen herkes React öğrenebilir. Geniş topluluk desteği ve kaynak bolluğu sayesinde öğrenme ve hata ayıklama süreçleri oldukça kısa sürer.React, yeniden kullanılabilir bileşenler oluşturmanıza olanak tanır. Bu sayede bir projede sürekli kullanılan bir tasarım parçasını tekrar tekrar kod yazmaktan kurtulup, bileşenlerinizi dinamik bir şekilde oluşturabilirsiniz.
React-DOM sayesinde projeler hızlı ve performans kaybı olmadan çalışır. Büyük miktarda veri ile çalışabilir, projelerinizi kolayca ölçeklendirebilir ve duyarlı, akıcı web siteleri geliştirebilirsiniz.
Ağaç yapısı sayesinde hata ayıklama işlemleri kolaylaşır. Alt bileşenlerdeki hatalar üst bileşenleri etkilemez, bu da projelerinizi daha rahat geliştirmenize olanak tanır.
JSX kullanımı, kod enjeksiyonlarına karşı dayanıklılık sağlar. Hem sunucu hem de istemci tarafında yönetim süreçleri kolaydır ve SEO açısından avantaj sunar.
JSX Nedir?
JSX (JavaScript XML), bir sözdizimi uzantısıdır. Genel olarak HTML gibi kod yazma avantajı sağlar. Bu sözdizimini, yazımızın devamında açıklayacağımız bileşen yapıları içinde kullanacağız. JSX, kullanıcıya göstermek istediğimiz arayüzü oluşturmamıza yardımcı olur.Kurulum
React’ı çalıştırmak için cihazımızda NPM ve NodeJS olması gerekmektedir Bu yazılımlar sayesinde kendi cihazımızda bir sunucu ortamı oluşturabilecek ve paketlerin yönetimini gerçekleştirebileceğiz.Bu yazımızda ise Linux üzerinde çalışmalarımızı gerçekleştireceğiz. Kurulum aşamalarımızı ise Linux’a göre gerçekleştireceğiz. Siz bilgisayarınızda yüklü olan işletim sistemi için uygun olan sürümü kullanabilirsiniz, ben Linux kullanan bir kişi olarak bu yazıda Linux’u kurulum ortamı olarak tercih ettim.
İlk olarak sistemimizi güncel tutmamız gerektiriyor.
Sonra ise kurulumu yapalım
Daha sonra Node Packet Managment kurulumu yapmamız gerekiyor. Bu paket özellikle NodeJS üzerinde yapacağımız tüm çalışmalarımızda gerekli modüllerin eklenmesi, kaldırılması gibi özellikleri sağlayacaktır.
Kod:
NOT: Eğer NodeJS’in internet sitesinde yer alan bilgilere göre kurmak isterseniz şağıdaki kodu terminal ekranınıza kopyala yapıştır yaparak çalıştırabilirsiniz.Şimdi ise devam edelim. Şimdi ise NodeJS sürümümüze bakalım
Burada ise 18.9.0 sürümünü kurduk. Bu sürüm ise kullandığımız Linux dağıtımının depo sunucusundaki eşleşen bilgilere göre kuruldu. Bundan sonraki çalışmalarımızı ise bu sürüme göre kuracağız. En güncel sürüme ise NodeJS resmi web sitesinden ulaşabilirsiniz.
Ayrıca NPM sürümüne bakalım.
Şimdi ise React kurulumu yapmaya başlayalım
Kod:
https://react.dev/ sitesinde gidelim.Biz burada işletim sistemimize global olarak kurulum yapacağız. Bu sayede istediğimiz yerden npm kullanarak bir React uygulaması başlatabileceğiz. Burada ise @ karakterinden sonra latest yazarak en son sürümü yüklemiş olacağız.
React Projemizi Başlatalım
Şimdi ise create-react-app ile birlikte bir uygulama oluşturacağız. Uygulamamızın ismi ise my-app olacak. Burada bize hazır bir React template indirecek ve bunun üzerinden uygulamamızı başlatacğız. Bu biraz uzun sürebilir. Yazımızın devamında React’ın klasör ve dosya yapısına doğrudan giriş yapmadan sadece basit işlemleri gerçekleştireceğiz.Şimdi ise klasörümüze giriş giriyoruz ve projemizi başlatıyoruz. Uygulamamızı başlatacağız. Burada bizi yerel cihazımızda NPM ile birlikte bir sunucu başlattı. Port bilgisi ise otomatik olarak 3000 olarak ayarlandı.
Tarayıcımızın adres çubuğuna localhost:3000 veya http:localhost:3000 yazdığımızda karşımıza react ekranı gelecektir.
Şimdi WEB uygulamamız hazır. Yapmamız gereken ise src klasörü içindeki App.js ile işlem yapmak.
Biz burada ise App fonksiyonunu tamamen sileceğiz ve aşağıdaki fonksiyonu yazacağız.
Kod:
function HSD() {
return (
<>
<p>Merhaba HSD Türkiye Ailesi :) </p>
</>
)
}
export default HSD;Yukarıda ise HSD fonksiyonunu React’ın default olarak tanıması ve kolayca dışa aktarılabilmesi için export özelliğini kullandık. Eğer App.js içine başka bir fonksiyon yazdığımızı düşünürsek sadece HSD fonksiyonu dışarıdan erişilebilecektir.
Ve ilk React uygulamamızı oluşturmuş olduk
Sabırla okuduğunuz için teşekkür ederim , hiçbir ayrıntıyı atlamadan sizlere anlatmak istedim biraz uzun olmuş olabilir affola !
