React

Question 1

What is React?

Answer 1

• a JavaScript library for creating user interfaces

Question 2

What is a React element?

Answer 2

• a plain object that describes what the DOM should look like
• (tells you tagName, props, children)

Question 3

How do you mount a React element to the DOM?

Answer 3

• ReactDOM.render( )

Question 4

What is JSX?

Answer 4

• a syntax extension to JavaScript that produces React elements
• basically, JSX just provides “syntactic sugar” for the React.createElement( ) method

Question 5

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

Answer 5

• The React library must always be in scope from JSX code since JSX compiles into calls to React.createElement( ).
• because it is used in the final code that Babel outputs.

Question 6

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

Answer 6

• install the Webpack and Babel devDependencies

Question 7

What is a React component?

Answer 7

• Components let you split up the UI into independent, reusable pieces, and think about each piece in isolation.
• Conceptually, they are like JavaScript functions/classes. They accept inputs (called props) and return React elements describing what should appear on the screen.

Question 8

How do you define a function component in React?

Answer 8

• using a JavaScript function or class - needs a capitalized Name and needs to return a React element

Question 9

How do you mount a component to the DOM?

Answer 9

using ReactDOM.render( )

Question 10

What are props in React?

Answer 10

• properties of an object

Question 11

How do you pass props to a component?

Answer 11

• make a React element with the type, and then pass the prop using key=value pairs ( =’ ‘ or ={ } )

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

• using curly braces around the expressions

Question 13

How do you create a “Class” component in React?

Answer 13

• class ClassName extends React.Component { }

Question 14

How do you access props in a class component?

Answer 14

• using the props property of the this object

- this.props.’prop’

Question 15

What is the purpose of state in React?

Answer 15

• to represent the current state of the component

- the values you put in state change over time, in event handlers, you update state using setState( )

Question 16

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

Answer 16

• you provide a listener when the element is initially rendered
• add an event listener as a prop on the element and set a JavaScript expression { } with a function/event-handler

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

• a string that uniquely identifies a list item among its siblings ( most often you’d use id’s from your data as keys)

Question 19

What are controlled components?

Answer 19

• an input form element whose value is controlled by React (by making the React state be the “single source of truth”)

Question 20

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

Answer 20

• onChange and the value prop