50 Pertanyaan dan Jawaban Wawancara React yang Harus Diketahui

Pengembang ReactJS sangat dicari dan ada alasan bagus untuk itu. Namun, Anda harus membuktikan kemahiran Anda dalam kerangka kerja tersebut untuk mendapatkan pekerjaan tersebut.

Berikut ini adalah pertanyaan umum seputar pengembangan React beserta jawabannya yang perlu Anda ketahui. Pertanyaan ini mencakup segala hal mulai dari dasar hingga topik yang lebih mendalam.

1. Apa itu React?

React adalah pustaka JavaScript gratis dan sumber terbuka untuk pengembangan antarmuka pengguna, yang menggunakan komponen untuk membuat output untuk aplikasi satu halaman. React dikembangkan oleh Facebook (Meta) dan dikelola oleh komunitas pengembang.

2. Sebutkan fitur-fitur penting React

Fitur-fitur terpenting React meliputi:

1. Mudah digunakan
2. Perkembangan cepat
3. Penggunaan komponen
4. BEJ
5. DOM Maya
6. Kinerja tinggi
7. Pengikatan data satu arah

3. Di mana repositori proyek React?

React adalah repositori tunggal yang ada di https://github.com/facebook/reactMenjadi repositori tunggal berarti semua kode dan sumber lainnya disimpan di tempat yang sama untuk memudahkan pengembangan dan pengelolaan.

4. Apa versi stabil React saat ini?

Versi stabil React saat ini pada 14 Juni 2022 adalah 18.2.0.

5. Sebutkan perbedaan antara React Native dan ReactJS

React dan ReactJS sama saja, sedangkan React Native dibangun di atas React. Perbedaannya, React digunakan untuk membuat antarmuka pengguna yang dinamis dan responsif untuk aplikasi web, sedangkan React Native dirancang untuk membangun aplikasi sebagai aplikasi seluler.

6. Apa perbedaan antara Elemen dan Komponen?

Elemen React adalah objek sederhana dan tidak dapat diubah yang dibuat untuk mewakili simpul DOM. Menjadi tidak dapat diubah berarti tidak dapat diubah setelah dibuat, karena akan ditampilkan di DOM. Sebaliknya, komponen React dapat diubah dan menghasilkan output JSX setelah ditampilkan.

7. Bagaimana cara membuat Komponen?

Ada dua cara untuk membuat komponen di React: 1.) Komponen fungsi dan 2.) Komponen kelas. Sesuai namanya, komponen fungsi dibuat menggunakan deklarasi fungsi, sedangkan komponen kelas dibuat menggunakan deklarasi kelas.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Sebutkan 4 tahapan Komponen React

Komponen React menjalani 4 tahap berikut dalam siklus hidupnya:

1. Tahap awal – Konstruksi komponen dalam keadaan default dengan properti awal
2. Tahap Pemasangan – Render JSX dari komponen
3. Fase Pembaruan – Perubahan status komponen dan penggambaran ulang aplikasi
4. Fase Melepas – Penghapusan komponen dari DOM

9. Jelaskan apa yang dimaksud dengan Komponen tingkat tinggi

Komponen tingkat tinggi (HOC) adalah metodologi React untuk membuat komponen. Metodologi ini menggunakan komponen yang sudah ada untuk membuat komponen baru dengan fungsionalitas tambahan. Dengan kata lain, HOC adalah fungsi yang mengambil komponen sebagai argumen dan mengembalikan komponen baru dengan fitur tambahan.

10. Apa yang dimaksud dengan komponen terkendali dan tak terkendali?

Komponen terkontrol adalah komponen React yang mengambil nilainya melalui properti dan memberitahukan sistem tentang perubahan apa pun melalui panggilan balik. Komponen ini dikontrol oleh komponen induk yang mengelola nilainya. negara dan meneruskan nilai sebagai properti ke komponen yang dikontrol. Komponen yang tidak dikontrol, di sisi lain, mengelola statusnya, dan Anda perlu menanyakan PENGHAKIMAN menggunakan ref untuk mendapatkan nilainya.

11. Apa itu Props di React?

Props dalam React hanyalah cara sederhana untuk mengatakan properti, dan dengan itu, Anda mengacu pada properti suatu komponen. Props digunakan untuk meneruskan data dari komponen induk ke satu atau beberapa komponen anak, dan bersifat baca-saja untuk komponen anak.

12. Apa itu props.children?

Atribut Props.children berisi informasi tentang semua konten komponen yang memiliki tag pembuka dan penutup. Anak-anak ini merujuk ke semua elemen yang didefinisikan di dalam komponen saat ini, dan bisa berupa satu, banyak, atau tidak ada.

