Tujuan React dalam banyak hal adalah merender HTML di halaman web. Dengan merender HTML tersebut memudahkan pengguna dalam membuat prosedur HTML dengan bantuan penggunaan ReactJS. React membuat HTML ke halaman web dengan menggunakan fungsi yang disebut ReactDOM.render ().
Function Pada Render
Fungsi ReactDOM.render () mengambil dua argumen, kode HTML dan elemen HTML. Tujuan dari fungsi ini adalah untuk menampilkan kode HTML yang ditentukan di dalam elemen HTML yang ditentukan. Disini kita akan membuat 2 file yaitu index.js (Untuk syntax code berisi reactJS) dan index.html (untuk syntax code HTML).
Contoh :
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
KODE PADA HTML
Kode HTML dalam tutorial ini menggunakan JSX yang memungkinkan Anda untuk menulis tag HTML di dalam kode JavaScript. Untuk contohnya Anda buat 2 file index.js dan index.html
Contoh :
index.js
import React from 'react'; import ReactDOM from 'react-dom'; 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'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>Dan hasilnya adalah sebagai berikut :
Root Node
Node root adalah elemen HTML tempat Anda ingin menampilkan hasilnya. Ini seperti wadah untuk konten yang dikelola oleh React. Ini TIDAK harus berupa elemen dan TIDAK harus memiliki id = ‘root’:
Contoh :
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));
// Klik tab "index.htm" untuk melihat container "sandy". index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<header id="sandy"></header>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
