React

Question 1

What is JSX?

Answer 1

a syntax extension to JS allow us to write declarative inside js files (such as HTML).

Question 2

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

Answer 2

because JSX is part of React library

Question 3

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

Answer 3

by installing devDependencies -> @babel/plugin-transform-react-jsx

Question 4

What is a React component?

Answer 4

JS functions

Question 5

How do you define a function component in React?

Answer 5

function function_name (props as parameter) {
return JSX element[s]
}

Question 6

How do you mount a component to the DOM?

Answer 6

by calling render of root object and passing in JSX elements/function components

Question 7

What are props in React?

Answer 7

Parameters for React function component
{ object }

Question 8

How do you pass props to a component?

Answer 8

through attribute keys and value ->

<Function></Function>

Question 9

How do you write JavaScript expressions in JSX?

Answer 9

{ JS expression }

Question 10

How do you create “class” component in React?

Answer 10

class className extends React.Component {
render() {
return //codes
}
//other codes
}

Question 11

How do you access props in a class component?

Answer 11

using this.props.//

Question 12

What is the purpose of state in React?

Answer 12

object that hold information that influences the output render(), state is managed within the component

Question 13

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

Answer 13

by binding it. this.EventHandler.bind(this)
also add it as attribute onto the JSX element[s]

Question 14

What are controlled components?

Answer 14

an element whose value is controlled by react

Question 15

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

Answer 15

value & onChange

Question 16

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

Answer 16

.map()

Question 17

What does express.static() return?

Answer 17

[middleware] return static files (images, css files, JS files, …)

Question 18

What is the local __dirname variable in a Node.js module?

Answer 18

The directory name of the current module. This is the same as the path.dirname() of the __filename.

Question 19

What does the join() method of Node’s path module do?

Answer 19

join all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path

Question 20

When does React call a component’s componentDidMount method?

Answer 20

is invoked (called) immediately after a component is mounted (inserted into the tree).

Question 21

Name three React.Component lifecycle methods.

Answer 21

Render(), Constructor(), ComponentDidMount()

Question 22

How do you pass data to a child component?

Answer 22

using props