LFZ Quiz questions (Senior parts 2)

Question 1

(react-elements)

What is React?

Answer 1

A JavaScript library for building user interfaces.

Question 2

(react-elements)

What is a React element?

Answer 2

Object

Question 3

(react-elements)

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, container[, callback])
Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).

Question 4

(babel-intro)

What is Babel?

Answer 4

Babel is a JavaScript compiler.
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Question 5

(babel-intro)

What is a Plug-in?

Answer 5

In computing, a plug-in (or plugin, add-in, add-in, add-on, or addon) is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.

Question 6

(babel-intro)

What is a Webpack loader?

Answer 6

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Question 7

(babel-intro)

How can you make Babel and Webpack work together?

Answer 7

within a webpack.config.js file, we can add a rule to use loader for the babel-loader and plugins(ex. babel-loader).
Or we can use inline command or CLI.

Question 8

(react-jsx)

What is JSX?

Answer 8

It is a syntax extension to JavaScript used in React. It describes what the UI should look like. JSX produces React “elements”

Question 9

(react-jsx)

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

Answer 9

We can use a babel-loader and a plugin of ‘@babel/plugin-transform-react-jsx’.

Question 10

(react-function-components)

What is a React component?

Answer 10

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

Question 11

(react-function-components)

How do you define a function component in React?

Answer 11

function keyword, component name and function parameter of property.

Question 12

(react-function-components)

How do you define a function component in React?

Answer 12

It is very similar to the function declaration of JavaScript.
function keyword, component name and function parameter as property. Function name should start with a capital letter.

Question 13

(react-function-components)

How do you mount a component to the DOM?

Answer 13

we can use ReactDOM.render() method with passing in the first parameter as React element.

Question 14

(react-props-and-expressions)

What are props in React?

Answer 14

Props in React is arbitrary inputs when components are declared and object.

Question 15

(react-props-and-expressions)

How do you pass props to a component?

Answer 15

1. You can pass any JavaScript expression as a prop, by surrounding it with {}.
2. You can pass a string literal as a prop.
3. If you pass no value for a prop, it defaults to true.
4. If you already have props as an object, and you want to pass it in JSX, you can use … as a “spread” operator to pass the whole props object.

Question 16

(react-props-and-expressions)

How do you write JavaScript expressions in JSX?

Answer 16

You can write any JavaScript expression within a curly brace pair.

Question 17

(react-rendering-lists)

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

Answer 17

map() method

Question 18

(react-rendering-lists)

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

Answer 18

numbered string

Question 19

(react-class-components)

How do you create “class” component in React?

Answer 19

1. Create an ES6 class, with the same name, that extends React.Component.
2. Add a single empty method to it called render().
3. Move the body of the function into the render() method.
4. Replace props with this.props in the render() body.
5. Delete the remaining empty function declaration.

Question 20

react-class-components
How do you access props in a class component?

Answer 20

this.props

Question 21

(react-events-and-state)

What is the purpose of state in React?

Answer 21

State is similar to props, but it is private and fully controlled by the component.

Question 22

(react-events-and-state)

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

Answer 22

We can add an React event in an HTML element using on+EventName using camelCase and passing function name within {}
ex)

Activate Lasers

Question 23

single responsibility principle

Answer 23

that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

Question 24

(react-form-controls)

What are controlled components and how do you work with them?

Answer 24

a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called “controlled components”.

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

Question 25

(promises)

What are the three states a Promise can be in?

Answer 25

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

Question 26

(promises)

How do you handle the fulfillment of a Promise?

Answer 26

if the operation completed successfully, call promise.resolve() method to return a new promise object.
after getting the return, we can use then() method of promise object and call-back function.

Question 27

(promises)

How do you handle the rejection of a Promise?

Answer 27

promise. reject() method.

promise. catch(call-back function) or second call-back of then() method.

Question 28

(fetch)

What does fetch() return?

Answer 28

A Promise that resolves to a Response object.

https://developer.mozilla.org/en-US/docs/Web/API/Response

Question 29

(fetch)

What is the default request method used by fetch()?

Answer 29

GET

Question 30

(fetch)

How do you specify the request method (GET, POST, etc.) when calling fetch?

Answer 30

We can use method parameter of fetch() method

The request method, e.g., GET, POST. Note that the Origin header is not set on Fetch requests with a method of HEAD or GET.

Question 31

(fetch-in-react)

When does React call a component’s componentDidMount method?

Answer 31

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request

Question 32

(fetch-in-react)

Name three React.Component lifecycle methods.

Answer 32

constructor(), render(), componentDidMount()

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Question 33

(fetch-in-react)

How do you pass data to a child component?

Answer 33

using props property