Frameworks Quiz - Languages JavaScript

Free practice quiz: Frameworks (Languages JavaScript). 52 multiple-choice questions with answers and explanations. Play online, no sign-up needed.

This Languages JavaScript practice quiz has 52 multiple-choice questions on Frameworks, and 52 of them come with an explanation. Try the 5 sample questions below (tap an option to check yourself), then play the full quiz online. No sign-up needed.

Sample questions

1. Which of the following is a client-side JavaScript framework primarily used for building user interfaces?

   1. Node.js
   2. React
   3. Express.js
   4. AngularJS (AngularJS 1.x)
   Show answer

   Answer: B. React

   React is a popular JavaScript library (often referred to as a framework) for building user interfaces, primarily focused on the view layer of an application. Node.js and Express.js are backend technologies, and AngularJS (the older version) is also a client-side framework but React has a different architectural approach.

2. Which of the following is a characteristic of Svelte?

   1. It relies heavily on a virtual DOM.
   2. It compiles components into highly efficient imperative JavaScript code at build time.
   3. It is primarily a library for managing application state.
   4. It requires a runtime library on the client for all its functionality.
   Show answer

   Answer: B. It compiles components into highly efficient imperative JavaScript code at build time.

   Svelte is a compiler. Instead of using a virtual DOM or shipping a runtime library, Svelte compiles your components into small, vanilla JavaScript modules that efficiently update the DOM when state changes.

3. Which React lifecycle method is invoked immediately after a component's updates are flushed to the DOM?

   1. componentDidMount
   2. shouldComponentUpdate
   3. componentDidUpdate
   4. getSnapshotBeforeUpdate
   Show answer

   Answer: C. componentDidUpdate

   `componentDidUpdate()` is called after the component updates and the changes have been rendered to the DOM. `getSnapshotBeforeUpdate()` is called before the DOM changes.

4. Which of the following is a meta-framework built on top of React, providing features like SSR, SSG, and API routes?

   1. Angular
   2. Vue.js
   3. Next.js
   4. Ember.js
   Show answer

   Answer: C. Next.js

   Next.js is a popular React framework that enables Server-Side Rendering (SSR) and Static Site Generation (SSG) for server-rendered React applications, as well as API routes for building backends.

5. What is the purpose of `React.memo`?

   1. To create a higher-order component.
   2. To memoize a functional component, preventing re-renders if its props have not changed.
   3. To manage state in functional components.
   4. To define prop types for a component.
   Show answer

   Answer: B. To memoize a functional component, preventing re-renders if its props have not changed.

   `React.memo` is a higher-order component that memoizes a functional component. It performs a shallow comparison of the component's props. If the props are the same, React skips re-rendering the component and reuses the last rendered result.

More questions in this quiz

Answers and explanations are in the full quiz.

1. In the context of React, what is JSX?
2. What is the primary purpose of Vue.js?
3. Which of the following is a characteristic of Angular (version 2+)?
4. What is the role of a 'Virtual DOM' in frameworks like React?
5. Which concept in React allows for code reusability and logic sharing between components without direct inheritance?
6. In Vue.js, what is the purpose of the `v-model` directive?
7. Which Angular concept is used to encapsulate logic and template for a specific part of the UI?
8. What is a 'state' in the context of a front-end framework like React or Vue.js?
9. What is 'server-side rendering' (SSR) in the context of JavaScript frameworks?
10. What is the purpose of 'props' in React?
11. Which of the following is a common state management library used with React?
12. In Angular, what is a 'Service' typically used for?
13. What is 'hydration' in the context of SSR frameworks like Next.js?
14. Which of the following is a core concept in Vue.js for making data reactive?
15. What does 'Single-Page Application' (SPA) typically refer to in web development frameworks?
16. Which React hook is used to manage state within functional components?
17. In Angular, what is the purpose of a 'Directive'?
18. What is 'create-react-app'?
19. What is the primary advantage of using a framework like Nuxt.js over plain React for building web applications?
20. In Vue.js, what is the `watch` property used for?
21. What is a 'prop drilling' issue in React, and how can it be mitigated?
22. Which of the following is a key feature of the Ember.js framework?
23. What is the purpose of `useCallback` hook in React?
24. In Angular, what is the purpose of an 'NgModule'?
25. What is 'code splitting' in the context of JavaScript frameworks?
26. Which of the following is a feature of Preact, a lightweight alternative to React?
27. What is the role of `useEffect` hook in React?
28. In Angular, what is a 'Pipe' used for?
29. What is the primary purpose of the `key` prop when rendering lists of elements in React?
30. Which Angular decorator is used to define a class as a component?
31. What is the role of a 'router' in a JavaScript framework like React Router or Vue Router?
32. What is the primary benefit of using `useMemo` hook in React?
33. Which of the following is a characteristic of the Alpine.js framework?
34. What is 'props drilling' in React?
35. In Vue.js, what is the purpose of the `computed` property?
36. What is the primary function of the `ref` hook in React?
37. Which of the following is a core concept in Angular for handling asynchronous operations and event streams?
38. Which of the following describes a 'progressive web app' (PWA)?
39. What is the main purpose of the `useContext` hook in React?
40. In Angular, what is the purpose of the `HttpClient` module?
41. What is 'state management' in the context of front-end frameworks?
42. Which of the following is a core tenet of the Redux library for state management?
43. What is the purpose of 'client-side routing' in frameworks like React Router?
44. Which framework is known for its focus on developer experience and providing a batteries-included ecosystem, often referred to as 'the framework with convention over configuration'?
45. What is the purpose of the `useReducer` hook in React?
46. In Vue.js, what is the purpose of a 'Lifecycle Hook'?
47. What is the primary advantage of using a framework like Astro?

More quizzes

• Syntax▶ Play
• DOM▶ Play
• ES6+▶ Play

Browse all JavaScript quizzes

More to play