React.js

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

An object; An element describes what you want to see on screen. Unlike a DOM element, React elements are plain objects, and are cheap to create.

Question 3

How do you mount a React element to the DOM?

Answer 3

With the render method of the ReactDOM object;

ReactDOM.render(element, container[, callback]

Question 4

What is JSX?

Answer 4

A syntax extension for JavaScript used with react 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

Because JSX produces React “elements”.

Question 6

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

Answer 6

By adding the @babel/plugin-transform-react-jsx, babel-loader too.

Question 7

What is a React component?

Answer 7

A React component is conceptually like a JavaScript function. They accept arbitrary inputs called (“props”) and return React elements describing what should appear on screen.

Question 8

How do you define a function component in React?

Answer 8

You can write a JavaScript function accepting “props” as a single object parameter and returning a React element;
You can also use ES6 classes.

Question 9

How do you mount a component to the DOM?

Answer 9

With the render method of the ReactDOM object.
(first argument is a react element, using the function name as the type. Second is where you would like it to be mounted.)

Question 10

What are props in React?

Answer 10

props are single object arguments which contain the properties of a react element.

Question 11

How do you pass props to a component?

Answer 11

By passing the props object as a parameter in the component definition, and then accessing it via JavaScript Expressions; ( within the react Element )

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

By enclosing the JavaScript expression in curly braces. Then you can add in whatever expression you want, (besides if/or)

Question 13

How do you create “class” component in React?

Answer 13

class ‘ComponentName’ extends React.Component {
render ( ) {
return ‘reactElement’
({this.props.text})

Question 14

How do you access props in a class component?

Answer 14

with ‘this.props’

Question 15

What is the purpose of state in React?

Answer 15

So we can change how an element renders over time. (vs having to create another element each time?)

Question 16

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

Answer 16

As a prop, the event name is ‘on’ + ‘eventNameInCamelCase’

Question 17

What are controlled components?

Answer 17

Input form elements whose values are controlled by React to decide what happens on subsequent user input.

Question 18

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

Answer 18

value, onChange

Question 19

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

Answer 19

The map method.

Question 20

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

Answer 20

A string that uniquely identifies a list item among its siblings.