React

Question 1

What is React?

Answer 1

A popular client-side (front-end) web framework for building complex web applications.

Question 2

Where does React run?

Answer 2

In the client’s browser.

Question 3

What does Next.js do?

Answer 3

It extends React to work on both the client and the server.

Question 4

What is a component in React?

Answer 4

A self-contained piece of code representing a region on a webpage, managing its own content, presentation, and behaviour.

Question 5

What enables dynamic updates in React components?

Answer 5

• React components can change their appearance and behaviour dynamically by manipulating the virtual Document Object Model (DOM).

Question 6

What is the Virtual DOM?

Answer 6

A virtual representation of the DOM that React uses to determine efficient updates to the actual DOM.

Question 7

What is a Single Page Application (SPA)?

Answer 7

A website built with one HTML page and updated dynamically using JavaScript (e.g. via React).

Question 8

How are React components similar to HTML?

Answer 8

They are expressed as nested collections of elements, like HTML tags.

Question 9

What is the key difference between React components and HTML elements?

Answer 9

React components are reactive and dynamic; HTML elements are static.

Question 10

Name three common HTML tags used in web apps

Answer 10

<div>, <input></input>, <table>
</table></div>

Question 11

What are some attributes used in <table> tags?

Answer 11

border, cellpadding, cellspacing, and inline styles.

Question 12

What is the limitation of static HTML pages?

Answer 12

They cannot respond to user input or change dynamically.

Question 13

How does React improve on static HTML?

Answer 13

By using dynamic, programmable components instead of static tags.

Question 14

What are other popular front-end frameworks besides React?

Answer 14

Vue, Angular, and Svelte.

Question 15

What is Node.js used for in React projects?

Answer 15

It allows JavaScript to run outside the browser, like on a server or local machine.

Question 16

What is npm?

Answer 16

Node Package Manager, used to install and manage packages.

Question 17

How do you check Node.js and npm versions?

Answer 17

Run: $ node –version
$ npm –version

Question 18

How do you create a new React project using Vite?

Answer 18

Run: npm create vite@latest ecommerce-site – –template react

Question 19

What is Vite?

Answer 19

A fast, modern build tool for front-end frameworks like React.

Question 20

How do you install and start a development server in React?

Answer 20

Run: npm install
then
npm run dev

Question 21

What is the purpose of npm install?

Answer 21

It installs dependencies listed in the package.json file.

Question 22

What do the main files and directoriesin a React app contain?

Answer 22

• index.html: The main HTML file.
• package.json: Lists the package dependencies for the project. Used by npm install to determine which packages to install.
• public: Contains static assets like images
• src: Contains the source code of the application.
• vite.config.js: Configuration file for Vite.

Question 23

How do you run scripts defined in package.json?

Answer 23

Using npm run

Question 24

What does npm run dev do?

Answer 24

Starts the Vite development server.

Question 25

What does npm run lint do?

Answer 25

Runs ESLint to check code for errors and style issues.

Question 26

What is App.jsx?

Answer 26

The main React component file of a project.

Question 27

What is JSX?

Answer 27

JavaScript XML - a syntax extension mixing JavaScript with HTML-like code.

Question 28

What does export default App mean?

Answer 28

It exports the App component so it can be used elsewhere in the project.

Question 29

What happens when React sees a component tag in HTML?

Answer 29

It calls the function and renders the returned HTML.

Question 30

What URL shows the running React project in development?

Answer 30

http://localhost:5173

Question 31

How do you create a separate Button component in React?

Answer 31

Create a new file (e.g., ButtonComponent.jsx) with a function returning JSX for a button.

Question 32

How do you use a custom component in App.jsx?

Answer 32

Import it and include it in the JSX like a normal HTML tag.

Question 33

How do you install Tailwind CSS in a React project?

Answer 33

Run: npm install -D tailwindcss postcss autoprefixer

Question 34

What does -D mean when installing packages?

Answer 34

It installs the package as a development dependency.

Question 35

What does npx tailwindcss init -p do?

Answer 35

Generates Tailwind and PostCSS config files.

Question 36

What file do you configure Tailwind’s content paths in?

