All pages
Powered by GitBook
1 of 38

React Web Frontend Development

Selamat Datang di channel materi React JS - Web Frontend Development.

Introduction

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.

Step 1 - Basic Javascript

JavaScript Dasar untuk React – Variable, Object & Scope

Sebelum kita membahas mengenai React, kita perlu belajar terlebih dahulu bahasa pemrograman yang digunakan di React, yaitu JavaScript.

Apa itu 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:

  1. HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.

  2. CSS: Menentukan layout, style, serta keselarasan halaman website.

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

JavaScript Dasar untuk React – “this” keyword

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

  • [“this”] https://www.w3schools.com/js/js_this.asp

  • [“this”] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

  • [Arrow Function] https://javascript.info/arrow-functions-basics

  • [Arrow Function] https://www.w3schools.com/js/js_arrow_function.asp

JavaScript Dasar untuk React – Array methods

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:

  • [Array] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

  • [Array] https://www.w3schools.com/jsref/jsref_obj_array.asp

  • [Array] https://www.w3schools.com/js/js_arrays.asp

  • [Object Destructuring] https://javascript.info/destructuring-assignment

  • [Spread Operator] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

JavaScript Dasar untuk React – Class & Module

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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

  • [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

HTML Dasar untuk React

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 basic] https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

  • [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

Step 1 - Assignment

Assignment - JavaScript Dasar untuk React - Variable, Object & Scope

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 :)

Question 1

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!!')
    }
}

Question 2

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!

Question 3

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'

Question 4

Pada code di bawah ini, kenapa console memberikan output undefined ?

var haloHalo = 1
var haloHaloBandung = function() {
  console.log(haloHalo)
  var haloHalo = 2
}
haloHaloBandung()

Referensi

  • [Hoisting] https://scotch.io/tutorials/understanding-hoisting-in-javascript

  • [Deep equal] https://www.mattzeunert.com/2016/01/28/javascript-deep-equal.html

  • [Deep equal] https://www.w3schools.com/nodejs/met_assert_deepequal.asp

Assignment - JavaScript Dasar untuk React - "this" keyword

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 :)

Question 1

Jelaskan istilah dari this di JavaScript!

Question 2

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');
}

Question 3

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();

Assignment - JavaScript Dasar untuk React - Array methods

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 :)

Question 1

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];

Question 2

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'
}

Question 3

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
   }
]

Assignment - JavaScript Dasar untuk React - Class & Module

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 :)

Question 1

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);
   }
};

Question 2

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;
     }
 }

Question 3

Dapatkah kita mengimport suatu module dari luar project directory ? Lalu apa pengaruhnya untuk saat production ?

Question 4

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 !!');
}

Question 5

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;
   }
}

Assignment - HTML Dasar untuk React

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 :)

Question 1

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)

Question 2

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.

Question 3

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....');
}

Step 2 - Going to React JS

Introduction to React JS

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

  • [Node] https://nodejs.org/en/download/

  • [React Docs] https://reactjs.org/docs/getting-started.html

  • [Embed React to HTML] https://meda.io/embed-react-into-an-html-web-page/

  • [CDN Babel] https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js

  • [CDN React DOM] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js

  • [CDN React] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js

Components & Props

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

State & LifeCycle

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/

  • [State] https://reactjs.org/docs/state-and-lifecycle.html

  • [Component & LifeCycle] https://reactjs.org/docs/react-component.html

  • [Virtual DOM] https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq

  • [Reconciliation] https://reactjs.org/docs/reconciliation.html

Lists & Forms

Konsep “Lifting State Up”

Step 2 - Assignment

Assignment - Introduction to React JS

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 :)

Question 1

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)

Question 2

Buatlah page seperti desain berikut menggunakan framework CRA (Create React App).

Referensi

  • [CDN Babel] https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js

  • [CDN React DOM] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js

  • [CDN React] https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js

Assignment - Components & Props

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 :)

Question 1

Jelaskan konsep dari Component dan Props dengan bahasa Anda sendiri !

Question 2

Jelaskan secara detail maksud dari “Props itu read-only”!

Question 3

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')
);

Question 4

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>
 );
}

Question 5

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>
 );
}

Assignment - State & LifeCycle

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 :)

Question 1

Jelaskan konsep dari State dan aturan mainnya dengan bahasa Anda sendiri !

Question 2

Jelaskan perbedaan antara Props dan State !

Question 3

Dapatkah kita memanipulasi state seperti ini ? Lalu bagaimana caranya untuk solving-nya ?

this.state.counter = this.state.counter + 1;

Question 4

Jelaskan secara detail cara kerja Virtual DOM di React !

Question 5

Jelaskan urutan lifecycle, dan sebutkan proses yang terjadi di setiap fasenya !

Question 6

Dapatkah kita memanipulasi state di constructor ? Jelaskan apa yang terjadi jika kita memanipulasi state dan/atau melakukan side effect di constructor !

Step 3 - Going to Redux

Bagaimana Berpikir di React

Hooks & Context

React Router

Redux & React-Redux

Redux Middleware menggunakan Redux-Thunk

Step 3 - Assignment

Step 4 - Deploy and Make Final Project

Testing menggunakan Jest & RTL

Deployment

Final Project – Mocking

Final Project – Static Version

Final Project – Interactive Version & Deploy

Step 4 - Assignment

Big Project -