Modul 1

Pengenalan React JS

A. Pengenalan React JS
React JS adalah salah satu framework javascript untuk membuat sebuah User Interface
(UI) pada sebuah aplikasi web. React JS ini dibuat dan dikembangkan oleh Facebook.
Dengan menggunakan React JS, kita dapat membuat sebuah komponen UI sendiri yang
bersifat re-usable atau dapat digunakan secara berulang-ulang.

B. Keunggulan React JS
1. Mudah dipelajari dan mudah digunakan
Persyaratan untuk mempelajari ReactJS adalah cukup mengetahui dasar-dasar
JavaScript, karena konsep-konsep yang digunakan di JavaScript sama dengan React
2. Fleksibel
Hanya dengan belajar satu library saja, yaitu ReactJS, kita dapat membuat aplikasi Web,
Mobile, dan Desktop
3. Eifisien dan cepat
4. Scalable project
5. JSX(Javascript + HTML = JSX)
React menggunakan JSX yaitu JavaScript Syntax XML. JSX membolehkan penulisan
HTML di dalam JavaScript
6. Reusable Component
7. SEO (Search Engine Optimization) friendlyTidak dibutuhkan trik apapun agar aplikasi
web yang dibuat dengan react dapat ter-index oleh mesin pencari dengan mudah

C. Instalasi React JS
a. Download NPM (Node Package Manager) yang include dalam Node JS melalui link
berikut ini https://nodejs.org/en/download/.
b. Lakukan instalasi file yang telah didownload, untuk mengecek keberhasilan instalasi,
buka command prompt dan ketikkan perintah node -v untuk mengecek versi dari Node
JS dan perintah npm -v untuk mengecek versi dari NPM.
c. Setelah itu jalankan perintah npm install -g create-react-app .
 d. Untuk instalasi React JS, buat folder sebagai tempat penyimpanan project, lalu arahkan
direktori pada cmd ke folder yang telah dibuat. Contoh saya akan membuat folder
project react ini pada direktori D:\reactJS\, arahkan direktori pada cmd ke folder
project dengan cara ketikkan cd D:\reactJS lalu tekan enter. Ketikkan perintah
create-react-app react1 (react1 adalah nama project pertama kita, silahkan jika ingin
mengganti nama projek). Tunggu sampai proses instalasi selesai.
e. Setelah proses pembuatan project selesai, silahkan jalankan project yang telah dibuat
dengan menjalankan perintah npm start.
f. Output default yang dihasilkan.

Output Awal React JS

D. Struktur Folder React JS

Setelah kita membuat project React JS, kita mempunyai struktur folder seperti berikut ini.
1. Folder node_module
Folder ini berisi library javascript yang telah disediakan secara otomatis. Library ini
nantinya bisa kita tambahkan sesuai dengan kebutuhan yang ada.
2. Folder public
Folder public digunakan sebagai tempat penyimpanan file html dan favicon. Jika kita
melihat isi dari file index.html, terdapat elemen <div id=”root”></div>. Elemen ini
digunakan sebagai hasil render dari react js.
3. Folder src
 Folder ini digunakan sebagai tempat penyimapan file javascript yang yang berisi kode
program dari react JS. Terdapat file App.js yang digunakan sebagai inti dari kode react
js yang akan kita buat.
E. Alur React JS

App.js index.js index.html

Browser

F. Modifikasi App.js
Buka file App.js pada folder src. Lalu ganti kode program menjadi seperti berikut ini.

1. import React, {Component} from 'react';  
2. import './App.css';  
3.   
4. class App extends Component {  
5.   render(){  
6.     return (  
7.       <div className="App">  
8.         <h3>Ini Project Pertama React JS</h3>  
9.         <p>Belajar React JS itu mudah</p>  
10.       </div>  
11.     );  
12.   }  
13. }  
14.   
15. export default App;  

Penjelasan:

- Pertama kita lakukan import dari library react dan file App.css
- Kita membuat class dengan nama App. Nama App adalah nama elemen yang kita buat
dan kita render pada file HTML.
- Di dalam class App terdapat function render yang berfungsi untuk render elemen yang
ada didalamnya. Di dalam fungsi render inilah kita akan menampilkan dan
menambahkan elemen-elemen yang lain sesuai dengan kebutuhan.
- Export default App  berarti elemen dengan nama App siap untuk diload dan
ditampilkan.
 Jika kita simpan file App.js di atas, maka output yang dihasilkan adalah sebagai berikut.

Output Simple React JS

G. Menambahkan style CSS pada React JS

- Untuk menambahkan style pada halaman web dengan React JS, seluruh asset yang
diperlukan diletakkan pada folder public.
- Buat file css pada folder public, misalkan file CSS diberi nama “style.css”.
- Buat beberapa selector beserta style didalam file tersebut, perhatikan contoh berikut ini.

.judul{
    color: maroon;
    font-family: Tahoma;
    font-size: 25px;
}

.subJudul{
    color: navy;
    font-family: serif;
    font-size: 15px;
}

