Jasa Pembuatan Website Termurah! Klik Disini

Banner

IDCloudHost | SSD Cloud Hosting Indonesia
Beranda
React
tutorial

Berkenalan Dengan React JS

React JS adalah sebuah library javascript yang dibuat oleh facebook untuk membangun User Interface (UI) pada Web ataupun Mobile.

 Berkenalan Dengan React JS

Tutorial React JS Part 1 : Berkenalan Dengan React JS

Tutorial React JS Part 1 : Berkenalan Dengan React JS -  Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan memasuki Seri baru atau seri lanjutan dari materi Javascript yaitu Berkenalan Dengan React JS.

Tidak asik jika kita belajar javascript namun tidak ikut mempelajari library ataupun framework dari Javascript itu sendiri. Nah diseri ini kita akan belajar mengenai React JS yang merupakan framework yang sangat populer dan sudah banyak digunakan.

Mari kita mulai seri barunya!

Berkenalan Dengan React JS

Pengertian React JS

Sebenarnya React JS merupakan sebuah library bukan sebuah framework namun banyak orang yang menyebut bahwa React JS itu adalah sebuah framework.

React JS adalah sebuah library javascript yang dibuat oleh facebook untuk membangun User Interface (UI) pada Web ataupun Mobile.

React JS dibuat oleh Facebook dan tentu saja aplikasi seperti Whatsapp, Instagram, ataupun facebook itu sendiri telah menggunakan React JS ini untuk keperluan mereka namun selain facebook, beberapa aplikasi yang kita kenal pun sudah menggunakan React JS seperti Pinterest, Neflix, Dropbox dan lain-lain.

Didalam Website React JS, mereka mempunyai beberapa Fitur Unggulan seperti :

Declarative

React dapat membuat proses pembuatan User Interface interaktif menjadi lebih mudah. Buat tampilan sederhana untuk setiap state di aplikasi Kamu, dan React akan secara efisien memperbarui dan me render hanya komponen yang diperlukan ketika data Kamu berubah.

Tampilan yang deklaratif membuat jalannya kode Kamu menjadi lebih terprediksi dan lebih mudah untuk di-debug.

Component-Based

React JS membuat komponen yang dienkapsulasi yang mengelola dirinya sendiri, lalu dapat disusun untuk membuat UI yang kompleks. Karena logika pada komponen React ditulis dalam JavaScript atau bukan menggunakan template, maka akan dengan mudah dalam pengelolaan data dan menjauhkanya dari DOM.

Learn Once, Write Anywhere (Belajar Sekali, Tulis di Mana saja)

Developer dapat menggunakan fitur baru React tanpa mengubah code yang sudah ada. React juga dapat digunakan bersama Node.js dan dapat digunakan untuk membangun aplikasi mobile dengan React Native.

Perlu kamu ketahui bahwa Artikel ini dan kedepannya menggunakan React JS versi 16.13.1

Kelebihan Dari React JS

Kepopuleran React JS mungkin karena kelebihannya dari React JS itu sendiri, Berikut adalah kelebihan dari Library React JS:

  • Mudah untuk dipelajari karena dokumentasi React JS sudah lengkap dan jelas.
  • React menggunakan Virtual DOM, sehingga proses render jadi lebih cepat.
  • React ramah SEO, sehingga mudah ditemukan oleh mesin pencari.
  • Membuat halaman dinamis jadi jauh lebih mudah.
  • React telah didukung oleh Laravel dan Ionic.
  • React dapat digunakan untuk membuat aplikasi mobile baik Android maupun iOS dengan React Native.
  • React JS didukung oleh komunitas yang besar.
  • Komponen yang sudah dibuat, bisa digunakan kembali.

Untuk lain kelebihan lainnya kamu bisa langsung mempelajari React JS ini nanti seiring berjalannya waktu kamu akan mengerti dan merasakan sensasi dalam menggunakan React JS.

Cara Menginstal React JS

Ada beberapa cara dalam untuk menginstal React JS, seperti berikut:

  1. Menggunakan CDN
  2. Menggunakan CLI

Semua cara penginstalan itu akan kita bahas satu persatu.

Menggunakan CDN

Menurut saya, dengan menggunakan CDN proses penginstalan jadi jauh lebih mudah karena kita tidak perlu mendownloadnya namun komputer kita harus terhubung oleh internet apa bila kamu ingin menggunakan CDN.

