React

Question 1

What is React?

Answer 1

a JavaScript library that is used for building user interfaces specifically for single-page applications

Question 2

What is a React element?

Answer 2

an object that gets returned from a React components and it describes what you want to see on the screen

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(reactElement, domContainerNode)

Question 4

What is JSX?

Answer 4

a syntax extension to JavaScript to describe what the UI should look like

Question 5

Why must the React object be imported when authoring JSX in a module?

Answer 5

JSX is syntactic sugar for converting the “prettified” code into
React.createElement() and ReactDOM.render() methods after it’s compiled by Babel. Therefore, React & ReactDOM would need to be in scope

Question 6

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 6

use Babel plug-in @babel/plugin-transform-react-jsx

Question 7

What is a React component?

Answer 7

• Components are like JavaScript functions that can take in “props” and return a React element to be rendered to the page.
• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation

Question 8

How do you define a function component in React?

Answer 8

by writing a JavaScript function and returning a React element (named with a capital letter)

Question 9

How do you mount a component to the DOM?

Answer 9

function Welcome() {
  return <h1>Hello</h1>;
}

ReactDOM.render(
;
document.getElementById(‘root’)
);

Question 10

What are props in React?

Answer 10

Props are objects passed as arguments into React components

Question 11

How do you pass props to a component?

Answer 11

erm

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

surround the JavaScript code in { } brackets

Question 13

How do you create “class” component in React?

Answer 13

extend React.Component and add render() method

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Question 14

How do you access props in a class component?

Answer 14

using the “this” keyword

Question 15

What is the purpose of state in React?

Answer 15

-to represent information about the component’s current situation

Question 16

How do you pass an event handler to a React element?

Answer 16

erm

• event = {javascript expression}
• properties

Question 17

What Array method is commonly used to create a list of React elements?

Answer 17

map

Question 18

What is the best value to use as a “key” prop when rendering lists?

Answer 18

• ideally, an ID from your data
• if not available, use anything that would uniquely identify the item from its siblings (i.e. a name)
• as a last resort, use item index

Question 19

What are controlled components?

Answer 19

a component that renders input form elements (input, textarea, select,…) and controls them by keeping the form data in the component’s state

Question 20

What two props must you pass to an input for it to be “controlled”?

Answer 20

value={ }

onChange={ }