React JS Serüveni 1 — Hello World
Merhabalar,
Uzun süredir bakmak istediğim bir javascript kütüphanesi(library) olan Reactjs e başlarken aynı zamanda bunu bir döküman şeklinde oluşturabileceğimi fark ettim. Bu sayede hem daha sonra geri dönüp bakabileceğim hem de yeni başlayanlara bir miktarda olsa yardımcı olabilecek bir başlangıç rehberi oluşturmuş olacaktım. Bu nedenle bu fikri gerçekleştirmek için böyle bir seri oluşturmaya karar verdim. Öyleyse ilk olarak Reactjs’in ne olduğunu açıklayarak başlayalım.
Reactjs Nedir / Ne Değildir?
- Facebook tarafından oluşturulan bir JavaScript kütüphanesidir.
- Bir web çatısı (framework) değildir.
- Javascript tabanlı dinamik web uygulamaları geliştirmek için kullanılır.
- Single Page Application(SPA) mantığında çalışır. Yani, web sayfası olarak sadece bir tane indeks sayfasının olduğu ve yönlendirme(routing) yapısı sayesinde sayfa yönlendirmelerini sayfayı yenilemeden bileşen(component) yapısı üzerinden yapılmasını sağlayan bir yapıdadır.
Hello World
Reactjs’in kısa bir tanımını yaptıktan sonra artık ilk kod parçamızı oluşturabiliriz. Bu yüzden ekrana ‘Hello World’ yazdırılması işlemini gerçekleştirelim.
Reactjs’i uygulamamıza iki şekilde ekleyebiliriz:
“CDN ile sayfamıza dahil edebiliriz veya npx create-react-app ……… komutunu kullanarak gerekli node_modules paketlerinin kurulmasını sağlayarak uygulamamızı kurmuş oluruz.”
Biz bu örnekte basit tutmak açısından gerekli CDN’leri sayfamıza ekleyerek örneğimizi tamamlayacağız.
- Ilk olarak React.js’ in CDN’lerini ekleyelim. Bunlar:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
şeklindedir. Daha sonra Babel’i (bir javascript derleyicisi) uygulamamıza dahil etmemiz gerekiyor. Babel CDN:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>Bunları uygulamamıza ekledikten sonra artık tek yapmamız gereken, ‘Hello World’ yazısını ekrana yazdırmak için gerekli olan kod parçacığını oluşturmak. Bu sebeple aşağıdaki kodu uygulamamıza ekleyelim ve uygulamamızı çalıştıralım.
Burada yaptığımız işlemleri inceleyecek olursak,
- Ilk olarak Hello World yazımızı kapsayacak bir DOM elementine ihtiyacımız olduğundan id si ‘app’ olan <div> tag i oluşturulur.
- Daha sonra ise sayfada göstermek istediğimiz içeriği “render” ederek uygulamamızda görünmesini sağlarız. Ve şu şekilde bir çıktı elde ederiz:
Bu yazımda bahsetmek istediklerim bu kadardı, yazımı okuduğunuz için teşekkürler. Umarım faydalı olmuştur. Bu serüvenin diğer yazısında “React Component” yapısından bahsetmeye çalışacağım.
Bu serinin diğer yazıları :
Yararlandığım Kaynaklar:
