HTML ve React
HTML ve React, modern web geliştirmede temel yapı taşlarını bir araya getiren güçlü bir ikilidir. HTML, sayfanın iskeletini, yapısını ve içeriğini belirlerken; React, bu yapıya canlılık katar, kullanıcı etkileşimlerini dinamik hale getirir ve verimli bir şekilde güncellemeler yapar. Bu iki teknoloji birlikte kullanıldığında, hem hızlı hem de kullanıcı dostu web uygulamaları ortaya çıkar.
HTML ve React kullanımını bir ev inşa etmeye benzetebiliriz: HTML evin duvarları, çatısı ve odalarıdır; React ise bu odaları süsleyen, değiştiren ve gerektiğinde otomatik olarak düzenleyen akıllı bir iç dekorasyon sistemidir. Örneğin kişisel bir web sitesinde portföyünüzü gösterirken React ile sayfa yenilemeden yeni projeler ekleyebilirsiniz. Bir blogda yeni yazılar eklenebilir, e-ticaret sitesinde fiyatlar ve stok bilgileri anında güncellenebilir, haber sitesinde ise son dakika başlıkları kullanıcıya anında yansıtılabilir.
Bu içerikte, React ile HTML’i nasıl birleştireceğinizi, JSX sözdizimini kullanarak dinamik içerikler oluşturmayı, listeleri yönetmeyi ve semantik ile erişilebilirliğe dikkat ederek modern web projeleri geliştirmeyi öğreneceksiniz. Bu bilgilerle, temel bir yapıdan profesyonel bir uygulamaya giden yolda sağlam bir temel atmış olacaksınız.
Temel Örnek
html<!-- Basic HTML with React Example -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Temel Örnek</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Create a simple JSX element
const element = <h1>Merhaba, React dünyasına hoş geldiniz!</h1>;
ReactDOM.createRoot(document.getElementById("root")).render(element);
</script>
</body>
</html>
---Bu örnek, HTML ve React’in nasıl entegre çalıştığını basitçe gösterir. Öncelikle HTML sayfasının temel yapısını oluşturduk: <!DOCTYPE html>,
ve kısımları. içerisinde React ve ReactDOM kütüphanelerini ekledik. React, bileşenleri tanımlamamıza imkân tanır; ReactDOM ise bu bileşenleri HTML sayfasına render eder. Ayrıca Babel eklenmiştir, çünkü JSX tarayıcıların doğal olarak anlayamadığı bir sözdizimidir ve Babel bunu standart JavaScript’e dönüştürür. kısmında