13. Bisakah Anda memperbarui properti di React?

Tidak, props di React bersifat top-down dan tidak dapat diubah. Ini berarti bahwa suatu komponen dapat mengirimkan properti apa pun yang disukainya kepada anak-anaknya, tetapi tidak dapat memperbarui props-nya. Hanya induknya yang dapat memperbarui props-nya.

14. Apa itu JSX?

JSX adalah singkatan dari JavaScript XML. Ini adalah ekstensi sintaksis JavaScript yang memungkinkan penulisan HTML di dalam kode React. Peramban tidak memahami JSX, jadi React harus mengubahnya menjadi kode HTML yang dapat dibaca.

15. Apa Perbedaan Antara Komponen dan Elemen?

Elemen adalah definisi node DOM virtual yang tidak memiliki status dan tidak dapat diubah. Elemen berisi tipe dan properti, tetapi tidak memiliki metode seperti yang dimiliki komponen. Ketiadaan metode ini membuatnya cepat.

16. Apa itu state dalam React?

State dalam React merujuk pada objek bawaan dalam komponen yang digunakan untuk menyimpan dan mengelola informasi tentang komponen tersebut. State dapat berubah seiring waktu, dan dengan demikian akan memicu rendering ulang komponen tersebut. Anda harus mendefinisikan state dalam metode konstruktor komponen, atau komponen tersebut akan menjadi stateless.

17. Apa itu Komponen stateless?

Komponen React stateless tidak memiliki status. Ini berarti Anda tidak dapat mengatur statusnya dengan ini.setState() metode atau membuatnya tidak ditampilkan. Namun, komponen tanpa status dapat memiliki properti.

18. Bagaimana cara memperbarui status di React?

Anda memperbarui status komponen dengan memanggilnya ini.setState() Metode.

19. Jelaskan Mode Ketat React

Mode ketat React adalah alat yang membantu pengembang menemukan potensi masalah dalam aplikasi dengan mengaktifkan pemeriksaan tingkat lebih dalam pada komponen dan menyoroti lebih banyak peringatan. Mode ketat hanya tersedia dalam mode pengembangan saja.

20. Apa yang dimaksud dengan Mengangkat State ke Atas dalam React?

Artinya, membiarkan komponen anak berbagi status umum dari induknya, karena hal ini membuat pengelolaan menjadi lebih mudah daripada jika tiap komponen anak mengelola status umum tersebut secara individual.

21. Bagaimana Anda Melewatkan Data di React?

Anda meneruskan data di React menggunakan properti dan callback. Properti React bersifat searah, yang memungkinkan properti hanya diteruskan dari komponen induk ke komponen turunannya. Untuk meneruskan data dari komponen turunan ke komponen induk, Anda harus menggunakan fungsi callback.

22. Tentukan Aliran dalam Bereaksi

Flux adalah konsep searah untuk mengarahkan aliran data dalam suatu aplikasi. Menjadi searah berarti bahwa data hanya dapat berpindah dari komponen induk ke komponen anak. Flux juga dapat mencakup beberapa penyimpanan data per aplikasi.

23. Tentukan Redux dalam Bereaksi

Redux adalah pustaka JavaScript sumber terbuka yang berguna untuk mengelola status kompleks dalam suatu aplikasi. Pustaka ini bersifat independen dan dapat digunakan dalam kerangka kerja lain seperti Angular. Tidak seperti Flux, Redux memusatkan manajemen status aplikasi, sehingga memudahkan pembuatan UI yang kompleks.

24. Kapan Anda Harus Menggunakan Redux?

Tidak semua aplikasi memerlukan Redux. Namun, Redux berguna dalam kondisi berikut:

1. Ketika Anda memiliki sejumlah besar status aplikasi di aplikasi Anda
2. Ketika logika aplikasi Anda rumit
3. Ketika aplikasi Anda memiliki basis kode yang besar
4. Saat Anda harus memperbarui aplikasi secara berkala
5. Ketika Anda memiliki banyak orang yang bekerja pada aplikasi

25. Apa Perbedaan Utama antara Redux dan Flux?

Perbedaan utama antara keduanya adalah Redux mengelola semua data aplikasi dari satu penyimpanan, sementara Anda dapat memiliki beberapa penyimpanan di bawah Flux.

26. Sebutkan Komponen-komponen Redux

Ada 4 bagian utama Redux:

1. Toko – Di sinilah Anda menyimpan status aplikasi.
2. Tindakan – Ini adalah peristiwa yang menyebabkan aplikasi mengirim data ke penyimpanan Redux.
3. Peredam – Ini adalah fungsi yang menerima status aplikasi saat ini dan tindakan sebagai argumen, lalu mengembalikan status baru sebagai hasilnya.
4. middleware – Fitur ini memungkinkan pengembang untuk menangkap semua tindakan dari suatu komponen sebelum mencapai fungsi reducer.

