NEW
Font size
WorksheetsUjian
Total questions: 24
Worksheet time: 12mins
const MyComponent = () => {
const mapList = () => {
someArray.map((el) => <p>{el}</p>);
};
return (
<div>{mapList()}</div>
);
};
Apa yang terjadi jika kode ini dijalankan?
Component akan tetap kosong, karena React tidak menerima array sebagai hasil return dari sebuah component
Sebuah list element <p> akan terbuat, karena hasil return component akan ada sebuah array of <p> elements.
Component akan tetap kosong, karena mapList tidak return hasil map yang dilakukan
Component akan tetap kosong, karena element <p> yang di return tidak memiliki prop Bernama “key”
Berikut ini merupakan perintah cara yang benar untuk membuat react project dengan CRA Adalah?
npm create-react-app
npm create-react-app myReactApp
npx create-react-app myReactApp
npx create-react-app
const greeting = isLoggedin? <Hello /> : null;
Kapan component Hello akan tampil?
Ketika function Hello dipanggil
Ketika isLoggedIn menjadi true (kalau greeting di render)
Ketika seorang user login
Tidak akan pernah (kalau greeting tidak di render)
Mengapa kita butuh menggunakan Redux ketimbang state local dalam component React?
Karena kita ingin membuat performance aplikasi kita lebih baik
Karena kita ingin menggantikan syntax state local
Karena kita ingin menyiapkan production app
Karena kita butuh me-manage state yang lebih complex
Value apa yang harus kita berikan kepada props event listener seperti onClick?
Pointer ke sebuah function yang harus di execute Ketika event terjadi
Code yang akan kita execute ketika event terjadi
Function yang sudah kita panggil
D. Hasil dari panggilan function yang harus kita execute ketika event terjadi
npx create-react-app myReactApp
apa maksud dari myReactApp?
A. Tipe dari aplikasi yang akan dibuat X
B. Menambahkan package myReactApp pada project X
C. Memberi nama project untuk CRA V
D. Referensi dari aplikasi lain untuk aplikasi yang akan kita buat X
Hooks method apa yang digunakan untuk mendeklarasikan suatu local state dan dapat memperbaharui nilai state tersebut?
A. useCallback
B. useContext
C. useState
D. useEffect
Manakah di antara tag dibawah ini yang memilki default display value INLINE?
A. hr X
B. div X
C. em V
D. h1 X
Bagaimana cara passing data antara parent component dengan child component?
A. Lewat sebuah variable javascript global yang bisa diakses semua file X
B. Lewat local state X
C. Menggunakan sebuah global library global state management yang Bernama redux
D. Menggunakan sebuah attribute HTMl custom yang bernama props V
<Message {...props} />
Props apa saja yang akan dikirim ke component Message?
A. Semua props yang tidak mengalami perubahan
B. Semua props
C. Semua props yang mengalami perubahan
D. Semua jawaban salah
mengapa component sangat difokuskan dalam React?
A. Tidak ada jawab yang benar
B. Karena project react hanya dibuat menggunakan components
C. Karena setiap UI terbentuk dari potongan-potongan UI kecil (components), maka dari itu masuk akal jika kita sebut sebuah UI sebagai kumpulan components
D. Karena components memberikan performance yang baik ketimbang UI biasa
Apa yang terjadi jika Ketika menyimpan data ke dalam variable biasa dalam aplikasi react, lalu melakukan manipulasi pada value variable tersebut?
A. Error, karena di React JS sudah memiliki fitur state untuk menyimpan data X
B. Data dalam variable berubah tetapi component tidak akan auto re-render V
A. Data didalam variable tidak akan berubah karena harus menggunakan state untuk menyimpan data
13.) bagaimana cara kita melakukan update state dari sebuah component?
A. Menggunakan method/function untuk update state seperti this.setState atau function yang di-return oleh useState
B. Kita harus memanggil useState
C. Cukup assign value baru di variable state yang kita miliki X
D. Gunakan this.state untuk assign value baru kepada state yang kita miliki X
14.) Jawaban mana yang mendeskripsikan functional component react dengan baik?
A. Function component dibutuhkan untuk membuat component react X
B. Function component selalu bersifat stateless X
C. Function component sama saja seperti class component X
D. Function component menerima sebuah prop object dan akan return sebuah react statement V
15.) bagaimana cara mengimport external file CSS?
A. <link rel=”stylesheet” type=”text/css” href=”externalStylesheet.css”>
B. <stylesheet src=”externalStylesheet.css”></stylesheet>
C. <style src=”externalStylesheet.css”>
D. <stylesheet>externalStylesheet.css</stylesheet>
16.)
const MyComponents = () => {
const projects = ["Ecommerce App", "Blog App"];
const myFunction = () => {
console.log("Hello world");
}
const renderMyProjects = () => {
return projects.map((project) => <li>{project}</li>);
}
return (
<div>
<h1>Welcome to my Website</h1>
<h3>Here are my Projects</h3>
<ul>{renderMyProjects()}</ul>
</div>
)
}
Apakah ada kesalahan? Dimana kesalahannya?
A. Ada. Function renderMyProjects akan menghasilkan error karena list yang dihasilkan tidak memiliki props “key” X
B. Ada. Function renderMyProjects akan menghasilkan bug karena berusaha me-render projects yang bukan merupakan sebuah state X
C. Tidak ada kesalahan V
17.) Bagiamana bisa kita mengganti apa yang ditampilkan oleh sebuah component?
A. Menggunakan sebuah variable javascript biasa , ganti valuenya lalu output variable tersebut dalam bentuk JSX
B. Tidak bisa, component di react bersifat statis
C. Membuat sebuah component custom dari HTML, lalu ditukar component dengan component lainnya
D. Buat sebuah value “state” yang bisa diganti dan dapat ditampilkan dalam bentuk JSX
18.) Redux adalah sebuah state management untuk pembuatan sebuah penyimpanan data secara global. Bagiamana alur kerja dari redux ini?
A. Actions > Middleware > Reducers > Store > Component
B. Actions > Reducers > Store > Component
C. Actions > Reducers > Middleware > Store > Component
D. Actions > Middleware > Store > Component
19.)
//1
<button onClick={handleClick}>Click Me</button>
//2
<button onClick={e => handleClick(e)}>Click Me</button>
Apakah ada perbedaan antara sifat click dari 2 button ini?
A. Button 1 tidak akan memanggil function this.handleClick dengan baik
B. Button 2 tidak akan memanggil function this.handleClick dengan baik //chat gpt
C. Tidak ada perbedaan
D. Button 1 tidak memilki akses ke object event Ketika button di click
20.)
const Star = ({selected = false}) => <icon color={selected? "red" : "grey"}></icon>
Apa default color dari component icon?
A. White
B. Black
C. Red
D. Grey
21.)
const message = "hello there";
const element = <p>{message}</p>;
Di sini, message disebut sebagai?
A. JS expression
B. JS element
C. JSX wrapper
D. JS function
22.)
<Route path ="/:id" />
Di sini, :id disebut sebagai?
A. Route splitter
B. Route parameter
C. Route modal
D. Route link
23.)
<style>
.green {
color: green;
}
#red {
color: red;
}
</style>
<body>
<p style="color: blue">Hello World</p>
</body>
Perhatikan code snippet berikut. Apa yang akan menjadi warna akhir text “Hello World”?
Hijau
Biru
Merah
Tidak ada warna
24.)
h1 {
color: red;
font-size: 5em;
}
Dalam kode ini, apa istilah yang tepat untuk h1?
Markup
Combinator
selector
declarator
