React

Question 1

What goes at the top of every React component?

Answer 1

import React from ‘react’;

Question 2

What is the basic format for creating a class-based component?

Answer 2

class MyComponent extends React.Component {
  render() {
    return <h1>I am a component</h1>;
  }
}

Question 3

What is the basic format for creating a functional component?

Answer 3

function MyComponent(props) {
  return <h1>Hello, {props.name}</h1>;
}

Question 4

Do React component names always need to start with capital letters?

Answer 4

Yes!

Question 5

What does it mean that React components are pure?

Answer 5

It means that they never modify their props. Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.

All React components must act like pure functions with respect to their props.

Question 6

What is the root DOM node in React?

Answer 6

It is the element in your DOM that you designate as the container for your React app. We call this a “root” DOM node because everything inside it will be managed by React DOM. Applications built with just React usually have a single root DOM node.

Question 7

How do you render a React element into your root DOM node?

Answer 7

To render a React element into a root DOM node, pass both to ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Question 8

What is the one required method in a React class component?

Answer 8

The render() method is the only required method in a class component, which is used to render DOM nodes. A class component must include render(), and the return can only return one parent element.