27. Apa itu React Hooks?

Hook React merupakan fitur komponen fungsi yang memungkinkan Anda mengakses berbagai fitur React, seperti data status dan pembaruan rendering. Hook ini diperkenalkan di React 16.8.

28. Sebutkan jenis Hooks di React

Ada 15+ hook dalam React, mulai dari hook dasar seperti useState, useEffect, dan useContext hingga hook tambahan seperti useCallback, useReducer, useMemo, useRef, dan seterusnya.

29. Apa itu Fragmen?

Fragmen React adalah cara mudah untuk mengelompokkan beberapa elemen anak dalam suatu komponen, tanpa menambahkannya ke DOM. Anda cukup mendefinisikan tag menggunakan:

<>

or

dan memuat semua elemen anak yang Anda inginkan di dalamnya. Satu-satunya perbedaan adalah versi singkat <> tidak menerima kunci dan atribut, sedangkan versi panjang menerima.

30. Sebutkan metode utama dari paket react-dom

Metode-metode tersebut adalah createPortal() untuk merender anak ke dalam DOM eksternal dan flushSync() untuk mem-flush pembaruan. Ada juga metode render() dan hydrate(), yang telah digantikan oleh createRoot() dan hydrateRoot() sejak React 18.

31. Apa itu React Keys?

Kunci adalah pengenal unik yang paling baik digunakan untuk mengelola daftar. Kunci memudahkan identifikasi item individual dalam daftar dan mengetahui kapan setiap item telah diperbarui, dihapus, atau diubah dengan cara apa pun.

32. Mengapa Tombol React Penting?

Kunci penting dalam React karena membantu dalam rendering DOM yang sebenarnya secara efisien. React bagus karena mencoba meminimalkan komponen mana yang dirender ulang setelah suatu kejadian, dan penggunaan kunci pada suatu daftar mencegah React dari keharusan merender ulang seluruh daftar, yang dapat menjadi masalah dengan daftar yang besar.

33. Apa itu Event di React?

Peristiwa adalah tindakan apa pun dalam aplikasi yang berasal dari pengguna atau sistem. Peristiwa dapat berupa klik atau ketuk tetikus pada perangkat seluler hingga perubahan ukuran jendela, penekanan tombol, seretan, fokus, dan sebagainya.

34. Jelaskan apa yang dimaksud Acara Sintetis Cara

Peristiwa sintetis adalah pembungkus di sekitar peristiwa asli browser, dengan masalah bahwa browser yang berbeda memberi nama peristiwa mereka secara berbeda. React menggunakan peristiwa sintetis untuk menghindari masalah harus membuat beberapa implementasi dan metode untuk semua browser yang berbeda di luar sana. Dengan cara ini, React mempertahankan nama umum untuk semua peristiwa browser yang berbeda sebagai API terpadu.

35. Apa itu Webpack?

Webpack adalah sistem bundling modul yang digunakan untuk menggabungkan dan mengecilkan file JavaScript dan CSS. Webpack dibangun di Node.js dan berguna saat bekerja dengan sejumlah besar file atau aset non-kode seperti gambar dan font.

36. Apa itu create-react-app?

Create-react-app adalah alat yang membantu Anda membuat aplikasi React satu halaman di lingkungan Node.js Anda. Alat ini menghasilkan semua file dan folder yang Anda perlukan untuk memulai aplikasi dasar dan Anda melanjutkannya dari sana. Alat ini memerlukan Node versi 14.0.0 ke atas dan npm dari ver. 5.6.

Cara pemakaiannya mudah:

npx buat-reaksi-aplikasi myNewApp

cd aplikasi baru saya

mulai npm

37. Bisakah Anda Merender Sisi Server dengan React?

Ya, Anda bisa, meskipun hal itu bisa menghabiskan banyak sumber daya untuk proyek-proyek besar. Server-side rendering sangat membantu karena meningkatkan pengalaman pengguna dan SEO. Anda akan memerlukan lingkungan Node.js, bundler seperti Webpack, dan framework seperti Next.js dan Remix untuk merender aplikasi React saat runtime. Solusi untuk penggunaan sumber daya yang intensif adalah dengan menggunakan generator situs statis, seperti Next.js gatsby.

38. Jelaskan apa yang dilakukan fungsi panah

Fungsi panah hanyalah cara yang lebih singkat untuk mendefinisikan fungsi. Fungsi ini merupakan singkatan ES6 yang menggantikan:

