React

Question 1

What is React?

Answer 1

a program that enables us to create an interactive UI

Question 2

What is a React element?

Answer 2

an object that describes what the dom looks like

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render()

Question 4

Interview Question!

difference between library and framework:

Answer 4

a framework will run the function for you when the time is ready.
a library will have a list of functions that you can use when you want

Question 5

What is JSX?

Answer 5

it is a syntax extension to JavaScript. It is typically used with React to describe what the UI should look like. JSX produces React “elements” and can render them
Stands for JavaScript Syntax

Question 6

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

Answer 6

because JSX cannot be read by the browser

React objects must be imported because it used in the final code that babel outputs

Question 7

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

Answer 7

installing the dev-dependencies webpack, webpack-cli, babel-loader, @babel/core, @babel/plugin-transform-react-jsx, add a build script to run webpack in package.json. Then finally npm run build

Question 8

What is a React component?

Answer 8

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 9

How do you define a function component in React?

Answer 9

same way you define a function in javascript. however the name of the function has to start with a capital letter

Question 10

How do you mount a component to the DOM?

Answer 10

ReactDOM.render(
react element,
element in the DOM
)

Question 11

What are props in React?

Answer 11

the parameter of components (functions)
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

Question 12

How do you pass props to a component?

Answer 12

using props as an argument in the function/component and pass props as a javascript expression in the function definition

Question 13

How do you write JavaScript expressions in JSX?

Answer 13

by using {} within JSX

Question 14

How do you create “class” component in React?

Answer 14

class CustomButton extends React.Component

Question 15

How do you access props in a class component?

Answer 15

this.props

Question 16

What is the purpose of state in React?

Answer 16

represent the current situation of a component

setState() allows you to replace the state and render() will return a new react element

Question 17

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

Answer 17

button onClick = {function()}

Question 18

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

Answer 18

map method

Question 19

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

Answer 19

it needs to unique among all the elements in the array

Question 20

What are controlled components?

Answer 20

An input form element whose value is controlled by React

Question 21

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

Answer 21

onChange = {function}
value = {this.state.whateverthepropis}

Question 22

When does React call a component’s componentDidMount method?

Answer 22

after the render method

Question 23

Name three React.Component lifecycle methods.

Answer 23

constructor()
render()
componentWillUnmount()

Question 24

How do you pass data to a child component?

Answer 24

using prop