Selamat Datang di channel materi React JS - Web Frontend Development.
Training ini dijalankan oleh Doyatama Code. Adapun tujuan diadakan training ini, utamanya sebagai bentuk kontribusi kami kepada bangsa untuk meningkatkan kualitas SDM khususnya di bidang skill programming. Tanpa berpanjang lebar, kami mengucapkan terimakasih atas dukungannya dan selamat menikmati pelatihan dalam gitbook ini.
Di channel ini anda mendapatkan penjelasan materi, tugas, dan info secara satu arah. Jika anda ingin bertanya bisa disampaikan di grup diskusi. Grup diskusi dapat teman-teman klik di link berikut ini : https://t.me/doyatama_code. Dimohon untuk tidak membahas bahasan jauh diluar materi training di grup diskusi.
Sebelum kita membahas mengenai React, kita perlu belajar terlebih dahulu bahasa pemrograman yang digunakan di React, yaitu JavaScript.
Bagi yang masih awam, tentu akan bertanya-tanya, apa itu JavaScript? JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:
HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.
CSS: Menentukan layout, style, serta keselarasan halaman website.
JavaScript: Menyempurnakan tampilan dan sistem halaman web.
JavaScript dapat dipelajari dengan cepat dan mudah serta digunakan untuk berbagai tujuan, mulai dari meningkatkan fungsionalitas website hingga mengaktifkan permainan (games) dan software berbasis web. Selain itu, terdapat ribuan template dan aplikasi JavaScript yang bisa Anda gunakan secara gratis dan semuanya ini berkat beberapa situs, seperti Github.
Pada kali ini kita akan mempelajari mengenai:
Variable
Object
Scope
Oke langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengkses materi di link video berikut ini :
source code pada video tersebut dapat teman-teman akses di link github berikut ini :
Untuk membuka source code tersebut di Visual Studio Code, teman-teman pastikan sudah menginstall Visual Studio Code terlebih dahulu lalu membuka programnya.
Setelah itu klik Open Folder seperti pada gambar di bawah ini
Lalu terlebih dahulu extract file zip yang teman-teman download dari link github, dan pilih folder hasil dari extract tersebut, seperti pada gambar di bawah ini
Maka akhirnya teman-teman akan mendapatkan hasil seperti ini
Lalu, teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools, caranya sudah disampaikan pada video.
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi:
[Basic JavaScript] https://javascript.info/first-steps
[Grammar & Types di JavaScript] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types
[JavaScript Bahasa Paling Populer] https://insights.stackoverflow.com/survey/2020#most-popular-technologies
[JavaScript vs Python, mana lebih populer?] https://morioh.com/p/3eb8f8179df2
Pada materi sebelumnya, kita sudah belajar mengenai variable, object, dan scope. Dan pada kali ini, kita akan fokus mempelajari konsep “this” dan juga Arrow Function
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 2 video ini, pertama untuk konsep “this” dan kedua untuk Arrow Function
Konsep "this"
Arrow Function
source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :
Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi:
[Grammar & Types di JavaScript] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types
[Arrow Function] https://javascript.info/arrow-functions-basics
[Arrow Function] https://www.w3schools.com/js/js_arrow_function.asp
Pada materi sebelumnya, kita sudah belajar mengenai variable, object, scope, “this”, dan arrow function.
Dan pada kali ini, kita akan fokus mempelajari array methods, object destructuring, dan spread operator.
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 3 video ini, pertama untuk array methods, kedua untuk object destructuring, dan ketiga untuk spread operator
Array Method
Object Destructing
Spread Operator
source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :
Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya di file index.js, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi:
[Object Destructuring] https://javascript.info/destructuring-assignment
Pada materi sebelumnya, kita sudah belajar banyak mengenai object dan fundamental lainnya di JavaScript. Dan pada kali ini, kita akan fokus mempelajari class, inheritance, modules dan named export.
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 4 video ini, pertama untuk class, kedua untuk inheritance, ketiga untuk modules, dan keempat untuk named export
Classes
Inheritance
Modules
Named Export
source code pada video-video tersebut dapat teman-teman akses di link github berikut ini :
Untuk mencobanya, caranya sama dengan Day 1, dan teman-teman bisa mengedit sesukanya, dan juga dapat melihat console dengan buka file index.html dengan browser chrome dan buka Developer Tools.
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi
[Class] https://javascript.info/class
[Modules] https://javascript.info/modules
[Export Import] https://javascript.info/import-export
[Artikel Medium mengenai Modules] https://medium.com/@timoxley/named-exports-as-the-default-export-api-670b1b554f65
Pada materi sebelumnya, kita sudah belajar banyak mengenai fundamental-fundamental yang ada di JavaScript.
Dan pada kali ini, kita akan mempelajari hal lain yang dibutuhkan knowledge-nya di React, yaitu HTML.
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi di 1 video ini, yaitu pengenalan HTML
Pengenalan HTML
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi
[HTML element] https://www.w3schools.com/html/default.asp
[HTML basic] https://www.tutorialspoint.com/html/index.htm
[HTML fundamentals] https://learn.co/lessons/html-fundamentals
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu javascipt dasar untuk react seperti variable, object dan scope.
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Pada code di bawah ini terdapat sebuah object “sebuahObject” yang memiliki elemen sebuah fungsi, tuliskan code Anda untuk membuat console mengeluarkan log “Hai Dunia Kucing!!” dengan mengakses fungsi tersebut ? Jelaksan!
const sebuahObject = {
fungsi: () => {
console.log('Hai Dunia Kucing!!')
}
}
Perhatikan code di bawah ini.
let sebuahVariabel = 'apple'
let sebuahVariabel = 'orange' // SyntaxError: Identifier 'sebuahVariabel ' has already been declared
console.log(sebuahVariabel)
Pada line kedua code di atas akan memunculkan error bahwa variabel “sebuahVariabel ” sudah dideklarasikan dengan let, tidak dapat dideklarasikan kembali.
var sebuahVariabel = 'apple'
var sebuahVariabel = 'orange'
console.log(sebuahVariabel)
Namun, jelaskan kenapa ketika kita ganti let dengan var seperti code di atas ini, tidak ada error yang terjadi!
Jelaskan, jika memang const membuat sebuah variable tidak bisa di-assign kembali valuenya, kenapa pada code di bawah ini, masih tetap berlaku ?
const sebuahVariabel = {}
sebuahVariabel.color = 'red'
Pada code di bawah ini, kenapa console memberikan output undefined ?
var haloHalo = 1
var haloHaloBandung = function() {
console.log(haloHalo)
var haloHalo = 2
}
haloHaloBandung()
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari apa itu javascipt dasar untuk react tentang "this" keyword.
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Jelaskan istilah dari this di JavaScript!
Ubahlah beberapa function dibawah ini ke bentuk arrow function
function getNamaLengkap(namaDepan, namaBelakang) {
return `${namaDepan} ${namaBelakang}`;
}
function getNamaDepan(namaLengkap) {
return namaLengkap.split(' ')[0];
}
function consoleHai() {
console.log('hai');
}
Di bawah ini, jika kita memanggil fungsi getName yang ada di object sebuahObject, maka kita berhasil mendapatkan outputnya. Namun, jika kita memanggil fungsi getName yang ada di object sebuahObjectLain, maka kita akan mendapatkan output undefined. Apa yang salah dari object sebuahObjectLain ? dan bagaimana cara memperbaikinya ? Jelaskan!
const sebuahObject = {
name: 'Bejo Jhonson',
getName() {
return this.name;
}
}
const sebuahObjectLain = {
name: 'Bejo Jhonson',
getName: () => this.name
}
Soal 4
Dapatkah code dibawah ini berjalan dengan benar ? Jelaskan apa yang terjadi!
const profil = {
namaDepan: 'Bejo',
namaBelakang: 'Jhonson',
getName() {
this.name = `${this.namaDepan} ${this.namaBelakang}`;
return this.name;
}
}
profil.getName();
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari javascipt dasar untuk react tentang array methods.
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Gabungkan atau merge 4 array berikut ini. Buat banyak strategi yang berbeda untuk menggabungkannya. Urutkan mana yang lebih efesien! [bukan hanya waktu, tetapi semua segi apapun] Mengapa bisa begitu ?
const arraySatu = [1, 2, 3, 4];
const arrayDua = [5, 6, 7, 8];
const arrayTiga = [9, 10, 11, 12];
const arrayEmpat = [13, 14, 15, 16];
Berdasarkan materi dari video, gunakan Object Destructuring untuk mengambil semua properti di dalam object berikut ini dengan diberi alias huruf depan-nya.
const objectBebas = {
aspal: 'hitam',
roket: 'meluncur',
joker: 'villain',
unta: 'arab',
ninja: 'hatori'
}
Filter array berikut untuk isAllowed yang bernilai true. Lalu tampung ke variabel bejoJuaraNasional
const unfilteredArray = [
{
name: 'Bejo',
isAllowed: true
},
{
name: 'Jhonson',
isAllowed: false
},
{
name: 'Juara',
isAllowed: true
},
{
name: 'Panco',
isAllowed: false
},
{
name: 'Nasional',
isAllowed: true
}
]
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari javascipt dasar untuk react tentang Class & Module
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Ubahlah object-object berikut menjadi class. Dan setelah itu, untuk class Benda, buat object yang instansiasinya dari class Benda, dengan properti object persis dengan halGhaibLain. Dan juga buat class baru yang inherit dengan class Benda, dengan menambahkan property “dasar” dan juga method actionLain yang memunculkan console log “Ini action lain”.
const makhlukGhaib = {
nama: 'Pocong',
kekuatan: 'Terbang',
attack() {
console.log('Senyum');
}
};
const benda = {
nama: 'kompor',
bahan: 'besi',
actionName: 'Memanaskan',
action() {
console.log(this.actionName);
}
};
const halGhaibLain = {
nama: 'cinta',
bahan: 'perjuangan bersama',
actionName: 'Membara',
action() {
console.log(this.actionName);
}
};
Import named export berikut ini dengan alias AliasNamed.
// Anda sedang berada di satu directory dengan nama file contoh.js
export class NamedExport {
constructor(test){
this.test = test;
}
}
Dapatkah kita mengimport suatu module dari luar project directory ? Lalu apa pengaruhnya untuk saat production ?
Pada code di bawah ini, lakukan export suatu function tersebut menjadi export default dengan tanpa mengubah sedikit pun code pada function tersebut (note: Anda dapat menambahkan/mengubah code diatas atau dibawah function, namun bukan pada function, meski hanya mengubah nama function).
function helloCat() {
alert('Hello Cat !!');
}
Berikut ini terdapat sebuah module yang di-export dengan default. Lakukan import pada module ini dengan menjadikannya named pada proses import nya. Catatan: Anda sedang berada di directory yang sama dengan file user.js
// folder berada di user.js
export default class User {
constructor(name) {
this.name = name;
}
}
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari HTML Dasar untuk React
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Buatlah HTML code untuk desain halaman sebagai berikut. Dimana terdapat icon dan title pada tab bar. (untuk icon, Anda boleh bebas mencari free image di internet)
Buatlah HTML code untuk desain form sebagai berikut. (harus sama persis). Catatan: field name adalah text, field Delivery Date adalah date, field Address adalah textarea, dan field Quantity adalah number.
Buatlah javascript code berikut ini dengan nama file hello.js, lalu masukkan code tersebut kedalam HTML code dan panggil fungsi hello via tag script lain.
function hello() {
alert('Hello....');
}
Pada materi-materi sebelumnya, kita sudah belajar banyak mengenai fundamental-fundamental yang ada di JavaScript dan juga basic HTML. Dan pada kali ini, kita mulai masuk mempelajari React.
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Pengenalan ReactImperative vs DeclarativeEmbed React ke HTMLCreate React App (CRA) Framework
Pengenalan React
Imperative vs Declarative
Embed React ke HTML
Create React App (CRA) Framework
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi
[React Docs] https://reactjs.org/docs/getting-started.html
[Embed React to HTML] https://meda.io/embed-react-into-an-html-web-page/
[CDN React DOM] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js
Pada materi sebelumnya, kita sudah mengenal sedikit mengenai React. Dan pada kali ini, kita mulai mendalami mempelajari React, yaitu mempelajari dua hal, Component dan Props
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Props, Function dan Class ComponentComposing, Extracting, Fragment, dan Spread Operator pada Props
Props, Function dan Class Component
Composing, Extracting, Fragment, dan Spread Operator pada Props
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi
[Component & Props] https://reactjs.org/docs/components-and-props.html
[Fragment] https://reactjs.org/docs/fragments.html
Pada materi sebelumnya, kita sudah mempelajari Component dan Props. Dan pada kali ini, kita mulai mendalami mempelajari React, yaitu mempelajari dua hal, State & LifeCycle
Oke, langsung saja tidak usah berbicara panjang lebar lagi, teman-teman dapat langsung mengakses materi pada link video-video berikut ini:Konsep State dan Virtual DOMLifeCycle Method
Konsep State dan Virtual DOM
Oke, materi pada kali ini cukup sampai disini, ingat, ini hanya secuil ilmu saja teman-teman, alangkah lebih baik teman-teman explore lebih dalam lagi dengan membaca-baca artikel dan lain sebagainya untuk menambah ilmu teman-teman. Good luck !!
Referensi
[LifeCycle Diagram] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
[Component & LifeCycle] https://reactjs.org/docs/react-component.html
[Reconciliation] https://reactjs.org/docs/reconciliation.html
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang introduction to React JS
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Buatlah page seperti desain berikut menggunakan React yang digunakan di HTML teman-teman, catatan bahwa ini hanya menambahkan CDN saja, tidak menggunakan tool chain atau framework seperti CRA (Create React App), dan lain sebagainya. (poin plus jika teman-teman mengimplementasikan JSX)
Buatlah page seperti desain berikut menggunakan framework CRA (Create React App).
Referensi
[CDN React DOM] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang components & props
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Jelaskan konsep dari Component dan Props dengan bahasa Anda sendiri !
Jelaskan secara detail maksud dari “Props itu read-only”!
Gunakan metoda compose component untuk component Welcome ke component App di dalam div.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Gunakan metoda extracting component untuk component yang di-wrap oleh elemen div UserInfo, dengan props author dari data props.author dari component Comment.
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
Apa yang salah dari component di bawah ini ? Jelaskan apa yang terjadi! Dan bagaimana cara solvingnya jika error ?
function Comment(props) {
return (
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
);
}
Sebelum kalian mengerjakan assignment alangkah baiknya kalian untuk mempelajari tentang state & lifecycle
Tapi...... jika kalian sudah mempelajarinya yukk .. kalian bisa langsung check assignment nya .... Selamat Mengerjakan :)
Jelaskan konsep dari State dan aturan mainnya dengan bahasa Anda sendiri !
Jelaskan perbedaan antara Props dan State !
Dapatkah kita memanipulasi state seperti ini ? Lalu bagaimana caranya untuk solving-nya ?
this.state.counter = this.state.counter + 1;
Jelaskan secara detail cara kerja Virtual DOM di React !
Jelaskan urutan lifecycle, dan sebutkan proses yang terjadi di setiap fasenya !
Dapatkah kita memanipulasi state di constructor ? Jelaskan apa yang terjadi jika kita memanipulasi state dan/atau melakukan side effect di constructor !