- Setelah membuat style, kita panggil file tersebut pada file index.html pada folder
public. Pemanggilan file css sama seperti biasanya dengan diletakkan di dalam tag
<head></head>dan menggunakan tag <link> yaitu
<link rel="stylesheet" href="style.css">
- Kemudian kita coba memanggil selector yang telah dibuat pada component di App.js
dengan memodifikasi script sebelumnya seperti berikut ini.

<div className="App">
     <h3 className="judul">Ini Project Pertama React JS</h3>
    <p className="subJudul">Belajar React JS itu mudah</p>
</div>

Output:

H. Menambahkan Bootstrap pada project React JS

- Jalankan perintah berikut ini pada command prompt (pastikan sudah mengarah ke
direktori project react) npm install bootstrap --save. Perintah tersebut digunakan
untuk download bootstrap.
- Jalankan perintah berikut ini pada command prompt npm install jquery popper.js.
perintah tersebut digunakan untuk menambahkan library jquery dan popper.js.
- Buka file src/index.js dan tambahkan baris berikut ini.

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
- Modifikasi elemen yang ada pada function render sehingga menjadi seperti berikut ini.

import React, {Component} from 'react';  

import './App.css';  

  

class App extends Component {  

  render(){  

    return (  

      <div className="App container">  

        <div className="alert alert-info">  

          <h3 className="text-danger">Ini Project Pertama React JS</h3>  
           <p>Belajar React JS itu mudah</p>  

          <button className="mr-1 btn btn-success">Setuju</button>  

          <button className="btn btn-info">Iya Dong</button>  

        </div>  

      </div>  

    );  

  }  

}  

export default App;  

Output dari perubahan yang ada adalah sebagai berikut ini.

Output Load Bootstrap pada React JS

I. Membuat Custom Element
- Buatlah folder baru pada folder src dengan nama Components.
- Buatlah file baru dengan nama Alert.js di dalam folder Components.
- Isikan file tersebut dengan script di bawah ini.

import React, {Component} from 'react';  

class Alert extends Component {  

  render(){  

    return (  

      <div className="alert alert-success">  

        <h4>Info</h4>  

        Belajar React JS itu menyenangkan  

      </div>  
     );  

  }  

}  

export default Alert;  

Penjelasan:
Pada file Alert.js, kita membuat sebuah element baru dengan nama Alert yang di dalam
fungsi render terdapat element pembuatan alert menggunakan bootstrap.
- Modifikasi file App.js sehingga menjadi seperti berikut ini.

import React, {Component} from 'react';  

import './App.css';  

import Alert from './Components/Alert';  

// import element Alert yang telah dibuat  

  

class App extends Component {  

  render(){  

    return (  

      <div className="App container col-sm-6">  

        <Alert />  

        <Alert />  

        <Alert />  

      </div>  

    );  

  }  

}  

  

export default App;  

Penjelasan:
 Pada file App.js, terdapat perintah import Alert from './Components/Alert'; yang
digunakan untuk mengimport elemen yang telah dibuat pada file Alert.js. Pada fungsi
render di class App, terdapat pemanggilan elemen dengan tag <Alert /> yang akan
merender elemen pada file Alert.js. Output hasil dari perubahan yang kita buat adalah
sebagai berikut.

Output custom element dengan React JS

J. Membuat Custom Elemen menggunakan Props

- Pada file Alert.js, modifikasi script di dalamnya sehingga seperti berikut ini.

import React, {Component} from 'react';  

class Alert extends Component {  

  render(){  

    return (  

      <div className={"alert alert-" + this.props.type}>  

        <h4>{this.props.header}</h4>  

        {this.props.children}  

      </div>  

    );  

  }  

}  
 export default Alert;  

Penjelasan:
Value dari props diambil dari atribut saat elemen di panggil. Pada elemen Alert ini
terdapat 3 jenis property yang dikenali yaitu “type”, “header”, dan “children”. Untuk
mengakses value dari props menggunakan {this.props.nama_props}.
- Pada file App.js, modifikasi pada function render sehingga seperti berikut ini.

// berada pada function render  

    return (  

      <div className="App container col-sm-6">  

        <Alert type="danger" header="Fatal Error">  

          Ini adalah alert dengan tipe danger  

        </Alert>  

        <Alert type="success" header="Berhasil">  

          Ini adalah alert dengan tipe success  

        </Alert>  

        <Alert type="warning" header="Warning">  

          Ini adalah alert dengan tipe warning  

        </Alert>  

      </div>  

    );  

Penjelasan:
Pada saat pemanggilan elemen <Alert> menggunakan tambahan atribut yaitu “type”
dan “header”. Sedangkan di dalam elemen <Alert> menyisipkan string sebagai elemen
child dari Alert.
Output dari perubahan dan tambahan yang telah dilalui adalah sebagai berikut.
 Output Custom Element dengan Props

K. Membuat Custom Element dengan Prop #2

