Cara Install Dan Pengertian React.js & Vue.js

Banyak website besar yang mengunakan Framework Front-End javascript ini, lalu apa itu Vue.js dan ...
Penulis
Admin
Kategori
Website
Estimasi
6 menit baca
Dilihat
1.4K
Posting
22 Jul 2022
Cara Install Dan Pengertian React.js & Vue.js Banyak website besar yang mengunakan Framework Front-End javascript ini, lalu apa itu Vue.js dan React.js dan bagaimana cara mengunakan framework ini Cara Install Dan Pengertian React.js & Vue.js
2022-11-25

Javascript telah menjadi salah satu hal yang penting pada pembuatan website, seiring perkembangan waktu, Javascript terus berkembang dan melahirkan beberapa framework Front-End yang sangat membantu untuk flexibilitas antarmuka dalam website. Lahirnya beberapa Framework Front-End Javascript popular yaitu Vue.js, React.js & lainnya.

Lalu apa itu Framework Front-End Javascript Vue.js dan React.js itu? bagaimana cara mengunakannya? Masing-masing dari Framework tersebut dibuat dengan kelebihan dan kekurangannya, namun pertanyaannya.. manakah yang lebih cocok dan mudah untuk di implementasikan kedalam website?

Kami tertarik membahas kedua framework ini yaitu Vue.js dan React.js yang mengalami peningkatan signifikan dari penguna dari tahun ke tahun, dan sudah banyak website besar yang mengunakan framework Front-End javascript ini, mari kita bahas apa sih itu Vue.js dan React.js dan bagaimana cara mengunakan framework ini.

 

 

VueJS dan ReactJS mana yang lebih bagus dan cara mengunakannya

 

1. Pengertian dari Vue.js

Vue.js dibuat oleh Evan You yang sebelumnya mengunakan Angular.js selama bekerja di Google, sampai ia berfikir bagaimana untuk membuat framework yang ringan daripada Angular.js.

Diluncurkan awal pada tahun 2014 hingga saat ini terus berkembang hingga menjadi framework front-end yang sangat powerful

Pada pengembangan website yang mengunakan Vue.js,  framework ini sangat mudah dipahami bahkan oleh pemula sekalipun dan sudah banyak perusahaan besar yang mengunakan vue.js, Alibaba, github, Nintendo, dan lain sebagainya.

Ada beberapa alasan mengapa Vue.js sangat diminati:

  • Ukuran yang ringan

Keunggulan framework ini hanya tidak lebih dari 24kb, Vue.js tidak kalah jauh dengan framework front-end lainnya, dalam hal performa, framework ini termasuk cepat karena ukuran yang ringan dan rendah, semakin kecil ukuran sebuah framework maka semakin banyak yang mengunakannya.

  • Sangat mudah dipahami bahkan oleh pemula

Vue.js sangat mudah untuk diimplementasikan ke dalam skala kecil ataupun besar, karena strukturnya yang sederhana dapat menghemat waktu dalam mengembangkannya.dengan kata lain, user tidak akan kesulitan jika terdapat error, karena dapat melacaknya dengan mudah.

  • Dokumentasi yang lengkap dan detail

Salah satu faktor besar atau kecilnya sebuah user mengunakan framework adalah dokumentasinya. Vue.js unggul dalam hal dokumentasi karena terperinci dan komprehensif, dimana user pemula pun dapat mudah memperlajari Vue.js hanya berbekal ilmu dasar HTML dan JavaScript.

  • Integrasi yang mudah dan komunikasi dua arah

Salah satu keunggulan lain Vue.js dengan framework lain dapat digunakan dalam mengembangkan sebuah website ke dalam komponen dan struktur hanya dengan satu file. Vue.js ini dikenal dengan aksitektur MVVMnya, dimana dengan mudah menghandle sebuah blok dalam HTML.dapat bekerja dengan komponen yang berbeda.

Contoh implementasi Vue.js ke HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contoh aplikasi Vue.js ke HTML</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>  
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue.js bekerja!"
            }
        })
    </script>
</body>
</html>

 

2. Penjelasan mudah dan singkat pengunaan Vue.js

Sebelum mengunakan Vue.js, kita sisipkan dulu vue.js dengan mengunakan CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Untuk menampilkan data pada vue.js, kita tambahkan elemen pada div dengan id="app".

<div id="app">
   {{ message }}
</div>

dan yang terakhir kita sisipkan class app tadi pada object vue.js untuk memproses data dan menampilkan data.

<script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue.js bekerja!"
            }
        })
</script>

"el" merupakan element pada kita pilih untuk menampilkan data yang kita gunakan tadi adalah id="app", sedangkan "data" untuk menyimpan variable data itu sendiri. Kamu coba test dengan mencopy script diatas untuk mencobanya.

3. Installasi Vue.js dengan menggunakan CLI

Installasi vue.js kedalam project kamu sebenernya tidak terlalu sulit, kamu hanya perlu memiliki Node.js yang sudah terinstall kedalam komputer kamu, untuk menginstall Vue.js kedalam project pertama kamu, pastikan dulu node dan npm sudah terinstall ya, kamu bisa cek dengan memasukan perintah:

node -v

dan 

npm -v

Perintah tersebut akan menampilkan versi node dan npm masing-masing. Oke lanjut, pertama-tama kamu perlu memasukan perintah berikut kedalam terminal:

npm install -g @vue/cli

Tunggu hingga proses installasi selesai, kamu bisa bikin kopi dulu selagi menunggu hehe, karena proses install yang lumayan lama. Jika sudah selesai, pastikan dulu Vue CLI sudah terinstall dengan baik kamu bisa memasukan perintah:

vue -V (Huruf besar)

Jika sudah muncul versi Vue CLInya, langsung saja buat project pertama Vue.js dengan memasukan perintah:

vue create "project-saya"

Nanti akan muncul 2 opsi, ingin menggunakan Vue 3 atau Vue 2, pilih saja sesuai yang kamu inginkan. Tunggu saja hingga proses installasi project Vue.js selesai. JIka sudah selesai langsung jalankan aplikasi dengan menggunakan perintah:

cd project-saya
npm run serve

Jika sudah muncul seperti ini, maka project vue.js kamu sudah berhasil terbuat.

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.7:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

Copy paste http://localhost:8080/ dan jalankan kedalam browser.

Contoh Vue.js di browser

 

Cara Install Dan Pengertian React.js & Vue.js

 

2. Pengertian dari React.js

React.js digunakan untuk membuat suatu aplikasi disuatu halaman, React.js merupakan library javascript yang dikembangkan oleh facebook, dimana React.js memiliki fungsi untuk membagi User Interface kedalam beberapa komponen. Library ini dikenal dengan konsep DOM Virtual. Beberapa keunggulan React.js:

  • Efisien

React.js hanya merender resource tertentu yang berhubungan dengan komponen data yang silih berganti, dengan kata lain React.js tidak menrender keseluruhan resource.

  • Sederhana

Jika dibandingkan dengan library atau framework JavaScript lainnya, React.js dapat dikatakan framework yang sederhana dan terdefinisi dengan baik dengan pendekatan berbasis komponen, React.js mengunakan syntax yang unik yang dikenal dengan JSX yang memungkinkan dapat digunakan pada JavaScript dan HTML.

  • Code yang dapat digunakan berulang kali

Memudahkan user untuk mengunakan komponen kode berulang kali dengan berbagai level selama project berlangsung, yang mana dapat menghemat waktu dan mengurangi resourse yang ada.

  • Data mengalir satu arah

Dengan mungunakan React.js, data hanya mengalir pada satu arah, yang mana data yang lebih kecil tidak akan mempengaruhi data yang besar yang dapat membuat perubahan dan modifikasi data yang cepat tanpa gangguan sekalipun.

Contoh sederhana website yang terintegrasi dengan react.js didalam dokumen HTML:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aplikasi ReactJS pertamaku</title>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>

<div id="app"></div>

<script type="text/babel">
  let message = <h1>Aplikasi ReactJS pertamaku.</h1>
  ReactDOM.render(message, document.getElementById("app"));
</script>
</body>
</html>

 

4. Penjelasan singkat dan mudah pengunaan React.js

Sebelum ketahap pembuatan aplikasi, kita sisipkan dulu file-file library yang dibutuhkan agar berjalan dibrowser, file tersebut merupakan file external, dengan kata lain tidak akan berjalan tanpa koneksi internet.

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Untuk merender React,js, kita memerlukan tempat untuk merender sebuah data, disini kita gunakan id="app".

<div id="app"></div>

Selanjutkan kita berada ditahap terakhir dalam proses pengolahan data seperti berikut:

<script type="text/babel">
  let message = <h1>Aplikasi ReactJS pertamaku.</h1>
  ReactDOM.render(message, document.getElementById("app"));
</script>

Pada code tersebut kita memproses data dari komponen "aplikasi ReactJS Pertamaku" untuk merendernya ke dalam element "app". Disini kita melihat tag HTML H1 didalamnya yang merupakan tools JSX, JSX merupakan tools JavaScript dimana kita bisa menyisipkan HTML didalamnya. Kamu coba test dengan mencopy script diatas untuk mencobanya.

5. Install React.js dengan CLI

Untuk menginstall React.js dengan NPM, kamu diharuskan memiliki Node.js terlebih dahulu didalam komputer kamu, karena NPM atau NPX hanya dapat berjalan jika Node.js sudah terinstall, buat yang belum tahu NPM itu apa, NPM itu singkatan dari Node Package Module, NPM sama seperti Composer didalam PHP, sebuah perintah yang memudahkan kita dalam mengelola aplikasi. kamu bisa download Node.js disini! gunakan versi LTS untuk versi yang lebih stabil.

Untuk menginstall React.js secara otomatis kedalam komputer kamu, kamu bisa gunakan perintah berikut untuk membuat project berbasis React.js:

npx create-react-app nama-folder-project

Tunggu hingga proses selesai dan nama folder project kamu tercreate dengan sendirinya, masuk kedalam folder project kamu lalu test project React.js kedalam browser dengan menjalankan perintah:

npm start

Jika berhasil maka akan tampil seperti ini didalam browser kamu:

Cara Install Dan Pengertian React.js & Vue.js

 

Kesimpulan

Vue.js dan React.js sangat memudahkan user untuk membuat website dengan efisien dan cepat, jika kamu ingin mengunakan aplikasi atau website berskala besar pilih react.js dan jika kamu ingin membangun website yang cepat, ringan dengan dokumentasi yang terperinci pilihlah Vue.js.

Share