Modul React JS-1 [PDF]

Citation preview

---

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 . 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. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.



import React, {Component} from 'react';   import './App.css';      class App extends Component {     render(){       return (                    Ini Project Pertama React JS           

Belajar React JS itu mudah

                );     }   }      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 dan menggunakan tag yaitu



-



Kemudian kita coba memanggil selector yang telah dibuat pada component di App.js dengan memodifikasi script sebelumnya seperti berikut ini.



    Ini Project Pertama React JS     Belajar React JS itu mudah

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 (                                 Ini Project Pertama React JS  



          

Belajar React JS itu mudah

             Setuju             Iya Dong                           );     }   }   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 (                    Info           Belajar React JS itu menyenangkan           



    );     }   }   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 (                                                          );     }   }      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 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 (                    {this.props.header}           {this.props.children}                );     }   }  



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 (                                 Ini adalah alert dengan tipe danger                                   Ini adalah alert dengan tipe success                                   Ini adalah alert dengan tipe warning                           );  



Penjelasan: Pada saat pemanggilan elemen menggunakan tambahan atribut yaitu “type” dan “header”. Sedangkan di dalam elemen 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 (                                            {this.props.title}             {this.props.children}                      



    );     }   }   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.              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus             scelerisque ante sollicitudin. Cras purus odio, vestibulum             in vulputate at, tempus viverra turpis                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus             scelerisque ante sollicitudin. Cras purus odio, vestibulum             in vulputate at, tempus viverra turpis     



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 . -



Pada pemanggilan elemen pada fungsi render() terdapat perubahan dalam pengisian atribut. Modifikasi pemanggila elemen Alert menjadi seperti berikut ini.              {this.state.content}     



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 .



1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.



   Alert Control   Tipe Alert        Success     Warning     Danger     Info      Header Alert      Content Alert        



-



Kemudian di bawah fungsi constructor tambahkan beberapa function untuk melakukan perubahan terhadap state yang ada. Tuliskan script berikut ini di bawah fungsi constructor().



1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.



// fungsi untuk mengubah tipe   changeTypeAlert = (event) =>{     this.setState({type: event.target.value});   }   // fungsi untuk mengubah header   changeHeaderAlert = (event) => {     this.setState({header: event.target.value});   }   // fungsi untuk mengubah content   changeContentAlert = (event) => {     this.setState({content: event.target.value});   }  



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