- Buatlah folder image pada folder public sebagai penyimpanan gambar. Isi beberapa
gambar di dalam folder tersebut.
- Buat file Media.js pada folder src/Components untuk membuat elemen baru. Isikan
di dalam file tersebut script berikut ini.

import React, {Component} from 'react';  

  

class Media extends Component {  

  render(){  

    return (  

      <div className="media my-3">  

        <img src={process.env.PUBLIC_URL+"/image/"+this.props.image}  

          className="mr-3" alt="media" width="100" />  

        <div className="media-body text-left">  

          <h5 className="mt-0">{this.props.title}</h5>  

          {this.props.children}  

        </div>  

      </div>  
     );  

  }  

}  

export default Media;  

Penjelasan:
Pada class Media tersebut mendefinisikan 3 jenis prop yaitu “image”, “title”, dan
“children”. process.env.PUBLIC_URL digunakan untuk mendefinisikan path folder
public dari project react. Jadi elemen Media ini sebagai kerangka dari beberapa elemen
di dalamnya.
- Pada file App.js, jangan lupa untuk mengimport elemen Media seperti halnya elemen
Alert sebelumnya.
- Di dalam fungsi render pada App, panggil elemen Media seperti berikut ini.

<Media image="react.png" title="React JS">  

          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus  

          scelerisque ante sollicitudin. Cras purus odio, vestibulum  

          in vulputate at, tempus viverra turpis  

 </Media>  

<Media image="angular.png" title="Angular JS">  

          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus  

          scelerisque ante sollicitudin. Cras purus odio, vestibulum  

          in vulputate at, tempus viverra turpis  

</Media>  

Penjelasan:
Pada saat elemen Media dipanggil, terdapat 2 atribut di dalamnya yaitu “image” untuk
menunjukkan nama file yang disimpan pada folder public/image/ dan atribut “title”
untuk menentukan judul dari setiap elemen Media.
Output dari elemen Media di atas adalah seperti berikut ini.
Output Elemen Media
L. Membuat Elemen dengan State dan Props
- Buka file App.js, tambahkan fungsi constructor() di dalam class App seperti berikut ini.

constructor(){  

    super();  

    this.state = {  

      type: "danger",  

      header: "Fatal Error",  

      content: "ini content dari alert"  

    }  

  }  

Penjelasan:
Constructor adalah fungsi yang pertama kali di panggil saat sebuah class dilakukan
proses instance. Berdasarkan fungsi constructor di atas, terdapat pemanggilan fungsi
super() yang menrujuk pada constructor super class.
Setelah itu terdapat pendefinisian state pada class App yang di dalamnya terdapat 3
state, yaitu “type”,”header”, dan “content”. Tiga state tersebut akan diterapkan pada
elemen <Alert>.
- Pada pemanggilan elemen <Alert> pada fungsi render() terdapat perubahan dalam
pengisian atribut. Modifikasi pemanggila elemen Alert menjadi seperti berikut ini.

<Alert type={this.state.type} header={this.state.header}>  

          {this.state.content}  

</Alert>  

Penjelasan:
Nilai atribut pada elemen Alert diisi berdasarkan nilai dari state yang telah dibuat
sebelumnya. Untuk memanggil state menggunakan {this.state.nama_state}.
- Mari kita coba membuat form control untuk mengubah style dan isi dari Alert yang telah
dibuat. Tambahkan elemen berikut ini tepat dibawah elemen <Alert>.
1. <hr />  
2. <h4>Alert Control</h4>  
3. <b className="text-left">Tipe Alert</b>  
4. <select className="form-control" name="type" value={this.state.type}  
5.   onChange={this.changeTypeAlert}>  
6.   <option value="success">Success</option>  
7.   <option value="warning">Warning</option>  
8.   <option value="danger">Danger</option>  
9.   <option value="info">Info</option>  
10. </select>  
11. <b className="text-left">Header Alert</b>  
12. <input  
13.   type="text" name="header" className="form-control" value={this.state.header}  
14.   onChange={this.changeHeaderAlert} />  
15. <b className="text-left">Content Alert</b>  
16. <input  
17.   type="text" name="content" className="form-control" value={this.state.content}  
18.   onChange={this.changeContentAlert} />  
19.   

- Kemudian di bawah fungsi constructor tambahkan beberapa function untuk melakukan

perubahan terhadap state yang ada. Tuliskan script berikut ini di bawah fungsi
constructor().

1. // fungsi untuk mengubah tipe  
2. changeTypeAlert = (event) =>{  
3.   this.setState({type: event.target.value});  
4. }  
5. // fungsi untuk mengubah header  
6. changeHeaderAlert = (event) => {  
7.   this.setState({header: event.target.value});  
8. }  
9. // fungsi untuk mengubah content  
10. changeContentAlert = (event) => {  
11.   this.setState({content: event.target.value});  
12. }  

Penjelasan:
Untuk mengubah nilai dari state menggunakan perintah seperti berikut ini
this.setState({nama_state: value_state});
Output dari hasil pembuatan elemen dengan state dan prop adalah sebagai berikut.
Output Pembuatan Elemen dengan Props dan State