webpage interactivity

Question 1

what does document.getElementById() return

Answer 1

a single element and null if its not found

Question 2

what does document.getElementByClassName() return

Answer 2

a collection of all elements with the class

Question 3

what does document.getElementByTagName() return

Answer 3

a collection of all elements with the tag

Question 4

what does document.querySelector() return

Answer 4

first matching element of the selector

Question 5

what does document.querySelectorAll() return

Answer 5

all matching elements of the selector

Question 6

what are events

Answer 6

user interactions or browser actions that js can detect and respond to

Question 7

in which two ways can we attach events to elements

Answer 7

inline event handlers
using addEventListener()

Question 8

inline event listeners

Answer 8

events are added in html attributes

Question 9

what is the issue with using inline event handlers

Answer 9

mixing js and html may be hard to maintain

Question 10

what is the benefit of using addEventListener()

Answer 10

allows you to have multiple event listeners for an element

Question 11

what is react

Answer 11

open source js library for ui components

Question 12

how is react declarative and what are the benefits of this

Answer 12

makes code more predictable and easy to debug as it automatically updates the dom to match the components state

Question 13

how is react component-based and what is the benefit of this

Answer 13

builds encapsulated components that manage their own state
each component can be reused meaning more manageable code

Question 14

what are components and what can they accept

Answer 14

modular reusable units (functions/classes) that come together to form the ui
they can optionally accept an input and return a react element

Question 15

what does a react element do

Answer 15

defines how a specific part of the code should be displayed

Question 16

what is a state

Answer 16

a js variable managed by react to store a components dynamic data

Question 17

what makes a state different to other js variables

Answer 17

persists across re-renders; when the state changes react automatically re-renders the component to reflect the new state

Question 18

what are props(properties)

Answer 18

a way to pass data from a parent to child component
allowing components to communicate

Question 19

what is a benefit of using props

Answer 19

makes components reusable and dynamic by allowing different values to be passed in

Question 20

jsx

Answer 20

allows you to write html-like code inside js
used by react components to represent the markup that is rendered by react into the browser