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. Buka file src/App.js.

2. Uncomment bagian return bawaan dari App.js.
3. Tambahkan kode return <h1>Hello World</h1> di bagian akhir.
4. 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 (
<div>
<h2>Makanan Khas Indonesia</h2>
</div>
);
}
}

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 (
<div>
<Header/>
<h1>Hello World</h1>
</div>
);
}
}

Pada kode di atas, kita memasukan Class <Header/> 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 (
<div>
<h2>Makanan Khas Indonesia</h2>
</div>
);
}
}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 (
<div>
<Header/>
<h1>Hello World</h1>
</div>
);
}
}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 (
<div>
<h3>Halaman Footer</h3>
<h3>Component ini dibuat menggunakan Function bukan Class</h3>
</div>
);
}

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 (
<div>
<Header/>
<h1>Component dari Class App</h1>
<Footer/>
</div>
);
}
}
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 (
<div>
<h3>Halaman Footer</h3>
<h3>Component ini dibuat menggunakan Function bukan Class</h3>
</div>
);
}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 (
<div>
<Header/>
<h1>Component dari Class App</h1>
<Footer/>
</div>
);
}
}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 (
<div>
<h3>Halaman Footer</h3>
<h3>Component ini dibuat menggunakan Function bukan Class</h3>
</div>
);
}

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 (
<div>
<h3>Halaman Footer</h3>
<h3>Component ini dibuat menggunakan Function bukan Class</h3>
<p>Nama saya: { nama } </p>
</div>
);
}

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 (
<div>
 <h2>Component dari Class Header</h2>
</div>
);
}
}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 (
<div>
<h2>Component dari Class Header</h2>
</div>
);
}
}

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 (
<div>
<Header/>
<h1>Component dari Class App</h1>
<Footer/>
</div>
);
}
}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 (
<div>
<Image/>
<ol>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>
</div>
);
}
}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 (
<img src="https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/food1.jpg" alt="Food" width='500' />
);
}
}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 (
<div>
<Header/>
<h1>Component dari Class App</h1>
<List/>
 <Footer/>
</div>
);
}
}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 (
<div>
<Header/>
<h1>Component dari Class App</h1>
<List/>
<Footer judul='Halaman Footer' nama='Aufa' />
</div>
);
}
}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 (
<div>
<h3>Halaman Footer</h3>
<h3>Component ini dibuat menggunakan Function bukan Class</h3>
<p>Nilai ini ditampilkan dari props: { props.judul } </p>
<p>Nama Saya: { props.nama } </p>
</div>
);
}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 (
<div>
<h3>Halaman Footer</h3>
<h3>Component ini dibuat menggunakan Function bukan Class</h3>
<p>{ props.judul }</p>
</div>
);
}

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 (
<div>
<ol>
<li>
Satu
<Image linkGambar='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/food1.jpg' />
</li>
<li>
Dua
<Image linkGambar='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/nasipadang.jpg' />
</li>
<li>
Tiga
<Image linkGambar='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/sate.png' />
</li>
<li>
Empat
<Image linkGambar='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/sotolamongan.png' />
</li>
</ol>
</div>
);
}
}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 (
<img src={ this.props.linkGambar } alt="Food" width='500' />
);
}
}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 (
<div>
<h2>Component dari Class Header</h2>
<h3>{ this.state.judul }</h3>
</div>
);
}
}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 (
<div>
<Header list='10 Daftar Makanan' />
<h1>Component dari Class App</h1>
<List />
<Footer judul='Halaman Footer' nama='Aufa Billah' />
 </div>
);
}
}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 (
<div>
<h2>Component dari Class Header</h2>
<h3>{ this.state.judul }</h3>
<p>Mengakses props dari App secara langsung: { this.props.list }
</p>
<p>Mengakses props dari State: { this.state.dataMakanan } </p>
</div>
);
}
}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 (
<a href='/' onClick={handlePesan}>Halaman Top</a>
);
};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 (
<div>
<Header list='10 Daftar Makanan' />
<Top />
<h1>Component dari Class App</h1>
<List />
<Footer judul='Halaman Footer' nama='Aufa Billah' />
</div>
);
}
}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 (
<div>
<h2>Component dari Class Header</h2>
<h3>{ this.state.judul }</h3>
<p>Mengakses props dari App secara langsung: { this.props.list } </p>
<p>Mengakses props dari State: { this.state.dataMakanan } </p>
<a href='/' onClick={this.handlePesan} >Halaman Header</a>
</div>
);
}

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 (
<div>
 <h2>Component dari Class Header</h2>
<h3>{ this.state.judul }</h3>
<p>Mengakses props dari App secara langsung: { this.props.list }
</p>
<p>Mengakses props dari State: { this.state.dataMakanan } </p>
<a href='/' onClick={this.handlePesan} >Halaman Header</a>
</div>
);
}
}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.

