React.js

Question 1

What is React?

Answer 1

javascript library for creating user interaces

Question 2

What is a React element?

Answer 2

object but not DOM

Question 3

How do you mount a React element to the DOM?

Answer 3

root.render()

Question 4

What is Babel?

Answer 4

toolchain that convert new javascript to old javascript

Question 5

What is a Plug-in?

Answer 5

software component that adds specific feature to program

Question 6

What is a Webpack loader?

Answer 6

transformation of files from different language to javascript

Question 7

How can you make Babel and Webpack work together?

Answer 7

babel-loader

Question 8

What is JSX?

Answer 8

syntax extension to javascript

Question 9

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

Answer 9

react element is actually being called

Question 10

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

Answer 10

‘@babel/plugin-transfomr-react-jsx’
ex: const element = <h1> ____ </h1>
*always need closing tag for react element; anything goes between tags called props.children
read as react element type h1 for react element

Question 11

What is a React component?

Answer 11

function or class that returns react element and could be appear on the screen

Question 12

How do you define a function component in React?

Answer 12

function name with CAPITAL first letter

Question 13

How do you mount a component to the DOM?

Answer 13

root.render()

Question 14

What are props in React?

Answer 14

object that passed as argument in function/ property in class situation

Question 15

How do you pass props to a component?

Answer 15

ex. 
function CustomButton(props) {
  return Click Me! {props.name};
}
(if not string) {ex: #} is needed
root.render();

if class, this.props.
class CustomButton extends React.Component {
  render() {
    return {this.props.text};
  }}

const element = (
  <div>

</div>
);

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

{}

Question 17

How do you create “class” component in React?

Answer 17

class \_\_\_\_ extends React.Component{
render().{
return
}
}
*render() is required*

Question 18

How do you access props in a class component?

Answer 18

this.props.____

Question 19

What is the purpose of state in React?

Answer 19

keep track of value that change over time

Question 20

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

Answer 20

call the event as property and set the fallback function as value
ex.

Question 21

What are controlled components?

Answer 21

input form element whose value is controlled by react

Question 22

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

Answer 22

key (must be unique) -> id or index
onChange -> value changes when event.target.value changes
ex. this.setState({value: event.target.value})