Cara Membuat Website Dengan React Js
Ketika mengembangkan website ataupun aplikasi, kita wajib menggunakan framework yang sesuai dengan kebutuhan masing-masing. Salah satu framework yang paling populer digunakan di kalangan web developer saat ini adalah React Js. React Js kerap digunakan sebagai framework untuk membuat bagian front-end dari sebuah web atau aplikasi. Apabila kamu ingin membuat desain User Interface (UI) website yang menarik dan interaktif, tentu kamu perlu belajar React Js ini.
Popularitas React Js terbukti dengan aplikasi – aplikasi yang menggunakannya seperti Facebook, WhatsApp, Netflix, dan Instagram. Meski begitu, React Js bukanlah full-featured framework, melainkan sebuah JavaScript Library yang digunakan untuk membangun User Interface.
Apa itu React Js
React Js adalah JavaScript Library dengan sistem open source yang dikembangkan oleh Jordan Walke (Developer Facebook) pada tahun 2013 silam. Library ini berisi berbagai kode JavaScript yang sudah tertulis (pre-written). Sehingga, proses coding menjadi lebih efisien karena kamu hanya tinggal mengambil kode yang ingin digunakan. Penggunaan React Js hanya membutuhkan beberapa software saja dan tidak membutuhkan banyak RAM ataupun memori internal. Framework ini dapat mendesain tampilan sederhana untuk setiap level dalam aplikasi, sehingga dapat digunakan untuk membuat dan mengembangkan pembuatan aplikasi berbasis web.
Keunggulan React Js
Ada beberapa fitur yang menjadi keunggulan React Js. Berikut beberapa di antaranya.
Declarative
React dapat membuat UI (User Interfaces) yang interaktif, sehingga dapat dengan mudah membuat desain yang simple untuk di setiap state di dalam aplikasi. Declarative views dapat membuat kode lebih mudah untuk di prediksi dan lebih mudah untuk di debug.
Component – Based
React dapat membuat Encapsulated Component yang dapat mengatur setiap tahapannya, lalu dapat membuat complex UIs berdasarkan kemampuan itu.
Learn Once, Write Anywhere
Developer dapat mengembangkan fitur baru menggunakan react tanpa mengubah kode sebelumnya, react juga dapat bekerja menggunakan Node JS dan mobile apps menggunakan React Native.
React Js Tutorial
Setelah kamu mengetahui apa itu React Js dan keunggulan fiturnya, sekarang kita akan mencoba membuat web dengan React Js. Pertama-tama, kamu perlu menyiapkan web browser versi terbaru. Kamu juga membutuhkan teks editor, atau bisa menggunakan Visual Studio Code gratis yang lebih mudah digunakan. Apabila kamu masih pemula, kamu juga bisa memanfaatkan online playground untuk belajar seperti Glitch, CodePen dan Codesanbox. Lalu, pastikan kamu sudah memahami tentang fitur-fitur ES6, seperti class, arrow function dan variabel (let, const, var), karena akan banyak digunakan pada React. Setelah semua sudah siap, ikuti langkah-langkah berikut:
- Buat folder baru terlebih dahulu, bebas mau dimana saja dan beri nama Latihan React atau sesuai keinginan masing-masing.
- Kemudian di dalam folder tadi, buat file baru dengan nama hello-react.html
- Lalu copy code berikut ini dan paste ke file hello-react.html tadi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar Reactjs</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World Reactjs!</h1>
}
}
ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>
</body>
</html>
- Setelah itu simpan file hello-react.html dan buka dengan web browser.
Di dalam source code tersebut terdapat library yang digunakan untuk menjalankan React Js agar source code tadi dapat berjalan. Kamu membutuhkan koneksi internet karena source tadi akan terhubung dengan server. Berikut fungsi masing-masing komponen kode utama pada contoh di atas.
- React.js: Library utama yang digunakan untuk membuat komponen.
- Babel.js: Salah satu kode Javascript yang ditemukan pada versi terbarunya, yaitu ES6 yang berfungsi agar source code dikenali oleh sistem browser.
- React-dom.js: DOM digunakan untuk melakukan render komponen React menjadi HTML agar bisa dibuka di browser.
Demikianlah penjelasan mengenai React Js dan tutorialnya. Kamu bisa membuat aplikasi yang kamu inginkan dengan framework ini. Jika kamu ingin mendalami React Js, kamu bisa belajar lebih lanjut di program Full Stack Hacktiv8 untuk menjadi seorang Full Stack Developer. Info lebih lengkap kunjungi my.hacktiv8.com/fsjs
