by Abu Zubayr

Istilah atau Terminologi di React JS (Seri : Mudah Belajar React JS Bagian 2)

 

Istilah atau Terminologi di React JS (Seri : Mudah Belajar React JS Bagian 2)

Bismillah...
Sebelum mulai membuat aplikasi utuh menggunakan React JS, sangat ditekankan bagi anda untuk mengenal istilah-istilah atau terminologi dalam penggunaan React JS ini. Dengan mengenal istilah tersebut maka akan membantu anda untuk melanjutkan tahapan pembelajaran berikutnya nanti insyaAllah.

Berikut adalah istilah-istilah didalam React JS :
  1. DOM
  2. DOM (Document Object Model) merupakan sebuah API yang digunakan javascript untuk memanipulasi dokumen html, xml dan juga svg. Dengan DOM memungkinkan kita untuk memanipulasi element-element html melalui javascript, sehingga sebuah website akan terlihat lebih dinamis dalam menampilkan informasi yang dimuat oleh website tersebut. Dalam javascript, penggunaan DOM ini menggunakan keyword document. Sebagai Contoh :
    document.write("hello world")
    document.getElementById("app")

  3. Virtual DOM
  4. Jika sebelumnya kita sudah mengenal istilah DOM, sekarang kita juga perlu mengetahui istilah Virtual DOM. Virtual DOM sendiri adalah DOM yang dibuat secara virtual yang disimpan didalam memori. Proses perubahan UI melalui Virtual DOM tidak langsung mengakses DOM yang asli di browser, akan tetapi disimpan di memori yang kemudian akan dilakukan sinkronisasi dengan DOM yang sebenarnya (Real DOM).

    Sebagai contoh, misalnya kita memiliki element form input text A dan input text B. Nah, form input tersebut akan di clone ke Virtual DOM. Jadi di Virtual DOM akan memiliki salinan dari Real DOM. Pada saat terjadi perubahan inputan misalnya di text A, Virtual DOM akan melakukan perubahan di semua element. Akan tetapi, hal ini tidaklah menjadi masalah karena proses perubahan di Virtual DOM lebih cepat dan ringan karena dijalankan di memori. Kemudian jika perubahan telah selesai dilakukan, selanjutnya Virtual DOM akan melakukan sinkronisasi ke Real DOM dan hanya element yang terjadi perubahan saja yang akan di perbahrui di Real DOM.

  5. JSX
  6. JSX atau extended javascript ini memungkinkan kita untuk menulis script html secara langsung di javascript. Hanya saja perlu diperhatikan bahwa setiap script html yang ditulis harus Nested, artinya kita harus memperhatikan buka dan tutup sebuah tag html.
    Misalnya kita membuat tag “<h1>”, maka di akhir jangan lupa untuk menutup tag tersebut dengan “</h1>”. Sebagai contoh :
    function sayHello(){
        const name = <span style={{color:'red'}}>Ahmad</span>
        return <h1>Hello {name}, saya belajar react.js</h1>
    }

  7. Elements
  8. Didalam React JS, elemen adalah blok terkecil di aplikasi. Sebuah elemen menggambarkan apa yang ingin kita lihat dilayar. Berbeda dengan elemen DOM, elemen React merupakan objek biasa dan mudah untuk dibuat. React DOM mangatur pembaruan DOM agar sesuai dengan elemen React. Elemen React itu sendiri tidak dapat diubah-ubah. Sebagai contoh :
    const element = <h1>Hello, world</h1>

  9. Components
  10. Istilah component akan sering kita dengar selama membuat aplikasi dengan React JS. Komponen itu sendiri secara konsep mirip dengan fungsi pada javascript yang reusable. Komponen menerima beberapa inputan (biasa disebut “props”) dan mengembalikan element React yang mendeskripsikan apa yang seharusnya tampil dilayar.
    Berikut adalah beberapa contoh pembuatan komponen di React JS :
    const Dashboard =(props)=>{
      return  <h1>Hallo, ini dashboard </h1>
    }

    Atau bisa juga di tulis dengan meng-extends dari class React.Component
    class Dashboard extends React.Component{
      render(){
        return  <h1 >Hallo, ini dashboard </h1>
      }
    }
    

    Perlu diperhatikan bahwa penulisan nama komponen yang benar di React JS adalah dengan menggunakan huruf besar di awal.

  11. Props
  12. Props merupakan inputan untuk React Component. Data inputan dari props ini diturunkan dari Parent Component ke Child Component. Data-data yang dikirim melalui props ini tidak bisa diubah di Child Component alias read only.
    Sebagai contoh :
    const ChildComponent = (props)=>{
      return <h1>Judul dari parent adalah {props.title}</h1>
    }
    
    class ParentComponent extends React.Component{
      render(){
        return <Child title="Semangat Belajar React JS"/>
      }
    }
    


  13. State
  14. State merupakan sekumpulan object yang berada didalam sebuah komponen React. State ini sifatnya private, artinya tidak bisa diakses oleh komponen lain. Masing-masing komponen bisa mengatur/mengubah nilai state yang ia miliki.
    import React, {Component} from "react";
    
    class Dashboard extends Component{
        constructor(props){
            super(props)
            this.state = { // penulisan state
                title:"Selamat Datang"
            }
        }
    
        render (){
            return <h1>Hello, {this.state.title} {/*Pemanggilan state*/}</h1>
        }
    }


  15. React Hooks
  16. Hooks merupakan fitur baru di React versi 16.8. Dengan Hooks, kita dapat menggunakan state dan fitur React yang lainnya tanpa perlu menulis sebuah kelas seperti yang kita tulis diatas tadi. Jadi Hooks ini lebih sederhana dalam hal penulisan kode untuk membuat komponen dibandingkan dengan class component. Berikut ini adalah contoh penulisan komponen menggunakan React Hooks :
    import React, {useState} from "react"
    const DashboardHooks =(props)=>{
        const [title, setTitle] = useState("Selamat Datang") // penulisan state
     
        return (
            <h1>Hello, {title} {/*Pemanggilan state*/}</h1>
        )
    }

