React

Question 1

What is React?

Answer 1

a js library for creating user interfaces in a more intuative way.

Question 2

What is a React element?

Answer 2

it is an object that represents a DOM

Question 3

How do you mount a React element to the DOM?

Answer 3

You mount it using render, with the element name and then a container

Question 4

What is Babel?

Answer 4

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

What is a Plug-in?

Answer 5

software component that adds a specific feature to an existing computer program

Question 6

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.

Question 7

How can you make Babel and Webpack work together?

Answer 7

install babel loader

Question 8

What is JSX?

Answer 8

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Question 9

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

Answer 9

Since it uses the react-createElement syntax, it needs to be imported

Question 10

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

Answer 10

@babel/plugin-transform-react-jsx

Question 11

What is a React Component?

Answer 11

It is a function that can be used like a reusable code it can also be a class component: it accepts a single”props” object argument with data and returns a React element.

Question 12

How do you define a function component in React?

Answer 12

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

Question 13

How do you mount a component to the DOM?

Answer 13

Render method is how you mount a component

Question 14

What are props in React?

Answer 14

You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:
(How we pass data into components)

Question 15

How do you pass props to a component?

Answer 15

function CustomButton(props) {
  return (
    {props.text}
  );
}

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

{} using template literals and putting the expression or variable name in them

Question 17

How do you create “class” component in React?

Answer 17

class (NAME) extends React.Component {

render() {}
}

Question 18

How do you access props in a class component?

Answer 18

You need to use template literals and use this keyword

Question 19

What is the purpose of state in React?

Answer 19

Setting a state is so that the the interface knows what to put on the screen depending allowing for conditional rendering

Question 20

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

Answer 20

You set it as an attribute where the event handler is the set value

Question 21

When does React call a component’s componentDidMount method?

Answer 21

It is called after render method is called for the first time

Question 22

Name three React.Component lifecycle methods.

Answer 22

Render, componentDidmount, componentDidUpdate, constructor, component will unmount

Question 23

How do you pass data to a child component?

Answer 23

Via props