= fungsi() dengan ()=>.

Misalnya:

uji = fungsi(){

kembalikan “Ini adalah tes”;

}

kemudian menjadi:

uji = () => {

kembalikan “Ini adalah Tes”;

}

atau untuk pernyataan satu baris:

test = () => “Ini adalah Tes”;

39. Apa itu a Bereaksi Router?

React router adalah pustaka yang menyediakan fungsionalitas perutean dalam aplikasi React. Pustaka ini memudahkan penyertaan dan penggunaan komponen navigasi yang lengkap, yang dapat sangat membantu untuk proyek besar atau kompleks.

40. Apa Keuntungan Utama menggunakan React Router?

Ini membuat jalur url yang berbeda untuk aplikasi Anda dan menyediakan nilai window.location dan objek history.

41. Apa itu ComponentWillUnmount()?

Ini adalah metode komponen yang dipanggil setiap kali React hendak menghancurkan komponen tersebut. Ini adalah tempat yang bagus untuk membersihkan berbagai hal, menghapus penghitung waktu, membatalkan permintaan jaringan, dan menangani masalah deinisialisasi penting lainnya.

42. Apa itu Constructor()?

Konstruktor adalah metode komponen yang dipanggil selama inisialisasi komponen. Biasanya digunakan untuk menginisialisasi status lokal dan untuk mengikat metode pengendali peristiwa.

43. Apa itu Virtual DOM?

DOM virtual React adalah salinan ringan dari DOM dokumen HTML yang sebenarnya. DOM ini digunakan untuk manajemen yang efisien dan pembaruan perubahan pada DOM yang sebenarnya.

44. Apa keuntungan Virtual DOM dibandingkan Real DOM?

DOM virtual lebih ringan dan lebih cepat dirender daripada DOM asli, dan ini membuatnya lebih efisien untuk dirender ke DOM virtual terlebih dahulu dan hanya membuat perubahan pada DOM asli saat diperlukan. Setiap node pada DOM asli memiliki komponen yang sesuai pada DOM virtual, dan setelah ada perubahan pada komponen virtual setelah dirender, React kemudian mengetahui dengan tepat node HTML asli mana yang harus diperbarui atau dihapus.

45. Jelaskan istilah Rekonsiliasi dalam Bereaksi

Rekonsiliasi merupakan metode React untuk memperbarui DOM asli hanya ketika diperlukan, dengan cara mengecek versi terkini dari DOM virtual melalui diffing dan hanya memperbarui simpul-simpul yang berubah pada DOM asli.

46. Jelaskan istilah Profil dalam Bereaksi

Profiler adalah alat React yang membantu mengoptimalkan aplikasi dengan mengukur seberapa sering aplikasi dirender dan berapa lama waktu yang dibutuhkan setiap komponen untuk dirender. Ini membantu pengembang mengidentifikasi bagian aplikasi yang mungkin memerlukan pengoptimalan.

47. Jelaskan istilah Konteks dalam Bereaksi

Konteks adalah metode untuk meneruskan data antara komponen React di banyak level tanpa harus meneruskan data melalui setiap level bersarang menggunakan properti. Metode ini paling baik digunakan untuk memudahkan berbagi data dengan banyak komponen yang tidak memerlukan pembaruan konstan, seperti informasi tema dan data pengguna. Kelemahannya adalah metode ini dapat mempersulit penggunaan kembali komponen.

48. Jelaskan istilah Bantalan dalam Bereaksi

Mounting dalam React adalah proses melampirkan komponen sebagai node ke DOM. Un-mounting adalah kebalikannya.

49. Jelaskan istilah Rendering dalam Bereaksi

Rendering adalah proses menggambar komponen. Proses ini biasanya terjadi saat status komponen berubah dan React harus menggambar ulang UI. Jika komponen digambar ulang selama rendering, komponen turunannya juga akan digambar ulang.

50. Jelaskan istilah Batas Kesalahan dalam Bereaksi

Batasan kesalahan mengacu pada komponen React yang menangkap kesalahan JavaScript dari komponen turunannya, mencatat kesalahan, dan menampilkan UI fallback sebagai ganti node yang mengalami crash. Batasan kesalahan diperkenalkan di React 16.

Kesimpulan

Kita telah mencapai akhir daftar 50 pertanyaan wawancara React yang harus diketahui dan diharapkan sekarang Anda sudah memiliki gambaran tentang apa yang dapat Anda harapkan.

Anda juga harus memperhatikan bahwa tidak ada yang tetap sama dan wawancara Anda dapat mengambil arah mana saja. Oleh karena itu, Anda harus terus belajar dan mengikuti perkembangan terkini.