React

Question 1

What are the 3 rules of JSX?

Answer 1

1. Return a single root element.
2. Close all the tags, including self-closing tags (< />).
3. camelCase most things.

Question 2

Why do multiple JSX tags need to be wrapped with a parent element?

Answer 2

JSX is JavaScript - even though it looks like HTML - and a function in JavaScript cannot return two objects without wrapping them into an array.

Question 3

What is a React Fragment?

Answer 3

A special React element that can be used to wrap multiple JSX elements without actually adding an extra element into the DOM.

Question 4

Why are JSX attributes written in camelCase?

Answer 4

Because they are converted into keys of JavaScript objects and those keys/variables cannot contain dashes (so ‘stroke-width’ becomes ‘strokeWidth’).

Question 5

Why is the attribute ‘className’ used in React?

Answer 5

Because ‘class’ is a reserved JavaScript keyword.

Question 6

Why do you need to compile your React code?

Answer 6

Because React used JSX which needs to be compiled into plain JavaScript.

Question 7

What is a React component?

Answer 7

JavaScript functions that accept input - called ‘props’ - and return UI/HTML/JSX elements.

Question 8

What is the naming convention for React components?

Answer 8

Components should start with a capital letter to distinguish them from plain HTML and JavaScript.

Question 9

What are props?

Answer 9

Data passed to components as custom arguments/attributes that change the component’s behavior, look or what is rendered.

Question 10

What data type are props?

Answer 10

Object

Question 11

How are JavaScript variables used inside JSX markup?

Answer 11

By using the curly braces ‘{ }’ syntax.

Question 12

What are the 4 JavaScript expressions that can be added inside JSX curly braces ‘{ }’ ?

Answer 12

1. Object property with dot notation
   <h1>{props.title}</h1>
2. Template literal
   <h1>{Cool ${title}}</h1>
3. Returned value of a function
   <h1>{Cool ${title}}</h1>
4. Ternary operator
   <h1>{title ? title : ‘Default Title’}</h1>

Question 13

What prop should each child in a list have?

Answer 13

A “key” prop

Question 14

Why are “key” props necessary for all list items in React?

Answer 14

Because they uniquely identify the items in an array so that React knows what elements to update in the array.

Question 15

What are props used for?

Answer 15

To pass information to components

Question 16

What event listener is used for input fields?

Answer 16

onChange

Question 17

What event listener is used for forms?

Answer 17

onSubmit

Question 18

What are hooks?

Answer 18

Special functions that let you “hook into” React features such as adding state to function components.