Membuat Project React dengan create-react-app dan Mengenal Tentang React Component - Code Pelajar
Tutorial React JS Bahasa Indonesia

Berjumpa kembali dengan saya, Admin Code Pelajar yang sibuk di dunia nyata. Setelah sekian lama pada part yang pertama pengenalan React JS dan Cara Instalasi React JS, kali ini saya ada kesempatan untuk melanjutkan seri ini ke part selanjutnya. Pada Kali ini saya menjelaskan apa itu react component, state dan juga props yang ada di React. Namun sebelum itu mari kita belajar dari studi kasus dimana kasus yang akan saya ini adalah membuat aplikasi data perpustakaan menggunakan React JS lebih tepatnya kita akan menggunakan create-react-app (pada part sebelumnya sudah dijelaskan).


Sebelum ke materi, alangkah baiknya kita membuat sebuah project create-react-app baru bernama perpustakaan. dengan mengetikan perintah dibawah ini.



create-react-app perpustakaan


Save, lalu jangan lupa kita jalankan servernya pada command line dengan sintak


//npm
npm start

//yarn (saya menggunakan yarn)
yarn start


Maka tampilan awal aplikasi akan seperti ini:


Tutorial React JS Bahasa Indonesia

Selanjutnya, buka code editor dan masuk ke folder projek kita maka kita akan menemui beberapa file berikut ini


Tutorial React JS Bahasa Indonesia

Pada root folder kita ada beberapa folder seperti node_module, public, dan src. Folder node_module berisi kumpulan modul-modul/paket dari node js yang akan diperlukan saat kita akan build aplikasi dalam hal ini react. Dan di dalam folder public berisi 3 file yaitu favicon, index.html, juga manifest.json. file index.html inilah yang akan digunakan sebagai "Wadah" atau DOM aplikasi react yang kita buat dan dalamnya akan ada 1 div dengan id root. Yang terakhir ada folder src yang dimana ini akan menjadi folder untuk melakukan aksi kita membuild aplikasi react yang didalamnya ada beberapa file berikut ini:


Tutorial React JS Bahasa Indonesia

Jika kita membuka file index.js maka akan terlihat seperti berikut ini:


Tutorial React JS Bahasa Indonesia

Pada gambar diatas kita bisa melihat beberapa baris kode javascript dimana ia mengimport paket react, react-dom juga index.css. disini ada beberapa informasi saya ketikan dibawah ini



// paket didalam node_module
import React from 'react';
import ReactDOM from 'react-dom';

// file yang satu hirarki foolder di awali dengan "./"
import './index.css';
import App from './App'; //ini adalah component

//react dom merender dan memasukannya ke dalam elemen div dengan id root
ReactDOM.render(<App />, document.getElementById('root')); // component yang pertama kali di render


Cara menggunakan import module

keyword "import" ini ada pada javascript ES6 dengan penggunaannya sebagai berikut:


// secara umum
import << nama_module >> from "<< lokasi_module >>"

// import file css perbedaanya hanya dengan tanda kutip " "
import "<< nama_file.css >>";


Untuk penggunaan import export bisa baca artikel disini


React Component

Jika kita sudah mengetahui bawah React memiliki konsep bahwa semua blok elemen yang ada pada website adalah sebuah Komponen (Component), seperti Header, Search field, Content, dan tulisan pun bisa kita sebut dengan Component. Untuk lebih memahami apa yang dimaksud dengan Component disini kita bisa mulai dengan membuka file App.js.


Tutorial React JS Bahasa Indonesia

pada file App.js kita akan melihat baris kode dimana App dibuat dengan class lalu mengektendnya(extends) dengan komponent react bernama Component yang sudah di import diatasnya. lalu didalamnya ada method render() yang me-return element seperti HTML yang sebenarnya adalah sebuah sinstactic sugar pada react untuk membaca elemen HTML di React. nah satu kelas ini bisa disebuat dengan Component. agar lebih paham mungkin kita ubah sedikit kodenya menjadi seperti ini:


// beberapa import dibuang karena tidak digunakan
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <header>
          <h1>Perpusakaan</h1>
        </header>
        <div>
          <p>Perpustakaan react js</p>
        </div>
      </div>
    );
  }
}

export default App;


Maka tampilannya akan seperti berikut ini:


Tutorial React JS Bahasa Indonesia

Kita sudah mencoba merubah konten yang ada dalam Komponen App dan hasilnya sama seperti html seperti biasanya.


Stateless Component dan Statefull Component

Jika kita lihat lagi pada part yang sebelumnya disini, kita bisa membuat component react dengan menggunakan fungsi. mari kita coba ubah dan tambahkan beberapa baris kode berikut ini pada file App.js seperti berikut:



function Header(){
  return(
    <header>
      <h1>Perpustakaan</h1>
    </header>
  )
}

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <div>
          <p>Perpustakaan React JS</p>
        </div>
      </div>
    );
  }
}


diatas adalah 2 komponen namun cara membuatnya berbeda. komponen <Header/> menggunakan function() sedangkan komponen <App/> dibuat dengan class. jika kita melihat browset pasti hasilnya akan sama tidak akan perbedaan. Namun ketika kita menambah state dan props akan terlihat perbedaannya. kita ubah dan tambahkan 1 komponen <Navigasi/>.



// komponen Header
function Header(props){
  return(
    <header>
      <h1>{props.title}</h1>
    </header>
  )
}

// komponen Navigasi
class Navigasi extends Component{
  // tambahkan state untuk navigasi
  state = {
    navigasi : ["Home", "About", "Contact"]
  }
  render(){
    return(
      <nav>
        <span>{this.props.title}</span>
        <ul>
          {this.state.navigasi.map(function(nav, index){
            return(
              <li key={index}>{nav}</li>
            )
          })}
        </ul>
      </nav>
    )
  }
}

// Komponen App
class App extends Component {
  render() {
    return (
      <div>
        <Header title="Perpustakaan"/>
        <Navigasi title="Navigasi"/>
        <div>
          <p>Perpustakaan React JS</p>
        </div>
      </div>
    );
  }
}


Maka hasil di browser akan seperti berikut ini:


Tutorial React JS Bahasa Indonesia

Kita bisa melihat persamaan dari kedua komponen Header dan Navigasi bahwa keduanya sama-sama bisa berjalan dengan baik, namun ada perbedaan dimana pada komponen Navigasi memiliki sebuah state sedangkan komponen Header tidak. Lalu apa yang terjadi jika kita memberi state pada komponen Header.



function Header(props){
  const state = {
   title : "Perpustakaan"
  }

  return(
    <header>
      <h1>{this.state.title}</h1>
    </header>
  )
}


Maka hasilnya akan seperti berikut ini:


Tutorial React JS Bahasa Indonesia

Error terjadi karena state tidak didefinisikan pada komponen yang dibuat menggunakan fungsi. tidak seperti pada kelas kita bisa menggunakan state. Maka dari itulah Komponen yang dibuat dengan function() bisa disebut Stateless Component sedangkan yang dibuat dengan class bisa kita sebut Statefull Component.


Sejauh ini kita sudah belajar membuat aplikasi react pertama kita menggunakan create-react-app dan mengenal yang namanya komponen di React. Selain itu kita juga menemukan istilah props dan juga state. Ini akan saya bahas pada part selanjutnya dimasa yang akan datang. Sekian dulu dari saya, semoga bermanfaat.

Table Of Content

    Contact Form

    Kirim