Answer 36

tailwind.config.js

Question 37

Where do you add Tailwind's @tailwind directives?

Answer 37

In the ./src/index.css file that was auto generated by Vite when we created our react app. In index.css, add: @tailwind base; @tailwind components; @tailwind utilities;

Question 38

What are the three layers of Tailwind CSS?

Answer 38

Base, Components, Utilities.

Question 39

What does the Base Layer in Tailwind do?

Answer 39

Provides low-level, foundational styles.

Question 40

What is the Components Layer in Tailwind for?

Answer 40

Contains pre-designed component styles like buttons and forms.

Question 41

What is the Utilities Layer in Tailwind?

Answer 41

Contains atomic, single-purpose utility classes for custom design.

Question 42

How do you apply Tailwind after setup?

Answer 42

Run: npm run dev to rebuild and serve the app.

Question 43

What does the updated App component do?

Answer 43

Returns JSX with nested components and displays the webpage UI.

Question 44

What is a label in the context of React components?

Answer 44

A label is a prop used to pass data from a parent component (e.g., App) to a child component (e.g., ButtonComponent).

Question 45

How is the label prop accessed inside a component?

Answer 45

By destructuring it in the function parameters: const ButtonComponent = ({ label }) => { ... }.

Question 46

What are props in React?

Answer 46

Props are read-only attributes passed from parent to child components to make them reusable and dynamic.

Question 47

What happens when a prop changes in a parent component?

Answer 47

Props are read-only attributes passed from parent to child components to make them reusable and dynamic. When a prop of a React component is changed by its parent component, the child component is re-rendered with the new prop value- when changed React recalls the function with the new value.

Question 48

What is rendering in React?

Answer 48

Rendering is the process of turning React code into an actual webpage using JSX to create a virtual DOM. 1) function components return JSX 2) rendering a component begins with calling the components function 3) resulting JSX element used to create virtual DOM 4) virtual DOM updates the actual DOM

Question 49

What does JSX stand for?

Answer 49

JSX stands for JavaScript XML and is a mix of HTML and JavaScript used in React components.

Question 50

How does JavaScript import specific named exports?

Answer 50

Using curly braces: import { useState, useEffect } from react.

Question 51

How is a default export imported in JavaScript?

Answer 51

Without curly braces: import React from react. When you don't have {} you import the default export and assign it to the name you used. When you use {} you import specific named exports and the name used is important.

Question 52

What are React hooks?

Answer 52

Functions that let you use state and lifecycle features in function components. React provides built-in hooks including: - useState, useEffect, useContext

Question 53

What does the useState hook do? What are the two values returned by useState?

Answer 53

It takes one argument, the initial state, and returns an array of two elements: - The first element is a value that always equals the current state. - The second element is a function that can be used to update the state. - Calling this function will cause the component to rerender with the new state value. State updates are performed asynchronously.

Question 54

What does the useEffect hook do?

Answer 54

It allows you to perform side effects in function components based on dependencies. - It accepts two arguments: a callback function and an array of dependencies. - The callback function contains the side effect logic. - The array of dependencies is a list of variables upon which the effect depends. If any of these variables change, the effect will run again. - This allows you to control when your side effects run, ensuring they only run when necessary.

Question 55

What does the useContext hook do?

Answer 55

Lets you subscribe to a context which contains data

Question 56

What causes a component to re-render when using useState?

Answer 56

Calling the state update function returned by useState.

Question 57

What does the useEffect dependency array do?

Answer 57

Controls when the effect runs by watching specified variables.

Question 58

How are lists of JSX elements rendered in React?

Answer 58

Using array methods like map and filter to generate JSX elements and wrapping them in HTML tags like ul and li. - ul is an unordered list. - li is a list item.

Question 59

What does the App component typically do in a React app?

Answer 59

Defines the top-level structure and manages state such as searchTerm using useState.

Question 60

How is a search input typically handled in React?

Answer 60

With a Search component that uses an input element and updates state using a passed prop function.

Question 61

How is a list of products rendered in a ProductList component?

Answer 61

By mapping over an array of products to generate JSX elements.