<a href='/' onClick={()=>this.handlePesan('Pesan dari Parameter')} >Halaman

Header</a>

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 (
<div>
<h2>Component dari Class Header</h2>
<h3>{ this.state.judul }</h3>
<p>Mengakses props dari App secara langsung: { this.props.list }
</p>
<p>Mengakses props dari State: { this.state.dataMakanan } </p>
<a href='/' onClick={()=>this.handlePesan('Pesan dari Parameter')}
>Halaman Header</a>
</div>
);
}
}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.

<a href='/' onClick={(e)=>this.handlePesan('Pesan dari Parameter', e)}

>Halaman Header</a>

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(
<div>
<h3>{ this.state.title }</h3>
<button onclick={ this.rubahData }>Ubah Makanan</button>
</div>
);
};
}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 (
<div>
<Header list='10 Daftar Makanan' />
<Main />
<Top />
<h1>Component dari Class App</h1>
<List />
<Footer judul='Halaman Footer' nama='Aufa Billah' />
</div>
);
}
}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.

<input type='text' onChange={ this.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.

<input type='text' value='Aufa' />

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.

<input type='text' onChange={ this.handleChange } />

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 (
<div>
<Header list='10 Daftar Makanan' />
<Main />
<Top />
<h1>Component dari Class App</h1>
{
// <List />
}
<Footer judul='Halaman Footer' nama='Aufa Billah' />
</div>
);

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:

<input type='text' value={ this.state.inputKota } placeholder='kota'
onChange={ (e) => 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(
<div>
{ this.state.statusRendering === true ? (<h1>Selamat Datang</h1>) :
(<h1>Selamat Tinggal</h1>) }
</div>
);

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(
<div>
{ this.state.statusRendering === true ? (
<div>
<h1>Selamat Datang</h1>
<h2>Hai Aufa</h2>
</div>
) : (
<div>
<h1>Selamat Tinggal</h1>
<h2>Semoga Bertemu Kembali Aufa</h2>
</div>
)
}
</div>
);

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(
<div>
{ this.state.statusRendering === true ? (
<div>
<h1>Selamat Datang</h1>
<h2>Hai Aufa</h2>
</div>
) : (
<div>
<h1>Selamat Tinggal</h1>
<h2>Semoga Bertemu Kembali Aufa</h2>
</div>
)
}
<button onClick={ this.handleElement }>Change</button>
</div>
);

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(
<div>
<h3>{ this.state.title }</h3>
<h2>{ this.state.title2 }</h2>
<button onClick={ this.rubahData }>Ubah Makanan</button><br/><br/>
<input type='text' value={ this.state.inputValue } placeholder='makanan'
onChange={ (e) => this.handleChange('inputValue', e) } />
<input type='text' value={ this.state.inputKota } placeholder='kota'
onChange={ (e) => this.handleChange('inputKota', e) }
/>{this.state.namaMakanan.map((value, index) => {
return (
<div key = {index+1}>
<p>No {index}</p>
<p>Nama {value.nama}</p>
<p>Harga {value.harga}</p>
</div>
);
})};
</div>
);

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.

<Main namaMakanan = {
[
{
nama: 'Mie Ayam',
harga: 10000
},
{
nama: 'Bakso',
harga: 12000
 },
{
nama: 'Soto Ayam',
harga: 15000
},
]
} />

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 (
<div key = {index+1}>
<p>No {index}</p>
<p>Nama {value.nama}</p>
<p>Harga {value.harga}</p>
</div>
);
})};

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 (
<div key = {index+1}>
<p>No {index}</p>
 <p>Nama {value.nama}</p>
<p>Harga {value.harga}</p>
</div>
);
})}

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 (
<div key = {index+1}>
<p>No {index}</p>
<p>Nama {value.nama}</p>
<p>Harga {value.harga}</p>
</div>
 );
})}

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(
<form onSubmit={this.handleSubmit}>
<input type='text' value={this.state.value}
onChange={this.handleChange} />
<input type='submit' value='Kirim Data' />
</form>
);
}
}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 (
<div>
<Header list='10 Daftar Makanan' />
<Top />
<Form />
 {
// <Main />
// <h1>Component dari Class App</h1>
// <List />
}
<Footer judul='Halaman Footer' nama='Aufa Billah' />
</div>
);
}
}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.