Baik, demikianlah istilah-istilah yang coba saya rangkum. Dimana istilah tersebut akan sering anda jumpai selama ngoding menggunakan React JS. Mungkin masih ada lagi yang istilah-istilah lainnya yang belum sempat saya masukkan di tulisan ini yang bisa anda baca dari sumber yang lain.
Semoga ilmu ini bermanfaat untuk anda dan saya, aamiin.
Share:

Perkenalan dan Instalasi React JS (Seri : Mudah Belajar React JS Bagian 1)

 

React.js

Bismillah…
Postingan pertama ini saya akan membahas mengenai React.JS. Postingan ini nantinya insyaAllah akan bersambung ke bagian-bagian berikutnya yang akan membahas React.JS mulai dari tahapan awal instalasi sampai kepada penggunaan React.JS sebagai pure Front End yang akan terhubung dengan API yang nantinya akan saya tulis dengan Go Lang sebagai Back End nya insyaAllah.

Baiklah, pada postingan pertama ini kita akan membahas sedikit mengenai apa itu React.JS, apa keunggulannya, serta bagaimana cara membuat project-nya sendiri. React.JS itu sendiri adalah sebuah library/pustaka javascript yang dibuat oleh Facebook yang tujuannya adalah untuk mempermudah dalam membangun user interfaces sebuah website.