Caranya dengan memanggil file React, React DOM dan Babel dengan tag <script>. Babel digunakan agar browser dapat menjalankan skrip JSX dan support dengan fitur-fitur JavaScript terbaru.

Kalau kamu belum mengerti babel, Babel adalah sebuah transpiler, penerjemah bahasa javascript yang tidak atau belum support pada browser atau Node.JS. Contohnya, saat ini browser yang kamu gunakan hanya support terhadap ES5, sedangkan kamu ngoding projectnya menggunakan ES6, maka babel bertugas untuk mengkonversi ES6 ke ES5 agar bisa dibaca oleh browser.

Contoh penggunaan CDN seperti pada code dibawah ini:

Untuk menggunakan CDN ada dua pilihan yang diberikan oleh React JS yaitu pilihan jika untuk Development dan Pilihan jika untuk Production.

Contoh CDN Development


<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

Untuk versi development hanya dimaksudkan untuk lingkungan pengembangan saja dan tidak cocok untuk lingkungan produksi.

Contoh CDN Production


<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

Untuk menggunakan versi spesifik dari React, dapat mengubah angka 16 menjadi angka versi lain yang ingin digunakan.

Menggunakan CLI

Jika kamu menggunakan cara ini, pastikan laptop atau komputer yang kamu gunakan sudah terinstal Node.JS dan cara menginstall menggunakan metode ini cukup mengetikkan skrip berikut pada Command Prompt atau Terminal:


npm install -g create-react-app
npx create-react-app name-project
cd name-project
npm start

Sebelum menuliskan skrip di atas pastikan posisi cursor pada terminal atau Command Prompt pada direktori dimana aplikasi akan dibuat.

Menampilkan Hello World Menggunakan React JS

Disini saya menggunakan CDN untuk menginstal React JS nya agar lebih simple dan sekarang buatlah file baru dengan nama index.php setelah itu ketikkan code seperti dibawah:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar React JS</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>

    <div id="hello"></div>

    <script type="text/babel">
        ReactDOM.render(
            <p>Hallo World</p>,
            document.getElementById('hello')
            );
    </script>
</body>
</html>

<!-- Hasilnya Akan Tampil: Hello World -->

Okey, selamat program pertamamu sudah berhasil dibuat!

Untuk menjalankan program React dengan baik, disarankan untuk install Ekstension React DevTools yang akan membantu dalam mengontrol kesalahan kode program. Link downloadnya bisa kamu lihat di tab console saat inspect halaman pada browser jika belum menginstalnya.

Membuat Project Dengan Menggunakan CLI

Jika kamu ingin membuat website yang cukup kompleks, saya sarankan kamu menggunakan CLI karena dengan CLI react js akan menggenerate semua file yang kamu butuhkan pada awal-awal project.

Create React App mengatur Development Kamu sehingga, Kamu dapat menggunakan fitur terbaru JavaScript, memberikan pengalaman Development yang menyenangkan, dan mengoptimalkan aplikasi Kamu untuk Production. Kamu membutuhkan Node >= 8.10 dan npm >= 5.6 di komputer Kamu. Untuk membuat suatu proyek baru.

Untuk menggunakan metode ini silahkan ikuti langkah-langkah dibawah dan praktekkan pada Command Prompt (CMD):

Menargetkan file project kita akan diletakan dimana, kamu cukup menggunakan perintah dibawah:


cd c:\xampp\htdocs\bwi_react

Pastikan didalam htdocs kamu sudah membuat folder dengan bwi_react ya!

Setelah itu kamu boleh langsung ketik perintah dibawah:


npm install -g create-react-app

Tunggu penginstalan selesai, lalu langsung ketikkan perintah seperti dibawah:


npx create-react-app latihan

Pada perintah “latihan” kamu bisa ubah sesuai dengan project kamu ya dan tunggulah sampai selesai.

Jika sudah selesai akan tampil seperti gambar dibawah:

Berkenalan Dengan React JS


Dan isi dari folder latihan pun akan seperti gambar dibawah:

Berkenalan Dengan React JS


Untuk hasilnya pun akan tampil layar kosong.

Sekian untuk dasar mengenai React JS, materi selanjutnya kita akan membahas mengenai Konsep Dasar React JS.

Semoga Bermanfaat!

Content Creator, Web Developer

Posting Komentar

© ‧ BelajarwithIB. All rights reserved. Developed by Jago Desain