<input type='text' value={this.state.value} ref={this.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(
 <div>
<input type='text' value={this.state.value} ref={this.textInput} />
<button onClick={this.handleInput} >Kirim</button>
</div>
);
}
}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.

<input type='text' value={this.state.value} ref={this.textInput}

onChange={(e) => 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(
<div>
<input type='text' value={this.state.value} ref={this.textInput}
onChange={(e) => this.handleChange(e)} />
<button onClick={this.handleInput} >Kirim</button>
</div>
);
}
}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.

<h1 style={{color: 'DodgerBlue', backgroundColor: 'green'}} >Selamat

Datang</h1>

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.

<h2 style={judul} >Hai Aufa</h2>

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.

<h2 id='judulH2' >Hai Aufa</h2>

Buka file Header.css, lalu styling selector id judulH2.

#judulH2 {
color: white;
background-color: blue;
}

Kode lengkapnya header.js pada method return

return(
<div>
{ this.state.statusRendering === true ? (
<div>
<h1 style={{color: 'DodgerBlue', backgroundColor: 'green'}}
>Selamat Datang</h1>
 <h2 id='judulH2' >Hai Aufa</h2>
</div>
) : (
<div>
<h1>Selamat Tinggal</h1>
<h2>Semoga Bertemu Kembali Aufa</h2>
</div>
)
}
<button onClick={ this.handleElement }>Change</button>
</div>
);

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.