Dengan menggunakan library ini, tampilan website yang kita buat lebih terlihat dinamis dan ringan saat digunakan oleh users/pengguna. Kemudian dari sisi pengkodean aplikasi, untuk membuat perubahan atau memperbahrui tampilan akan menjadi jauh lebih mudah dibandingkan menggunakan library javascript yang lain seperti jQuery.

  • Menginstal Node.js
  • Oke, sebelum mulai membuat aplikasi menggunakan React.JS, terlebih dahulu kita harus menginstal beberapa tools yang dibutuhkan. Disini saya menggunakan paket javascript dari npm (Node Package Manager), sebenarnya anda juga bisa menggunakan yarn yang juga sama seperti npm. Nah, untuk menjalankan npm kita membutuhkan node.js. Jika anda belum mengetahui apa itu node.js. Node.js itu sendiri adalah runtime environment yang digunakan untuk menjalankan aplikasi berbasis website. Dengan node.js anda bisa menjalankan aplikasi dengan bahasa javascript disisi server.

    Berikut adalah langkah-langkah untuk menginstal node.js :
    1. Download node.js disitus resminya di https://nodejs.org/en/download/
    2. Pilih installer sesuai dengan sistem operasi yang anda gunakan. Disini saya menggunakan Windows. Untuk versi node.js terbaru di windows, hanya bisa dijalankan di windows versi 8.1 keatas.

      Download node js resmi

    3. Setelah selesai men-download installer diatas, lakukan proses penginstalan seperti biasanya.
    4. Cek apakah node.js anda berhasil terinstal atau tidak. Caranya adalah buka Command Promp/Terminal kemudian ketikkan : npm -v
      Jika muncul seperti berikut ini maka, proses instalasi node.js anda sudah berhasil

      Mengecek versi npm

      Seperti terlihat diatas, jika berhasil akan muncul versi dari node.js yang kita gunakan.

  • Memulai React js
  • Setelah berhasil menginstal node.js. Langkah selanjutnya adalah kita akan mulai membuat sebuah project react.js. Pertama-tama sebelum membuat project react.js anda terlebih dahulu harus menginstal modul create-react-app melalui npm atau yarn.
    Pada contoh ini saya akan menggunakan npm.

    Berikut adalah langkah-langkahnya :
    1. Buka Command Prompt/Terminal anda, kemudian ketikkan : npm install -g create-react-app kemudian ‘Enter’

      Npm install modul react create-react-app

    2. Tunggu hingga proses instalasi selesai
    3. Setelah selesai, lakukan pengecekan apakah instalasi berhasil atau tidak dengan mengetikkan di di Command Prompt/Terminal : create-react-app --version
    4. Jika berhasil akan muncul seperti berikut ini

      Cek versi react create-react-app

    Oke, setelah selesai proses penginstalan modul javascript diatas, selanjutnya kita akan mencoba membuat project pertama kita di React.JS.
    Sebelumnya siapkan terlebih dahulu direktori/folder dimana nantinya anda akan menyimpan project React.JS tersebut. Disini saya menyimpan di direktori ‘F:\blog\React JS\Project’.

    Jika sudah selesai membuat direktori project anda, sekarang saatnya kita mulai membuat project dengan React.JS. Berikut adalah langkah-langkahnya :
    1. Buka Command Prompt/Terminal, dan arahkan ke direktori yang sudah anda buat sebelumnya.

      Folder project react

    2. Untum membuat project baru ketikkan : create-react-app <nama-project>
    3. Misalnya disini saya akan membuat sebuah project baru dengan nama “belajar-react”, maka di Command Prompt/Terminal ketik seperti berikut ini : create-react-app belajar-react kemudian ‘Enter’.
    4. Tunggu hingga proses pembuatan project tersebut selesai.
    5. Sampai disini, proses pembuatan project baru di React.JS selesai. Selanjutnya untuk menjalankan aplikasi yang sudah kita buat caranya adalah masuk ke direktori project yang sudah dibuat tersebut dengan mengetikkan : cd belajar-react
    6. Setelah masuk ke direktori tersebut, selanjutnya ketikkan : npm start
    7. Taraaa !!! sekarang anda sudah berhasil membuat project dari React.JS anda

      Aplikasi pertama dengan react js

Untuk postingan kali ini insyaAllah sudah cukup, dipostingan selanjutnya insyaAllah kita akan membahas lebih detail lagi bagaimana cara membuat aplikasi menggunakan React.JS ini.
Share:
DigitalOcean Referral Badge
www.domainesia.com
Powered by Blogger.