Tepki Oluşturma HTML'si
React'in amacı, birçok yönden HTML'yi bir web sayfasında oluşturmaktır.
React, adı verilen bir işlevi kullanarak HTML'yi web sayfasına işler
ReactDOM.render().
İşleme İşlevi
İşlev ReactDOM.render(), HTML kodu ve bir HTML öğesi olmak üzere iki bağımsız değişken alır.
İşlevin amacı, belirtilen HTML kodunu belirtilen HTML öğesi içinde görüntülemektir.
Ama nerede render?
React projenizin kök dizininde "public" adında başka bir klasör var. Bu klasörde bir index.htmldosya var.
<div>
Bu dosyanın gövdesinde tek bir tane göreceksiniz . Burası React uygulamamızın oluşturulacağı yer.
Örnek
"root" kimliğine sahip bir öğenin içinde bir paragraf görüntüleyin:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Sonuç, <div id="root">öğede görüntülenir:
<body>
<div id="root"></div>
</body>
Öğe kimliğinin "kök" olarak adlandırılması gerekmediğini unutmayın, ancak bu standart kuraldır.
Sertikalı olmak!
95 $ KAYIT
HTML Kodu
Bu eğitimdeki HTML kodu, JavaScript kodunun içine HTML etiketleri yazmanıza izin veren JSX'i kullanır:
Sözdizimi tanıdık değilse endişelenmeyin, bir sonraki bölümde JSX hakkında daha fazla bilgi edineceksiniz.
Örnek
HTML kodunu içeren bir değişken oluşturun ve bunu "kök" düğümde görüntüleyin:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Kök Düğüm
Kök düğüm, sonucu görüntülemek istediğiniz HTML öğesidir.
React tarafından yönetilen içerik için bir kapsayıcı gibidir.
Bir <div>öğe olmak zorunda DEĞİLDİR ve aşağıdakilere sahip olması ZORUNDA DEĞİLDİR id='root':
Örnek
Kök düğüm, istediğiniz gibi çağrılabilir:
<body>
<header id="sandy"></header>
</body>
Sonucu <header id="sandy">öğede görüntüleyin:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));