REACT UI MECHANICS
React ile HTML Title ve Meta Verisini Nasıl Güncelleriz
HTML Head Elementi içerisinde yer alan bir takım title, style, meta, link, script, base yapılarını güncellemeyi ve yönetmeyi nasıl yapabiliriz.
--
HTML Document 2 kısımdır oluşur. Head ve Body. Aşağıdaki resimde olduğu gibi. React Proje ile SPA(Single Page App) geliştirdiğinizde React render içerisinde geliştirdiğiniz kısım Body kısmının Rendering ile uğraşır.
Normal HTML sayfalarına göre SPA(Single Page App), birden fazla sayfa client-side oluşturulduğu için Body uygun Head bilgisi güncellenmez. Peki Head kısmı neleri içerir ?
<title>
Tarayıcı tab kısmında yazan başlıktır, arama motorları tarafından indekslendiği ve kullanıcı favorilerine bu başlıkla eklendiği için çok çok önemlidir.
<head>
<title>My Page</title>
</head>Yukarıdakı tanım tabiki /public folder altında static tanım oluyor. Bunu React uygulamasında dinamik halde kullanmak için
Sayfanın componentDidMount
componentDidMount(){ document.title=...}veya Hook ile yazıyorsanız useEffect içerisinde bu SideEffect tanımlayabilirsiniz.
useEffect(() => {
document.title = "My Page"; }, []);React Helmet kütüphanesini kullanarak React JSX içerisinde aynı HTML benzeri bir tanımla ile Head kısmının değiştirilmesini sağlayabilirsiniz.
<Helmet>
<title>My Page</title>
<meta name="description" content="My application" />
</Helmet><style>
Head kısmında body ile ilgili stilleri tanımlanızı sağlar.
<style>
body {background-color: orange;}
h1 {color: black;}
p {color: black;}
</style><script>
Head kısmında JavaScript kodları yazmamızı sağlar.
<script>
function sayHello() {
document.body.innerHTML = "Hello";
}
</script><link>
HTML içerisinde bulunmayan dış kaynakların HTML dokümanına bağlantı kurmasını sağlar.
<link rel="stylesheet" href="../mystyle.css"> //Locale vs Remote
<link rel="script" href=".../script.js"/><meta>
Meta veri ekranda gözükmeyen ama ekranı kullanan arama motorlarına, ekranın tarayıcı tarafından nasıl algılanması konusunda bir takım bilgiler verdiğimiz kısımdır.
Character Seti, Keywords, Description, Author, Viewport vb…
<meta charset=”UTF-8">
<meta name="keywords" content="Helmet, react-document-meta, JS"><meta name="description" content="Free Web tutorials">
<meta name="author" content="Onur Dayıbaşı">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>SPA (Single Page App)
Özetle istediğiniz kütüphane ile uygulamanızı gerçekleştirin Örneğin React, Vue, Angular, Svelte vb… . sizin arka planda sayfalarınız multiple page şeklinde oluşturmamış ise yani index.html, aaa.html vb… şekilde değilde tek bir index.html içerisinde main.js ve chunk js dosyaları ile dinamik olarak ekranda oluşturuyorsanız;
Yukarıda bahsettiğim gibi dinamik sayfa geçişlerinde sayfanızın özelliği ve içeriğine göre Head kısmını güncellemeniz gerekiyor.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
![My Interview Experience at Google [L5 Offer]](https://miro.medium.com/v2/resize:fit:1358/1*cefmG5nMryckZvBXfO3RDQ.gif)