`<h2 className='subJudul' >Hai Aufa</h2>

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 (
<BrowserRouter>
<div>
<Route path='/' exact component={App} />
</div>
</BrowserRouter>
);
};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(<AppRouter
/>, 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 (
<div>
<h1>Halaman Contact</h1>
<p>085218201440</p>
</div>
);
};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 (
<BrowserRouter>
<div>
<Route path='/' exact component={App} />
<Route path='/contact' component={Contact} />
</div>
</BrowserRouter>
);
};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:

<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/contact'>Kontak</Link>
</li>
</ul>
</nav>

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 (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/contact'>Kontak</Link>
</li>
</ul>
</nav>
<Route path='/' exact component={App} />
<Route path='/contact' component={Contact} />
</div>
</BrowserRouter>
);
};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.

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.
css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

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 (
<div className='container'>
<Button varian='primary'>Testing</Button>
<h1>Hello Bootstrap</h1>
</div>
);
}
}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.

<Container>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col>1 of 3</Col>
 <Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>

Media
Membuat media.

Kita bisa membuat media menggunakan component media.

<Row>
<Col>
<Media>
<img
width={64}
height={64}
className="mr-3"
src="https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/sate.png"
alt="Generic placeholder"
/>
<Media.Body>
<h5>Media Heading</h5>
<p>
Makanan Sate
</p>
</Media.Body>
</Media>
</Col>
<Col>
<Media>
<img
width={64}
height={64}
className="mr-3"
src="https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/sate.png"
alt="Generic placeholder"
/>
<Media.Body>
<h5>Media Heading</h5>
<p>
Makanan Sate
</p>
</Media.Body>
</Media>
</Col>
</Row>

Materi 53: Alert

Menggunakan Alert

Menggunakan Alert di Bootstrap ReactJs.

<Alert variant='primary'>
Pesan Alert
</Alert>

Materi 54: Badge

Menggunakan Component Badge

<Badge variant="secondary">Badge Baru</Badge>

Materi 55: Breadcrumb

Menggunakan Component BreadCrumb di ReactJS.

<Breadcrumb>
<Breadcrumb.Item href='/'>Home</Breadcrumb.Item>
<Breadcrumb.Item href='/'>Library</Breadcrumb.Item>
<Breadcrumb.Item active>Profile</Breadcrumb.Item>
</Breadcrumb>

Materi 56: Button

Menggunakan Component Button di ReactJS.

<Button variant='primary'>Tombol</Button>

Materi 57: Button Group

Menggunakan Component Button Group di ReactJS.

<ButtonGroup className='ml-2'>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
</ButtonGroup>

Materi 58: Cards

Component Cards Bootstrap

<Card style={{width: '18rem'}} >

<Card.Img src='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/sate.png' variant='top' />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant='primary'>Go Somewhere</Button>
</Card.Body>
</Card>

Materi 59: Carousel

Component Carousel Bootstrap

<Carousel>
<Carousel.Item>
<img className='d-block w-100' src='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/travel1.jpeg' alt='1' />
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className='d-block w-100' src='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/travel2.png' alt='1' />
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className='d-block w-100' src='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/travel3.jpeg' alt='1' />
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>

Materi 60: Dropdowns

Component Dropdown Bootstrap

<Dropdown>
<Dropdown.Toggle variant='success'>
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Action Action</Dropdown.Item>
<Dropdown.Item>Something</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Materi 61: Forms

Component Form Bootstrap

<Form>
<Form.Group>
<Form.Label>Nama</Form.Label>
<Form.Control type="text" placeholder="Masukan Nama" />
</Form.Group>
<Form.Group>
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Masukan Email" />
</Form.Group>
</Form>

Materi 62: Input Group

Component Input Group

<InputGroup className='mb-3'>
<InputGroup.Prepend>
<InputGroup.Text>@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl placeholder='username'></FormControl>
</InputGroup>

Materi 63: Images

Component Images Bootstrap

<Image src='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/foodsmall.jpg' alt='gambar' roundedCircle
/>

Materi 64: Figure

Component Figure Bootstrap

<Figure>
<Figure.Image src='https://s3-ap-southeast-
1.amazonaws.com/niomic/img/sample/nasipadang.jpg' alt='nasi padang'
width='200' />
<Figure.Caption>Lorem ipsum set dollar</Figure.Caption>
</Figure>

Materi 65: Jumbotron

Component Jumbotron Bootstrap

<Jumbotron>
<h1>Hello World</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<Button variant='primary'>Learn More</Button>
</Jumbotron>

Materi 66: List Group

Component List Group Bootstrap

<ListGroup>
<ListGroup.Item>Nasi Goreng</ListGroup.Item>
<ListGroup.Item>Mie Goreng</ListGroup.Item>
<ListGroup.Item>Nasi Uduk</ListGroup.Item>
</ListGroup>

Materi 67: Modal

Component Modal Bootstrap

<Modal.Dialog>
<Modal.Header>
<Modal.Title>Modal Title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Modal Body Here</p>
</Modal.Body>
<Modal.Footer>
<Button>Close</Button>
</Modal.Footer>
</Modal.Dialog>

Materi 68: Nav

Component Nav Bootstrap

<Nav>
<Nav.Item>
<Nav.Link>Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link>About</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link>Contact</Nav.Link>
</Nav.Item>
</Nav>

Materi 69: Navbar

Component Navbar Bootstrap
<Navbar bg='dark' variant='dark'>
<Navbar.Brand>Logo</Navbar.Brand>
<Nav>
<Nav.Item>
<Nav.Link>Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link>About</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link>Contact</Nav.Link>
</Nav.Item>
</Nav>
<Form inline>
<Form.Control placeholder='search' className='mr-sm-2' />
<Button>Search</Button>
</Form>
</Navbar>

Materi 70: Overlays

Component Overlays Bootstrap

const popover = (
<Popover title='informasi'>This is popover</Popover>
);<OverlayTrigger trigger='click' placement='right' overlay={popover}>
<Button variant='success'>Munculkan Overlay</Button>
</OverlayTrigger>

Materi 71: Pagination

Component Pagination Bootstrap

<Pagination size='lg'>
<Pagination.Item>1</Pagination.Item>
<Pagination.Item>2</Pagination.Item>
<Pagination.Item>3</Pagination.Item>
</Pagination>

Materi 72: Progress Bar

Component Progress Bar Bootstrap

<ProgressBar now={75} label='75%'/>

Materi 73: Table

Component Table Bootstrap

<Table>
<thead>
<tr>
 <th>No</th>
<th>Nama</th>
<th>Menu</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nasi Goreng</td>
<td>Makanan</td>
<td>20.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>Makanan</td>
<td>15.000</td>
</tr>
</tbody>
</Table>

Materi 74: Tabs

Component Tabs Bootstrap

<Tabs>
<Tab eventKey='home' title='home'>
<p>
Halaman home
</p>
</Tab>
<Tab eventKey='about' title='about'>
<p>
Halaman about
</p>
</Tab>
<Tab eventKey='contact' title='contact'>
<p>
Halaman contact
</p>
</Tab>
</Tabs>

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

<Button variant='primary' onClick={() => {this.setState({buka: !

this.state.buka})}}>Click</Button>
<Collapse in={this.state.buka}>
<p>Show paragraph</p>
</Collapse>

Sekian tutorial ReactJS yang bisa digunakan untuk membangun user interface website.