File loading please wait...
Citation preview
Tutorial Lengkap ReactJS (Indonesia) ReactJS Merupakan Salah Satu Library yang Digunakan untuk Membangun User Interface Website
Materi 1: Apa itu React JS Apa itu React JS? React JS adalah sebuah library yang digunakan untuk membangu user interface atau tampilan sebuah website. React JS menggunakan HTML, CSS, dan JavaScript dalam membangun sebuah user interface web. Website Menggunakan React JS Ada banyak website yang telah menggunakan React JS dalam membangun User Interface. Salah satu web yang populer yang menggunakan React JS adalah Tokopedia dan Traveloka. Wappalyzer: Mengalisa Website Wappalyzer adalah salah satu extension yang digunakan untuk mengetahui teknologi apa yang digunakan oleh sebuah website.
Materi 2: Persiapan Project React JS
Install Node.js Install terlebih dahulu Node.js di Sistem Operasi masing-masing. Website Node.js: Node.js Cek Node.js dan NPM Setelah menginstall Node.js, cek terlebih apakah Node.js sudah terpasang di Sistem Operasi masing-masing. Cek Node.js: node -v Cek NPM: npm -v
Materi 3: Install ReactJs Install Create React App Menggunakan ReactJs harus menginstall terlebih dahulu Create Reatc App melalui NPM. Install Create React App: npm i -g create-react-app Note: i: install -g: global Cek Create React App Setelah menginstall Create React App, cek terlebih dahulu apakah sudah terpasang di Sistem Operasi masing-masing. Cek Create React App: create-react-app -v
Materi 4: Membuat dan Menjalankan Project ReactJs Membuat Project React JS Untuk memulai project ReactJs, kita harus terlebih dahulu membuat projectnya melalui Create React App yang sudah diinstall. Membuat projek ReactJs: create-react-app hello-react Perintah di atas akan membuat sebuah projek React Js bernama hello-react. Menjalankan Project
Setelah selesai membuat project, maka selanjutnya jalankan projeknya untuk melihat hasilnya. Menjalankan projek: npm start Akan terbuka sebuah tab di browser yang berisi projek yang sudah dijalankan. Jika tidak terbuka, silahkan buka di browser dan tuliskan localhost:3000.
Materi 5: Install React Developer Tools Install React Developer Tools React Developer Tools adalah sebuah extension yang digunakan untuk membantu atau mempermudah pengembangan aplikasi web menggunakan ReactJS. Install React Developer Tools melalui extension browser masing-masing. React Developer Tools untuk Google Chrome: React Developer Tools.
Materi 6: Hello React Membuat Hello World Membuat tulisan Hello World di ReactJs agar tampil di Browser. 1. 2. 3. 4.
Buka file src/App.js. Uncomment bagian return bawaan dari App.js. Tambahkan kode return Hello World di bagian akhir. Lihat hasilnya di Browser.
Materi 7: Rendering Element Hasil tampilan Hello World di browser diproses melalui beberapa tahapan yang disebut sebagai sebuah proses Rendering Element. Proses Rendering di ReactJs melalui 3 Tahapan. 1. Element yang diproses dituliskan di dalam file src/App.js 2. Element yang ditulis di dalam file src/App.js diimport ke dalam file src/index.js. 3. Hasil rendering src/index.js dikirim ke file public/index.html src/App.js
-> src/index.js -> public/index.html
Kurang lebih seperti itu proses Rendering Element di ReactJs.
Materi 8: Class Component 1 File Materi kali ini kita akan membuat sebuah Component menggunakan Class di dalam 1 file. Membuat Class Component Header Kita akan membuat Class Component bernama Header di dalam file src/App.js class Header extends Component { render() { return (
Makanan Khas Indonesia
); } }
Menampilkan Class Component Header Setelah membuat Class Component Header, agar Class Component Header tersebut tampil di browser, maka kita masukan nama Class Header tersebut ke dalam Class Component App. class App extends Component { render() { return (
Hello World
); } }
Pada kode di atas, kita memasukan Class yang berasal dari Class Component Header ke dalam Class App.
Materi 9: Class Component File Terpisah. Pada materi 8, kita membuat Class Component pada satu file, kali ini kita akan membuat Class Component pada file terpisah. Tujuannya agar Class Component tersebut dapat digunakan berulang kali oleh Class Component yang lain. Membuat Class Component Header Buat sebuah file Header.js di dalam folder src. Pindahkan Class Component Header dari file src/App.js ke src/Header.js
Jangan lupa mengimport React Component terlebih dahulu di baris awal. import React, {Component} from "react";// Class Component Header class Header extends Component { render() { return (
Makanan Khas Indonesia
); } }export default Header;
Di baris terakhir kita mengexport Class Header agar bisa digunakan. Menampilkan Class Component Header Setelah membuat Class Component Header, kita akan menampilkannya ke dalam Class App. Pertama, import terlebih dahulu class Header di dalam file src/App.js dengan menambahkan kode: import Header from ./Header. Setelah diimport, kita bisa menggunakan Class Component Header di dalam file src/App.js. import React, { Component } from 'react'; import Header from './Header';class App extends Component { render() { return (
Hello World
); } }export default App;
Materi 10: Import React Component Dalam pembuatan sebuah Class Component, kita harus mengimport React Component agar sebuah Component dapat dibuat. React Component dapat diimport menggunakan kode berikut: import React, { Component } from 'react';
Setelah React Component diimport, maka kita sudah membisa membuat sebuah Component menggunakan Class. Jika React Component tidak diimport, maka pembuatan Component dipastikan gagal karena tidak ada React Component. Penulisan import React Component juga bisa ditulis seperti ini:
import React from 'react`
Namun setelah penulisan tersebut, ketika ingin membuat Component menggunakan Class, maka pemanggilan Component harus dari Awal (React). class App extends React.Component
Pada class tersebut kita mengetends ke React.Component.
Materi 11: Function Component Dalam 1 File. Selain pembuatan Component menggunakan Class, kita juga dapat membuat Component menggunakan function. Membuat Component Function. Pembuatan Component function sama seperti pembuatan component class, hanya saja kita membuatnya menggunakan sebuah function. const Footer = function() { return (
Halaman Footer Component ini dibuat menggunakan Function bukan Class
); }
Kode di atas kita membuat sebuah function yang disimpan di dalam kontstanta Footer. Menampilkan Component Function. Setelah membuat Component menggunakan function, maka untuk menampilkannya sama seperti menampilkan Component Class. Panggil const Footer di dalam class App di filesrc/App.js. class App extends Component { render() { return (
Component dari Class App
); } }
Materi 12: Function Component File Terpisah Membuat Component Function Membuat sebuah Component Function secara terpisah sama seperti pembuat Component Class secara terpisah. Buat file Footer.js terlebih dahulu di src. Lalu pindahkan Component Function Footer di materi sebelumnya ke file Footer.js. Jangan lupa untuk mengimport terlebih dahulu React Component pada baris pertama. import React, { Component } from 'react';const Footer = function() { return (
Halaman Footer Component ini dibuat menggunakan Function bukan Class
); }export default Footer;
Baris terakhir kita mengexport Component Footer agar bisa digunakan. Menampilkan Component Function Sama seperti menampilkan Component Class dari file lain, Component Function terlebih dahulu diimport ke dalam file src/App.js Import Footer ke file src/App.js: import Footer from './Footer' Lalu panggil Component Footer di Class App. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer';class App extends Component { render() { return (
Component dari Class App
); } }export default App;
Materi 13: Penulisan Function Component Penulisan Component Function
Pada materi sebelumnya kita telah membuat Component Function dengan menyimpannya ke dalam sebuah variabel konstanta. Kita juga dapat membuat sebuah function definition untuk membuat sebuah Component. function Footer() { return (
Halaman Footer Component ini dibuat menggunakan Function bukan Class
); }
pada kode di atas, kita membuat sebuah function Footer yang nantinya akan digunakan sebagai Component Footer. Parsing Nilai ke Component. Kita bisa mengirimkan nilai ke dalam Component lalu ditampilkan menggunakan kurung siku {}. function Footer() { var nama = 'Aufa'; return (
Halaman Footer Component ini dibuat menggunakan Function bukan Class
Nama saya: { nama }
); }
Pada kode di atas, saya membuat variabel nama, lalu variabel tersebut saya panggil menggunakan kurang siku {}. Pemanggilan variabel harus menggunakan kurung siku {}.
Materi 14: Export dan Import Component Export Component Export Component digunakan agar component bisa digunakan oleh Component yang lain. Pada materi sebelumnya kita sudah menulis tentang mengexport component. Export Component Header import React, {Component} from "react";// Class Component Header class Header extends Component { render() { return (
Component dari Class Header
); } }export default Header;
Pada kode di atas kita mengexport Component Class Header di akhir baris. Terdapat penulisan lain yaitu kita bisa secara langsung mengxport component pada baris penulisan Class Component. import React, {Component} from "react";// Class Component Header export default class Header extends Component { render() { return (
Component dari Class Header
); } }
Pada kode di atas, kita mengexport langsung Component di saat pembuatan Class Component Header. Disarankan untuk menggunakan cara pertama: mengexport component di akhir baris. Import Component Setelah mengexport Component, kita dapat menggunakan Component yang telah diexport dengan cara Mengimport Component atau File Component tersebut. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer';class App extends Component { render() { return (
Component dari Class App
); } }export default App;
Pada kode di atas, saya mengimport Component Header dan Footer dari file Header.js dan Footer.js Penulisan extensi .js juga boleh disertakan pada saat import. import Header from './Header.js.
Setelah mengimport Component, kita sudah bisa menggunakan Component tersebut di Class Componen App.
Materi 15: Multiple Component Pada materi sebelumnya kita telah membahas Component Header dan Footer. Selanjutnya kita akan membuat Component lain seperti List dan Image Component. List Component Kita akan membuat List Component. // import React, { Component } from 'react'; import React, { Component } from 'react'; import Image from './Image';class List extends Component { render() { return (
Satu Dua Tiga ); } }export default List;
Pada kode di atas, kita membuat List Component dan juga menggunakan Image Component. Image Component import React, { Component } from 'react';class Image extends Component { render() { return (
); } }export default Image;
Pada kode di Atas kita membuat Image Component yang digunakan di dalam List Component. Selanjutnya kita akan menapilkan List Component di dalam App Component. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; import List from './List';class App extends Component { render() { return (
Component dari Class App
); } }export default App;
Pada kode di di atas, kita menggunakan List Component yang sudah kita buat sebelumnya, di mana List Component berisi Component lain yaitu Image Component. Pada Component App di atas juga dapat disebut sebagai Multiple Component karena kita menggunakan banyak Component di dalam Component App.
Materi 16: Props pada Function Component Membuat Props Props atau properties digunakan untuk menampung nilai yang nantinya dikirimkan ke suatu Component. Contoh Kasus. Pada file src/App.js kita mengirimkan props di Component Footer. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; import List from './List';class App extends Component { render() { return (
Component dari Class App
); } }export default App;
Pada kode di atas, di Component Footer kita membuat dua buah nilai:
judul: Halaman Footer nama: Aufa
Nilai tersebut kita kirimkan ke Component Footer atau File Footer.js. Menampilkan props Pada File Component Footer.js, kita bisa menampilkan Props yang dikirimkan dari App.js.
import React from 'react';// Component menggunakan Functionconst Footer = (props) => { return (
Halaman Footer Component ini dibuat menggunakan Function bukan Class
Nilai ini ditampilkan dari props: { props.judul }
Nama Saya: { props.nama }
); }export default Footer;
Pada kode di atas, kirim mengirimkan sebuah parameter props ke fungsi (anonymous function), lalu parameter tersebut akan kita gunakan untuk mengakses variabel yang dikirimkan dari file App.js. Jika bingung melihat kode tersebut, mungkin ini penulisan sederhana dari function definition. const Footer = function(props) { return (
Halaman Footer Component ini dibuat menggunakan Function bukan Class
{ props.judul }
); }
Fungsi di atas sama seperti penulisan fungsi sebelumnya, hanya saja fungsi yang sebelumnya kita menggunakan arrow function.
Materi 17: Props pada Class Component Menggunakan props, kita bisa mengatur nilai dinamis dari suatu atribut. Contoh Kasus: Kita ingin menampilkan banyak gambar di dalam component list, di mana component list akan menggunakan component image. Kita bisa mengirimkan nilai dinamis kepada atribut src dari component image. Component List // import React, { Component } from 'react'; import React, { Component } from 'react'; import Image from './Image';class List extends Component { render() { return (
Satu
Dua
Tiga
Empat
); } }export default List;
Pada kode di atas, kita membuat empat buah list di mana masing masing list memanggil Component image. Perhatikan: pada component gambar, kita mengatur props linkGambar dengan nilai yang berbeda-beda. Hal ini bertujuan agar Component Image akan memproses nilai atribut src yang berbeda-beda pula. Sekarang kita tinggal mengaturnya di Component Image agar nilai gambar yang digunakan dinamis. Component Image import React, { Component } from 'react';class Image extends Component { render() { return (
); } }export default Image;
Pada kode di atas, kita menggunakan props yang dikirimkan dari Component List. Cara mengaksesnya adalah: this.props.linkGambar. Dengan begitu, setiap gambar yang tampil akan memanggil nilai src yang berbeda-beda, berdasarkan yang sudah kita tentukan di Component List di atas.
Materi 18: Penulisan State
State State digunakan untuk menyimpan data yang nanti akan digunakan oleh Component. Buka file Header.js import React, {Component} from "react";// Class Component Header class Header extends Component { constructor(props) { super(props);this.state = { judul: 'Ini judul dari state', }; } render() { return (
Component dari Class Header { this.state.judul }
); } }export default Header;
Pada kode di atas, kita membuat state yang berisi judul. Kemudia pada return, kita memanggil state judul.
Materi 19: State dan Props Materi kali ini akan membahas bagaimana mengambil data props melalui state. State seperti sebuah variabel yang digunakan untuk menyimpan data. Props adalah properti yang digunakan untuk menampung data di mana props akan mengirimkan datanya ke Component. Data yang dikirimkan oleh Props nantinya akan ditangkap di Component secara langsung atau ditangkap melalui state. State nanti akan digunakan untuk menampung nilai yang dikirimkan oleh Props. App.js import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; import List from './List';class App extends Component { render() { return (
Component dari Class App
);
} }export default App;
Pada kode di atas, kita membuat props list di Component Header. Kita ingin mengakses props list tersebut dari file Header.js. Header.js import React, {Component} from "react";// Class Component Header class Header extends Component { constructor(props) { super(props);this.state = { judul: 'Ini judul dari state', dataMakanan: this.props.list, }; } render() { return (
Component dari Class Header { this.state.judul }
Mengakses props dari App secara langsung: { this.props.list }
Mengakses props dari State: { this.state.dataMakanan }
); } }export default Header;
Pada kode di atas, di dalam state, kita mengambil data props lalu disimpan ke dalam properti dataMakanan. Terakhir kita bisa menampilkan props secara langsung atau menampilkan props yang sudah disimpan di dalam state. Sebaiknya data yang dikirim dari App.js disimpan ke dalam state lalu baru ditampilkan di dalam komponen menggunakan state.
Materi 20: Handling Event pada Component Function Handling Event Pada materi ini, kita akan belajar bagaimana menghandle sebuah event di Reactjs. Buat file Top.js di folder src. import React from 'react';const Top = () => { function handlePesan() { alert('Halaman Top');
}return ( Halaman Top ); };export default Top;
Pada kode di atas, kita membuat Component Function bernama Top. Lalu di dalamnya kita membuat sebuah function handlePesan yang menampilkan pesan. Kemudian pada return, kita menghandle event click, di mana ketika tag a diclick maka akan menjalankan function handlePesan. Import file Top.js di file App.js. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; import List from './List'; import Top from './Top';class App extends Component { render() { return (
Component dari Class App
); } }export default App;
Pada kode di atas, kita menambahkan Component Top yang telah dibuat sebelumnya.
Materi 21: Handling Events pada Class Component Membuat method handlePesan Buka file Header.js. Kita buat terlebih dahulu sebuah method handlePesan yang menampilkan alert setelah method Constructor. handlePesan() { alert('Halaman Header'); };
Handle Event
Setelah membuat method, kita akan melakukan handle event click ketika suatu element (tag a)Materi 21: Handling Events pada Class Component Membuat method handlePesan Buka file Header.js. Kita buat terlebih dahulu sebuah method handlePesan yang menampilkan alert setelah method Constructor. handlePesan() { alert(‘Halaman Header’); }; Handle Event Setelah membuat method, kita akan melakukan handle event click ketika suatu element (tag a) diclick. render() { return (
Component dari Class Header { this.state.judul }
Mengakses props dari App secara langsung: { this.props.list }
Mengakses props dari State: { this.state.dataMakanan }
Halaman Header
); }
Handle Event di Component Class sama seperti meng-handle event di Component Function. Pada kode di atas, kita membuat tag a yang memiliki event click, lalu ketika diclick akan menjalankan method handlePesan. Binding Method. Binding method bertujuan agar method bisa mengakses data state atau props. berikut kode lengkapnya beserta binding method. import React, {Component} from "react";// Class Component Header class Header extends Component { // state constructor(props) { super(props);this.state = { judul: 'Ini judul dari state', dataMakanan: this.props.list, }; this.handlePesan = this.handlePesan.bind(this); }// function handlePesan() { alert('Halaman Header'); };render() { return (
Component dari Class Header { this.state.judul }
Mengakses props dari App secara langsung: { this.props.list }
Mengakses props dari State: { this.state.dataMakanan }
Halaman Header
); } }export default Header;
Pada bagian this.handlePesan = this.handlePesan.bind(this) digunakan agar method handlePesan bisa mengakses data state dan props. Contoh pada method handlePesan kita mengakses data state. handlePesan() { alert(this.state.judul); };
Materi 22: Handling Event dan Parameters Mengirim Parameter Sebuah method bisa dikirimkan parameter yang nanti akan digunakan lebih lanjut oleh method tersebut. Kita akan mencoba mengirim parameter ke method handlePesan. Buka file Header.js. Masukan parameter yang ingin dikirim ke method handlePesan. this.handlePesan('Pesan dari Parameter')} >Halaman Header
Pada kode di atas, kita mengirimkan parameter string yang berisi: Pesan dari Parameter. Selanjutnya pada method handlePesan, buat sebuah parameter yang menghandle pesan atau argumen tersebut. Note: Parameter dan Argumen sering diistilahkan dengan hal yang sama. Parameter didefinisikan di fungsi atau methode, sedangkan argumen pada pemanggilan fungsi. handlePesan(pesan) { alert(pesan); };
Pada kode di atas, kita telah membuat sebuah parameter yang nanti akan menampung sebuah argumen.
Berikut kode lengkapnya import React, {Component} from "react";// Class Component Header class Header extends Component { // state constructor(props) { super(props);this.state = { judul: 'Ini judul dari state', dataMakanan: this.props.list, }; this.handlePesan = this.handlePesan.bind(this); }// function handlePesan(pesan) { alert(pesan); };render() { return (
Component dari Class Header { this.state.judul }
Mengakses props dari App secara langsung: { this.props.list }
Mengakses props dari State: { this.state.dataMakanan }
this.handlePesan('Pesan dari Parameter')} >Halaman Header
); } }export default Header;
Handle parameter ini juga dapat diterapkan pada Component Function.
Materi 23: preventDefault Kita akan belajar bagaimana menjalankan method preventDefault dari sebuah event target. method preventDefault digunakan untuk mencegah atau membatalkan sebuah event. Buka file Header.js. Lalu kirimkan sebuah event target sebagai argumen kedua dari method handlePesan. this.handlePesan('Pesan dari Parameter', e)} >Halaman Header
Pada kode di atas, kita mengirimkan argumen event. Selanjutnya kita akan membuat sebuah parameter yang menampung event target tersebut. handlePesan(pesan, e) { e.preventDefault(); alert(pesan); alert('Hai'); };
Pada kode di atas, kita membuat parameter kedua yang menampung event target.
Lalu kita memanggil method preventDefault dari event target.
Materi 24: setState setState setState berfungsi untuk mengatur atau merubah sebuah nilai. Penulisan setState sama seperti halnya mengatur sebuah properti, mari kita lihat contohnya. Buat sebuah file Main.js. import React, { Component } from 'react';class Main extends Component { constructor(props) { super(props); this.state = { title: 'Menu Makanan', } this.rubahData = this.rubahData.bind(this); }rubahData() { this.setState({ title: 'Pilih Makanan' }); }render() { return(
{ this.state.title } Ubah Makanan
); }; }export default Main;
Kita coba membahas tentang setState saja agar tidak terlalu panjang, karena yang lainnya sudah dibahas sebelumnya. pada method constructor, kita mengatur state title dengan nilai ‘Menu Makanan’. lalu pada method rubahData, kita mengatur nilai state dengan fungsi setState untuk mengubah title menjadi ‘Pilih Makanan’. Note: Sebenarnya kita bisa mengubah nilai property state title secara langsung seperti ini this.state.title = 'Pilih Makanan'. Namun di ReactJS tidak bisa mengatur nilai property secara langsung. Seperti pesan warning yang muncul: Do not mutate state directly. Use setState() oleh karena itu, kita menggunakan setState untuk mengubah nilai dari property state title. Menampilkan Main.js Selanjutnya kita akan mencoba menampilkan Main.js di src/App.js.
Jika dilihat pada kode Main.js, ketika kita meng-click tombol Ubah Makanan maka akan menjalankan function rubahData. Di dalam method rubahData kita mengubah nilai property state title menjadi ‘Pilih Makanan’. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; import List from './List'; import Top from './Top'; import Main from './Main';class App extends Component { render() { return (
Component dari Class App
); } }export default App;
Pada kode di atas, kita melakukan hal seperti biasa yaitu mengimport Component Main.js lalu menampilkannya pada App.js di statement return.
Materi 25: Penulisan setState setState juga dapat ditulis menggunakan arrow function. rubahData() { this.setState((state, props) => { return { title: 'Pilih Makanan' }; }); }
Pada kode diatas, kita menuliskan setState menggunakan arrow function. Kode di atas fungsinya sama seperti materi sebelumnya yaitu memberi nilai state title menjadi ‘Pilih Makanan’. Penulisan ini lebih disarankan dalam menggunakan setState.
Materi 26: Multiple State Multiple State bertujuan untuk membuat lebih dari state. constructor(props) { super(props); this.state = { title: 'Menu Makanan', title2: 'Menu Minuman',
} this.rubahData = this.rubahData.bind(this); }
Pada kode di atas, di dalam method constructor kita membuat state title2 dengan nilai ‘Menu Minuman’. setState Jika ingin mengubah nilai multipleState, dapat menggunakan method setState. rubahData() { this.setState((state, props) => { return { title: 'Pilih Makanan', title2: 'Pilih Menu Minuman', }; }); }
Pada method rubahData, kita mengubah nilai title2 menjadi ‘Pilih menu Minuman’. Mengabil data State Constructor Jika ingin mengambil properti state dari constructor, cukup menuliskan state.property saja. rubahData() { this.setState((state, props) => { return { title: state.title2, title2: state.title, }; }); }
Pada kode di atas, nilai properti title diubah menjadi title2 dengan memanggil state.title2 tanpa harus menuliskan keyword this.
Materi 27: Handle Event onChange Event onChange adalah event yang akan berjalan jika terjadi perubahan pada suatu element. method handleChange Kita membuat method handleChange untuk menampilkan pesan jika nanti suatu element terdapat perubahan value atau nilai. handleChange() { console.log('Data diubah'); }
Method tersebuh akan menampilkan pesan yang nanti akan dipanggil jika terjadi event onChange.
Note: Daftarkan method handleChange ke dalam constructor. constructor(props) { super(props); this.state = { title: 'Menu Makanan', title2: 'Menu Minuman', } this.rubahData = this.rubahData.bind(this); this.handleChange = this.handleChange.bind(this); }
event onChange. Kita akan membuat tag input dan membuat event onChange yang memanggil method handleChange.
Pada kode di atas, tag input ditambahkan event onChange, di mana ketika terjadi perubahan pada kolom inputan maka jalankan method handleChange.
Materi 28: Event Target Value Kita akan mengambil nilai atau value dari tag input. Pada tag input, kita akan menampilkan value atau nilai yang diinput pada kolom input. Caranya sederhana, kita bisa memasukkan parameter event object pada method handleChange. handleChange(e) { // console.log('Data diubah'); console.log(e.target.value); }
Pada kode di atas, kita memasukkan parameter event object, lalu setelah itu kita memanggil nilai dari event target tersebut yaitu memanggil atau menampilkan nilai tag input.
Materi 29: Set Default Input Value Pemberian nilai default pada tag input. Biasanya pemberian nilai default pada tag input dengan langsung memasukkan nilai pada atribut value.
Cara tersebut tidak salah, namun di ReactJS untuk pemberian nilai default tidak ditulis secara hardcore atau secara langsung.
Pemberian nilai pada atribut value sebaiknya dideklarasikan properti dulu pada state, lalu properti state tersebut dimasukkan ke atribut value. constructor(props) { super(props); this.state = { title: 'Menu Makanan', title2: 'Menu Minuman', inputValue: 'Aufa Billah', } this.rubahData = this.rubahData.bind(this); this.handleChange = this.handleChange.bind(this); }
Pada kode di atas, saya membuat properti inputValue dengan nilai ‘Aufa Billah’. Selanjutnya kita tinggal memanggil nilai tersebut ke dalam atribut value.
Cara seperti ini lebih disarankan, nilai dari atribut value sebaiknya disimpan terlebih dahulu di dalam state. Tujuan dari state sendiri adalah untuk menampung nilai atau data yang nanti digunakan oleh berbagai component atau element.
Materi 30: Menghubungkan State dan Input Value Menghubungkan nilai input ke state. Jika menjalankan materi 29, pasti menemukan suatu kejanggalan. Nilai baru yang diinput tidak terupdate pada kolom input. Ini terjadi karena nilai dari atribut value sudah diset pada properti inputValue state. Cara untuk mengupdate nilai properti inputValue state adalah dengan mengupdate nilai terbaru yang terjadi pada event change lalu disimpan ke dalam properti inputValue state. handleChange(e) { this.setState({ inputValue: e.target.value, }); }
Pada kode di atas, kita mengubah nilai properti inputValue dengan nilai baru yang diinput ke dalam kolom input, sehingga nilai dari atribut value sudah berubah dengan nilai yang baru.
Materi 31: Comment
Comment digunakan untuk mendisable code tertentu. Comment di ReactJs sama seperti Comment di JavaaScript. Comment bisa dilakukan dengan tanda //pada awal kode yang ingin dikomen. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; import List from './List'; import Top from './Top'; // import Main from './Main';
Pada kode di atas, kita melakukan comment pada bagian import component Main. Baris kode tersebut tidak akan dijalankan di ReactJS. Comment di Return Sedikit berbeda jika ingin melakukan comment di dalam Return. Untuk melakukan comment di dalam return dapat menggunakan tanda kurung {}pada bagian yang ingin dikomen lalu diikuti tanda //pada bagian kode yang dikomen. return (
Component dari Class App { // }
);
Pada kode di atas, kita melakukan comment pada bagian Component List. Caranya dengan memberi komentar biasa //lalu component yang sudah di-comment harus dibungkus dalam kurung siku {}.
Materi 32: Dynamic Method Kita akan membuat method handleChange menjadi dynamic sehingga dapat mengupdate nilai inputan secara dinamis. Buka file Main.js. Tambahkan sebuah tag input lagi:
this.handleChange('inputKota', e) } />
Pada kode di atas, pada event onChange kita mengirimkan 2 argumen:
Argumen pertama yaitu properti state. Argumen kedua yaitu nilai yang diinput.
Selanjutnya kita mengupdate method handleChange agar menjadi dinamis. handleChange(value, e) { this.setState({ [value]: e.target.value, }); }
Pada kode di atas, kita membuat 2 parameter yang menampung argumen pertama dan kedua. kita mengatur properti state yang didapatkan pada argumen pertama dengan nilai yang didapat dari tag input. Jika terdapat tag input lain yang mengirimkan nilai, maka nilainya akan secara otomatis terupdate pada state properti sendiri.
Materi 33: componentDidMount componentDidMount adalah component bawaan dari ReactJS. method componentDidMount akan berjalan secara otomatis setelah fungsi render dijalankan. method componentDidMount componentDidMount() { console.log('Jalan: componentDidMount'); }
Pada kode di atas, kita menampilkan pesan pada method componentDidMount. method componentDidMount berjalan secara otomatis setelah fungsi render berjalan.
Materi 34: Conditional Rendering 1 Melakukan Conditional Rendering atau Percabangan atau if else di Component ReactJS. Kita akan melakukan conditional rendering secara inline. Buka file Header.js. Tambahkan sebuah properti state: statusRendering: truedi dalam state. Buat conditional rendering pada fungsi return
return(
{ this.state.statusRendering === true ? (Selamat Datang) : (Selamat Tinggal) }
);
Pada kode di atas kita membuat conditional atau if else. Jika properti this.state.statusRenderingbernilai true make jalankan Selamat Datang. Namun, jika properti this.state.statusRenderingbernilai false makan jalankan Selamat Tinggal. Penulisan ini merupakan penulisan conditional secara inline.
Materi 35: Conditional Rendering 2 Menampilkan multi element di dalam conditional rendering. Kita ingin menampilkan lebih dari satu element di dalam conditonal rendering. Untuk menampilkan multi element cukup dibungkus di dalam tag div. return(
{ this.state.statusRendering === true ? (
Selamat Datang Hai Aufa
) : (
Selamat Tinggal Semoga Bertemu Kembali Aufa
) }
);
Pada kode di atas, pada kondisi true, kita menampilkan 2 buah element yang dibungkus di dalam tag div.
Materi 36: Conditional Rendering 3 Kita akan mengubah nilai state statusRendering melalui method. method handleElement handleElement() { this.setState((state, props) => {
return { statusRendering: !state.statusRendering }; }); }
Pada kode di atas, kita mengubah nilai properti statusRendering menjadi nilai negasi atau nilai kebalikannya. pada fungsi return, buat sebuah tombol yang menjalankan method handleElement. return(
{ this.state.statusRendering === true ? (
Selamat Datang Hai Aufa
) : (
Selamat Tinggal Semoga Bertemu Kembali Aufa
) } Change
);
Pada kode di atas, pada tag button kita menjalankan method handleElement. Pada method handleElement kita mengubah nilai properti statusRendering menjadi negasi. Terakhir, pada method rendering akan ditampilkan conditional sesuai nilai state properti statusRendering.
Materi 37: List dan Key dari State Buka file Main.js. Tambahkan state namaMakana yang berisi array of object. constructor(props) { super(props); this.state = { title: 'Menu Makanan', title2: 'Menu Minuman', inputValue: '', inputKota: '', namaMakanan: [ { nama: 'Mie Ayam', harga: 10000 }, { nama: 'Bakso', harga: 12000
}, { nama: 'Soto Ayam', harga: 15000 }, ], } this.rubahData = this.rubahData.bind(this); this.handleChange = this.handleChange.bind(this);
}
Pada kode di atas, kita membuat property namaMakanan yang berisi array of object. Selanjutnya kita ingin mengakses properti state namaMakanan menggunakan method map. return(
{ this.state.title } { this.state.title2 } Ubah Makanan
this.handleChange('inputValue', e) } /> this.handleChange('inputKota', e) } />{this.state.namaMakanan.map((value, index) => { return (
No {index}
Nama {value.nama}
Harga {value.harga}
); })};
);
pada kode di atas, kita menjalanka method map untuk mengakses value dan index dari properti namaMakanan. Lalu terakhir kita menampilkan hasilnya.
Materi 38: List dan Key dari Props Selanjutnya kita akan belajar bagaimana cara mengambil list dan key dari data props. Buat data List dan Key di Props App.js di Component Main.
Pada Component Main di dalam Component App, kita membuat data props yang berisi data array of object. Selanjutnya tampilkan data props tersebut dari Component Main.js {this.props.namaMakanan.map((value, index) => { return (
No {index}
Nama {value.nama}
Harga {value.harga}
); })};
Seperti materi sebelumnya, pada kode di atas kita cukup menggantikan keyword state menjadi props karena yang kita panggil adalah data dari props.
Materi 39: List dan Key dari Internal File. Membuat List dan Key dari Internal File. Buka file Main.js. Buat sebuah variabel constanta yang berisi array of object. const namaMakanan = [ { nama: 'Mie Ayam', harga: 10000 }, { nama: 'Bakso', harga: 12000 }, { nama: 'Soto Ayam', harga: 15000 }, ];
Pada method return, panggil constanta makanan dan tampilkan menggunakan method map. {namaMakanan.map((value, index) => { return (
No {index}
Nama {value.nama}
Harga {value.harga}
); })}
Pada kode di atas, kita menampilkan nilai dari konstanta namaMakanan menggunakan method Map.
Materi 40: List dan Key dari External File. Membuat List dan Key dari Internal File. Kita akan mengambil data List dari External File. Buat file Food.js di folder src/components/lib. Buka file Food.js, dan buat konstanta namaMakanan yang berisi array of object. const namaMakanan = [ { nama: 'Mie Ayam', harga: 10000 }, { nama: 'Bakso', harga: 12000 }, { nama: 'Soto Ayam', harga: 15000 }, ];export default namaMakanan;
Pada kode di atas kita membuat konstanta namaMakanan yang berisi data array of object. Lalu pada bagian akhir, kita mengexport konstanta namaMakanan. Import di Main.js Selanjutnya, kita import namaMakanan yang sudah kita export pada file Food.js tadi. import namaMakanan from './lib/Food';
Tampilkan namaMakanan menggunakan method Map di dalam method return. {namaMakanan.map((value, index) => { return (
No {index}
Nama {value.nama}
Harga {value.harga}
); })}
Pada kode di atas, kita menampilkan konstanta makanan yang sudah diimport dari file Food.js menggunakan method Map.
Materi 41: Forms Membuat dan menangani Forms. Buat file Form.js di dalam folder src/components. import React, {Component} from 'react';class Form extends Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(e) { this.setState({value: e.target.value}); } handleSubmit(e) { e.preventDefault(); alert('Pesan input adalah: '+this.state.value); } render() { return(
); } }export default Form;
Buka file App.js, lalu import Forms.js. import Form from './Form';
Panggil Component Form. import React, { Component } from 'react'; import Header from './Header'; import Footer from './Footer'; // import List from './List'; import Top from './Top'; // import Main from './Main'; import Form from './Form';class App extends Component { render() { return (
{ // // Component dari Class App // }
); } }export default App;
Materi 42: Refs Refs digunakan untuk mengakses DOM. Buka file CustomInput.js di dalam folder src/components.
Buat Refs. Buat property textInput di dalam constructor yang berisi object createRef. this.textInput = React.createRef();
Akses Refs. pada tag input, tambahkan atribut refs yang memiliki nilai textInput.
Lalu terakhir, setelah dapat mengakses refs, kita mencoba untuk memberikan event focus pada tag input. handleInput() { this.setState({value: ''}); this.textInput.current.focus(); }
Kode Lengkapnya: import React, {Component} from 'react';class CustomInput extends Component { constructor(props) { super(props); this.state = { value: 'Input Pertama', }; this.handleInput = this.handleInput.bind(this); this.textInput = React.createRef(); }handleInput() { this.setState({value: ''}); this.textInput.current.focus(); }render() { return(
Kirim
);
} }export default CustomInput;
Materi 43: Refs Lanjutan Refs digunakan untuk mengakses dom dan react element. Buka file CustomInput.js.
method handleChange. pada tag input di atas, kita belum membuat method handleChange yang akan menangani data input dinamis. buat method handleChange. handleChange(e) { this.setState({value: e.target.value}) }
Lalu, jangan lupa untuk binding method handleChange. this.handleChange = this.handleChange.bind(this);
Event onChange Tambahkan event onChange pada tag input yang menjalankan method handleChange. this.handleChange(e)} />
Kode lengkapnya import React, {Component} from 'react';class CustomInput extends Component { constructor(props) { super(props); this.state = { value: 'Input Pertama', }; this.handleInput = this.handleInput.bind(this); this.handleChange = this.handleChange.bind(this); this.textInput = React.createRef(); }handleInput() { this.setState({value: ''}); this.textInput.current.focus(); }handleChange(e) {
this.setState({value: e.target.value}) }render() { return(
this.handleChange(e)} /> Kirim
); } }export default CustomInput;
Materi 44: CSS Inline Menulis kode CSS secara inline. Buka file Header.js. Penulisa CSS secara inline ditulis di dalam kurung kurawal {}yang berisi object. Selamat Datang
Pada kode di atas, kita memberikan CSS secara inline yang nilainya tersebut merupakan sebuah object yang dibungkus di dalam kurung kurawal. Note: Penulisan property yang terdiri lebih dari 1 suku kata harus ditulis secara camelCase. Contoh:
background-color menjadi backgroundColor margin-top menjadi marginTop
Materi 45: CSS Internal Menulis kode CSS secara internal. Buat variabel judul yang berisi properti dan nilai properti css. const judul = { color: 'red', backgroundColor: 'blue', marginTop: '10px', };
Tambahkan atribut style pada element, lalu panggil variabel judul yang berisi property css. Hai Aufa
Penulisan secara internal di ReactJS mungkin terlihat seperti penulisan secara inline, karena kita tetap memanggil atribut style pada element. Namun penulisan seperti ini yang disebut sebagai penulisan internal di ReactJS, mungkin berbeda ketika menulis CSS Internal seperti biasa. Di mana kita menulis tag style yang didalamnya terdapat selector yang diberi berbagai property. Note: Jika kode css yang ditulis sedikit, lebih baik menggunakan penulisan secara inline dibandingkan penulisan secara internal.
Materi 46: CSS Eksternal. Menulis CSS secara eksternal. Penulisan CSS Eksternal di ReactJs sama seperti penulisan CSS biasa, kita hanya perlu mengimport file CSS Eksternal saja menggunakan keyword importdiikuti nama file css. Buat file header.css di dalam folder src/components.
Import Header.css Setelah membuat header.css, kita akan mengimport file header.css ke dalam Header.js agar bisa digunakan. Import file header.css ke dalam header.js import './header.css';
Styling Beri sebuah id judulH2 ke element h2. Hai Aufa
Buka file Header.css, lalu styling selector id judulH2. #judulH2 { color: white; background-color: blue; }
Kode lengkapnya header.js pada method return return(
{ this.state.statusRendering === true ? (
Selamat Datang
Hai Aufa
) : (
Selamat Tinggal Semoga Bertemu Kembali Aufa
)
);
} Change
Materi 47: CSS className Penulisan attribut class di dalam ReactJS. Penulisan atribut class di dalam ReactJS bukan ditulis menggunakan class, namun ditulis menggunakan className. Buat atribut className yang berisi nilai subJudul pada element h2. `Hai Aufa
Jika ingin diberikan styling, maka kita tinggal memanggil saja selector className tersebut seperti selector class dengan menggunakan tandatitik .. buka file header.css. .subJudul { color: green; background-color: yellow; }
Pemanggilan selector className sama seperti pemanggilan selector class yaitu dengan menggunakan tanda titik dan diikuti nilai class atau className.
Materi 48: Install Routing Install react-router-dom.
Buat Folder Home Buat folder home di dalam src/component. Buat folder home di dalam folder src/components. Lalu pindahkan seluruh isi file dan folder src/components ke dalam folder home.
Install react-router-dom
install react-router-dom Buka file package.json di dalam folder src. Buka terminal pada folder hello-react. Lalu install react-router-dom. npm install --save react-router-dom
Cek pada file package.json bahwa react-router-dom telah ditambahkan yang berarti berhasil diinstall.
Materi 49: Penerapan Routing Menerapkan Routing di ReactJS.
appRouter buat file appRouter.js. Buat file appRouter.js di foler src. import React from 'react'; import {BrowserRouter, Route} from 'react-router-dom'; import App from './components/home/App'; import Contact from './components/page/Contact';const AppRouter = () => { return (
); };export default AppRouter;
Penjelasan kode di atas:
kita membuat routing default yaitu / yang akan menampilkan component App.
index.js Ubah render ke AppRouter. Buka file index.js di folder src. Import Component AppRouter yang dibuat pada file appRouter.js. Lalu ubah render dom dari component App ke Component AppRouter.
import React from 'react'; import ReactDOM from 'react-dom'; // import App from './components/home/App'; import AppRouter from './appRouter'; import * as serviceWorker from './serviceWorker';ReactDOM.render(, document.getElementById('root'));serviceWorker.unregister();
Menambahkan Routing Baru Membuat routing contact. Buat file contact.js di dalam folder src/components/page. Buat component Contact yang menampilkan informasi sederhana. import React from 'react';const Contact = () => { return (
Halaman Contact
085218201440
); };export default Contact;
Buka file appRouter.js Selanjutnya buat yaitu routing contact yang akan menampilkan component contact. import React from 'react'; import {BrowserRouter, Route} from 'react-router-dom'; import App from './components/home/App'; import Contact from './components/page/Contact';const AppRouter = () => { return (
); };export default AppRouter;
Penjelasan kode di atas:
kita membuat routing contact yang akan menampilkan component Contact.
Materi 50: Navigasi Routing Navigasi Routing Kita akan membuat navigasi routing menggunakan Link. Tambahkan kode berikut:
Kita membuat 2 buah navigasi routing yang mengarah ke routing home dan contact yang telah didefinisikan sebelumnya. Kode lengkapnya: import React from 'react'; import {BrowserRouter, Route, Link} from 'react-router-dom'; import App from './components/home/App'; import Contact from './components/page/Contact';const AppRouter = () => { return (
); };export default AppRouter;
Materi 51: React with Bootstrap React dengan Bootstrap
Buat Project Baru Membuat Project Baru Buka terminal, lalu buat project baru create-react-app hello-bootstrap
Install Bootstrap dan React-Bootstrap
Install Bootstrap dan React-Bootstrap Langkah selanjutnya agar bisa menggunakan bootstrap adalah menginstall 2 package tersebut: npm install bootstrap react-bootstrap
Import CSS Gunakan CSS agar bisa menggunakan boostrap, tambahkan link css bootstrap di file index.html pada folder public.
Test Bootstrap Buka file App.js, lalu buat container dan tag h1. import React, { Component } from 'react'; import { Button } from 'react-bootstrap';class App extends Component { render() { return (
Testing Hello Bootstrap
); } }export default App;
Materi 52: Layout dan Media Layout Membuat Layout Membuat layout menggunakan bootstrap di ReactJS sama seperti menggunakan layout biasa, namun kita menggunakan component dari React Bootstrap.
1 of 2 2 of 2
1 of 3
2 of 3 3 of 3
Media Membuat media. Kita bisa membuat media menggunakan component media.
Media Heading
Makanan Sate
Media Heading
Makanan Sate
Materi 53: Alert Menggunakan Alert Menggunakan Alert di Bootstrap ReactJs.
Pesan Alert
Materi 54: Badge Menggunakan Component Badge Badge Baru
Materi 55: Breadcrumb Menggunakan Component BreadCrumb di ReactJS.
Home Library Profile
Materi 56: Button Menggunakan Component Button di ReactJS. Tombol
Materi 57: Button Group Menggunakan Component Button Group di ReactJS.
1 2 3 4 5
Materi 58: Cards Component Cards Bootstrap
Card Title
Some quick example text to build on the card title and make up the
bulk of the card's content.
Go Somewhere
Materi 59: Carousel Component Carousel Bootstrap
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Materi 60: Dropdowns Component Dropdown Bootstrap
Dropdown Button
Action Action Action Something
Materi 61: Forms
Component Form Bootstrap
Nama
Email
Materi 62: Input Group Component Input Group
@
Materi 63: Images Component Images Bootstrap
Materi 64: Figure Component Figure Bootstrap
Lorem ipsum set dollar
Materi 65: Jumbotron Component Jumbotron Bootstrap
Hello World
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
Learn More
Materi 66: List Group Component List Group Bootstrap
Nasi Goreng Mie Goreng Nasi Uduk
Materi 67: Modal Component Modal Bootstrap
Modal Title
Modal Body Here
Close
Materi 68: Nav Component Nav Bootstrap
Home
About
Contact
Materi 69: Navbar Component Navbar Bootstrap
Logo
Home
About
Contact
Search
Materi 70: Overlays Component Overlays Bootstrap const popover = ( This is popover ); Munculkan Overlay
Materi 71: Pagination Component Pagination Bootstrap
1 2 3
Materi 72: Progress Bar Component Progress Bar Bootstrap
Materi 73: Table Component Table Bootstrap
No | Nama | Menu | Harga |
|---|
| 1 | Nasi Goreng | Makanan | 20.000 |
| 2 | Mie Goreng | Makanan | 15.000 |
Materi 74: Tabs Component Tabs Bootstrap
Halaman home
Halaman about
Halaman contact
Materi 75: Collapse Component Collapse Bootstrap Buat sebuah state constructor(props) { super(props); this.state = { buka: true, }; }
state ini bertujuan untuk menampung nilai dari hasil collapse nanti. Buat component collapse {this.setState({buka: ! this.state.buka})}}>Click
Show paragraph
Sekian tutorial ReactJS yang bisa digunakan untuk membangun user interface website.
![Tutorial Lengkap ReactJS [PDF]](https://pdfs.asia/img/200x200/tutorial-lengkap-reactjs.jpg)
