Web Fundamentals
React
Data & Rendering
Data Structures
Document Object Model (DOM)
100

This type of web application loads a single HTML page and dynamically updates content as the user interacts with the app.

What is Single Page Application?

An SPA loads all necessary code and data for the entire application on the initial page load, allowing for a seamless user experience.

100

This syntax extension for JavaScript that allows you to write HTML-like structures within your React components.

What is JSX? (JavaScript XML)

100

In React, this function is used to handle user input and update component state accordingly.


What is an event handler function, such as onClick() or onChange()?

100

This data structure consists of a collection of elements arranged in a sequence, with each element having an index.

What is an Array?

100

This programming interface for web documents represents the structure of a webpage as a tree of objects.

What is the Document Object Model (DOM)?

200

This approach to web design aims to create websites that provide an optimal viewing and interaction experience across a wide range of devices, from desktop computers to mobile phones.

What is responsive design?

200

This React hook allows you to perform side effects in function components, such as data fetching or subscriptions.

What is useEffect?

useEffect is used for side effects like data fetching or DOM manipulation after rendering

React Hooks are functions that let you "hook into" React features like state and lifecycle methods from functional components, lifecycle methods are specific to class components.

200

This lightweight data interchange format is easy for humans to read and write, and easy for machines to parse and generate.

What is JSON (JavaScript Object Notation)?

It uses a key-value structure similar to JavaScript objects and is commonly used for exchanging data between APIs and web applications built with React.

200

This mathematical structure consists of an ordered set of elements represented in rows and columns.

What is a matrix?

200

Unlike direct manipulation of the actual DOM, React uses this lightweight abstraction to update the DOM efficiently.

What is the Virtual DOM

300

This library is commonly used with React for declarative routing in web applications. .

What is React Router?

Routing helps define different URL paths and map them to specific components or views within the application.

300

This hook in React is used to manage state in functional components.

What is useState?

300

This method is used to retrieve data from an API and is often used with the useEffect hook in React.

What is fetch?

300

This non-linear data structure consists of nodes connected by edges, and is used to represent hierarchical relationships.

What is a Tree?

300

In the Document Object Model (DOM), this property of an element is used to get or set the value of an input field.

What is the value property?

400

This CSS concept describes the design and layout of elements in HTML documents, including their content, padding, border, and margin.

What is the Box Model?

400

This feature in React allows you to pass data from a parent component to a child component.

What are props?

400

In JavaScript, these types of operations allow other operations to run while waiting for the previous one to complete.

What are asynchronous operations?

400

This data structure in JavaScript is a collection of unique elements, with no specific order or index.

What is a Set?

400

This method in the Document Object Model (DOM) is commonly used to select a single element from the HTML document based on a CSS selector.

What is the querySelector method?

500

This feature in CSS allows you to apply different styles based on the characteristics of the device or browser viewport.

What are media queries?

500

In React, this technique allows you to render different UI elements based on certain conditions or state.

What is conditional rendering?

500

In JavaScript, this feature is commonly used to manage asynchronous operations and handle their results or errors through chained callbacks or more recently, with cleaner syntax using, then() and catch() methods.

What is the Promise object?

500

In JavaScript, this concept refers to the practice of not modifying the original data structure, but instead creating a new copy with the desired changes.

What is immutability?

500

This feature in React allows you to encapsulate and isolate components' styles and markup, preventing them from affecting or being affected by styles outside the component.

What is the Shadow DOM in React?

M
e
n
u