đź’»
Doyatama Code
  • Welcome to Doyatama Code
  • Terms and Conditions
  • Learning Site
  • Editor Online
  • Group Telegram Recommended
  • Project
    • Cek Kata
      • Pengenalan
      • Membuat Backend
      • Membuat Frontend
  • Training
    • Java Programming Language
      • Step 1 - Basic
        • Dasar Algoritma
        • Flowchart
        • Studi Kasus
        • Variabel, Tipe Data dan Operator
        • Pemilihan
        • Pemilihan Bersarang
        • Perulangan
        • Perulangan Bersarang
        • Array 1 Dimensi
        • Array 2 Dimensi
        • Fungsi
        • Fungsi Rekursif
      • Step 1 Assignment
      • Step 2 - Data Structure Algorithm
      • Step 2 - Assignment
    • React Web Frontend Development
      • Step 1 - Basic Javascript
        • JavaScript Dasar untuk React – Variable, Object & Scope
        • JavaScript Dasar untuk React – “this” keyword
        • JavaScript Dasar untuk React – Array methods
        • JavaScript Dasar untuk React – Class & Module
        • HTML Dasar untuk React
      • Step 1 - Assignment
        • Assignment - JavaScript Dasar untuk React - Variable, Object & Scope
        • Assignment - JavaScript Dasar untuk React - "this" keyword
        • Assignment - JavaScript Dasar untuk React - Array methods
        • Assignment - JavaScript Dasar untuk React - Class & Module
        • Assignment - HTML Dasar untuk React
      • Step 2 - Going to React JS
        • Introduction to React JS
        • Components & Props
        • State & LifeCycle
        • Lists & Forms
        • Konsep “Lifting State Up”
      • Step 2 - Assignment
        • Assignment - Introduction to React JS
        • Assignment - Components & Props
        • Assignment - State & LifeCycle
      • 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 -
    • Laravel Web Development
      • Step 1 - Basic Web Programming
        • Berkenalan dengan HTML
        • CSS Basic to Ninja
        • CSS Bootstrap
        • Introduction Javascript
        • Dom JavaScript
      • Step 1 - Assignment
      • Step 2 - Materials
      • Step 2 - Assignment
      • Step 3 - Materials
      • Step 3 - Assignment
      • Step 4 - Materials
      • Step 4 - Assignment
      • Big Project
    • React Native Mobile Apps Development
      • Step 1 - Basic
        • Command Line
        • Git
        • Javascript – Intro
        • Javascript – String Properties & Method
        • Javascript – Conditional
        • Javascript – Loop
        • Javascript – Function
        • Javascript – Array
      • Step 1 - Assignment
        • Assignment - JavaScript String Properties & Method
        • Assignment - Javascript Looping
        • Assignment - Javascript Function
        • Assignment - JavaScript Array
      • Step 2 - Materials
        • Javascript – Object
        • Javascript – Class
        • Javascript – Asynchronous
        • Javascript – ES6
        • React Native Intro
      • Step 2 - Assignment
      • Step 3 - Materials
        • Mockup Figma
        • React Native – Components
        • React Native – Styling & Flexbox
        • React Native – Components API & Lifecycle
        • React Native – Navigation
      • Step 3 - Assignment
      • Step 4 - Materials
        • React Native – State Management (Redux)
        • React Native – Build & Release APK/IPA
        • React Native – Codepush
        • React Native – Publish Google Play Store/App Store
        • React Native – Firebase Data Storage
        • React Native – Function Component & Hooks
      • Step 4 - Assignment
    • Learning Database
      • Step 1 - Entity Relationship Diagram
        • Contoh Penerapan Basis Data
        • Introduction to Entity Relationship Diagram (ERD)
        • Introduction to Entity Relationship Diagram (ERD) Part 2
        • ERD to Relational Model
        • ERD to Relational Model Part 2
      • Step 1 - Assignment
      • Step 2 - Normalization
        • What is Normalization ?
        • Normalization 1NF, 2NF And 3NF
        • Normalization 4NF, 5NF
      • Step 2 - Assignment
      • Step 3 - MySQL
        • MySQL - Data Definition Language (DDL)
        • MySQL - Data Manipulation Language (DML)
        • MySQL - Data Retrieval Language (DRL)
        • MySQL - Select JOIN
      • Step 3 - Assignment
    • Boilerplate
Powered by GitBook
On this page
  • Question 1
  • Question 2
  • Question 3
  • Question 4
  • Question 5

Was this helpful?

Export as PDF
  1. Training
  2. React Web Frontend Development
  3. Step 1 - Assignment

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;
   }
}
PreviousAssignment - JavaScript Dasar untuk React - Array methodsNextAssignment - HTML Dasar untuk React

Last updated 4 years ago

Was this helpful?