Halo bro & sis!
Kali ini Tips Ngoding mau berbagi tentang ReactJS!
ReactJS adalah sebuah library pada bahasa pemrograman JavaScript (JS) yang dapat digunakan untuk membangun User Interface. Pada artikel kali ini, Tips Ngoding akan berbagi mengenai cara instalasi ReactJS yang sederhana.Kali ini Tips Ngoding mau berbagi tentang ReactJS!
Apa Itu ReactJS???
Tahap 1: Buat Sebuah Halaman HTML
Buatlah sebuah halaman HTML dan tambahkan sebuah tag div kosong seperti contoh berikut...
Tahap 2: Tambahkan Tag Script Yang Dibutuhkan
<html>
<head>
<title>Belajar ReactJS</title>
</head>
<body>
<div id="like_button_container"></div>
</body>
</html>
<head>
<title>Belajar ReactJS</title>
</head>
<body>
<div id="like_button_container"></div>
</body>
</html>
Tahap 2: Tambahkan Tag Script Yang Dibutuhkan
Tambahkan script berikut tepat sebelum tutup tag body seperti contoh berikut...
<html>
<head>
<title>Belajar ReactJS</title>
</head>
<body>
<div id="like_button_container"></div>
<!-- Load Script React -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
<head>
<title>Belajar ReactJS</title>
</head>
<body>
<div id="like_button_container"></div>
<!-- Load Script React -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
Tahap 3: Buat Sebuah Component
Buatlah sebuah file dan beri nama like_button.js. Isi dengan kode yang bisa kamu dapatkan pada link berikut.
Klik Untuk Buka Kode
Setelah kode dari link diatas kamu paste pada file like_button.js, tambahkan kode berikut diakhir file like_button.js
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
ReactDOM.render(e(LikeButton), domContainer);