React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

A library is a JavaScript file that contains a bunch of functions, and those functions accomplish some useful task for your webpage.

Question 2

What is a React element?

Answer 2

An element describes what you want to see on the screen:

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render(element, container[, callback])

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

Question 4

What is JSX?

Answer 4

A syntax extension to JavaScript, it produces react elements and lets you use HTML syntax in JavaScrupt

Question 5

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

Answer 5

The JS will be undefined if you don’t

Question 6

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

Answer 6

Add this to webpack config file, 
loader: 'babel-loader',
          options: {
            plugins: [
              '@babel/plugin-transform-react-jsx'
            ]

Question 7

What is a React component?

Answer 7

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 8

How do you define a function component in React?

Answer 8

function CustomButton([props]) {
  return  Click Me!;
};

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render(
,
document.querySelector(‘#root’)
);

Question 10

What are props in react

Answer 10

objects getting passed to react elements

Question 11

How do you pass props to a component?

Answer 11

like arguments

const element = (
  <div>

</div>
);

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

close expression in curly braces, they mean stark end of a JavaScript expression

Question 13

How do you create “class” component in React?

Answer 13

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

A render method is required

Question 14

How do you access props in a class component?

Answer 14

{this.props.text}

Question 15

What is the purpose of state in React?

Answer 15

React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

State is like our data model for React, we use it to determine what the user should see when it renders.

Question 16

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

Answer 16

With JSX you pass a function as the event handler, rather than a string.

{‘Thanks’};

Question 17

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

Answer 17

map

Question 18

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

Answer 18

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

Question 19

What are controlled components?

Answer 19

In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

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”.

A react component that reacts to the changes of an element that it is wrapped around.

It receives it value via state and it has a change handler that updates that state.

Question 20

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

Answer 20

value and onChange

Question 21

When does React call a component’s componentDidMount method?

Answer 21

After render, but before page is finished loading

Question 22

Name three React.Component lifecycle methods.

Answer 22

constructor, render, componentDidMount

Question 23

How do you pass data to a child component?

Answer 23

as a prop to the child component