3.2 React Components & the Virtual DOM

Question 1

What is “the view”?

Answer 1

It’s what’s displayed to the user in their browser when they use an application?

Question 2

What is a single-page-application? (SPA)

Answer 2

A single-page application, or SPA, is a web application that houses all the UI parts and components in a single page as opposed to traditional websites that consist of multiple pages.

Question 3

What are React components? Name an example from your movie API

Answer 3

A React component encapsulates the logic and styling for a piece of a UI. By using components, you can split a UI down into its individual parts, making it easier to build, maintain, and scale. In Exercise 3.1: Intro to Frameworks & Libraries, you learned how your “main view” will contain numerous MovieCard components, each of which will display a movie with an image, title, and short description. Rather than writing a new card for each movie listed in the “main view,” you’ll create a reusable MovieCard component.

Question 4

What’s the difference between high level and low level components?

Answer 4

An example of a high-level component would be a complete view with several buttons and a form (e.g., your “main view.” In contrast, unitary, reusable, or low-level, components have a small, well-defined concern, for instance, a button or card, such as your MovieCard.

LoginView is a high-level component because it consists of an entire “view” that won’t be reused. MovieCard, on the other hand, will be reused within a number of views throughout the application, such as the “user profile view” (where a user’s favorite movies are listed) and the “director and genre view” (where movies with a particular director and genre are listed). MovieCard is therefore a low-level component.

Question 5

What do you have to keep in mind when choosing component names in React?

Answer 5

React’s documentation states that component names must begin with a capital letter; otherwise, they’ll be confused with HTML elements.

Question 6

What are props and states?

Answer 6

Props—short for “properties”—represent the external appearance of a component. The state, on the other hand, is what the component looks like internally. Some components only have props, whereas others only have a state. In some cases, a component will have neither props nor a state, but this is less common (usually a component has both). High-level components are mainly state-based, and low-level components are mostly prop-based, which holds true for the example above, where the LoginView (high-level) component is state-based, and the MovieCard (low-level) component is prop-based.

Question 7

Explain a bit more in detail about what “states” are

Answer 7

the state represents a component’s internal environment at a given moment in time. The state is private and fully controlled by the component.

Take the example of your LoginView component. Once the user has typed in their username, the component’s state will contain the username. After the user types in their password, this, too, will be stored in the state. When the user presses the “OK” button, LoginView will send a request to the server asking for authentication. This will probably set a “loading” property to true on LoginView’s state, and so on. Note that the state isn’t accessible from outside a component—it’s purely internal.

Question 8

What are components?

Answer 8

You can think of components like JavaScript functions. They accept inputs (i.e., props) and return React elements defining what should be rendered in the UI.

Question 9

What are “props”?

Answer 9

Props are the component’s inputs—its connections with the outer world. They can be pretty much anything: strings, booleans, functions, even JSX elements!

One important thing to note is that props are read-only. In other words, they can’t be changed by the component itself (as opposed to state, which can and usually will be changed by the component).

Question 10

In summary, there are two sorts of components you’ll encounter out in the wild: high-level and low-level.
Explain what each means.

Answer 10

High-level components:

are centered around the component’s state
might have props
are more of a complete, non-reusable view than a reusable unit (e.g., a login view)
Low-level components:

are centered around the component’s props
might have a state
are more of a reusable unit than a complete, non-reusable view (e.g., a card in a list)

Question 11

What are “leaf components”?

Answer 11

With React, it’s possible to nest components within one another. You might, for instance, have a “Confirm” button component nested within a form component. If you keep nesting components within components, eventually you’ll reach what’s known as “leaf components”; these are small components nested deep in the component hierarchy. For your myFlix application, you’ll probably keep to a fairly flat structure, as the application only covers one main topic—movies. This type of nesting is usually seen in apps that bundle several large different views with specific components.

Question 12

What is the virtual DOM in React?

Answer 12

With React, it’s possible to nest components within one another. You might, for instance, have a “Confirm” button component nested within a form component. If you keep nesting components within components, eventually you’ll reach what’s known as “leaf components”; these are small components nested deep in the component hierarchy. For your myFlix application, you’ll probably keep to a fairly flat structure, as the application only covers one main topic—movies. This type of nesting is usually seen in apps that bundle several large different views with specific components.

Question 13

What is JSX?

Answer 13

But what is JSX exactly? JSX (JavaScript XML) is, in essence, an extension to the JavaScript language; it looks a little like HTML and provides a familiar syntax you can use to structure the way components are rendered in a React application

With JSX, React acknowledges that the code needed to render a frontend application is intrinsically linked to other UI logic, for instance, state changes, event handling, and data preparation. Rather than separating the markup logic from the frontend logic using separate files, JSX allows you to write code that contains both. This would, of course, be a nightmare if it weren’t for the fact that, in React, your application is structured into separate, manageable, components.

Question 14

The constructor is the starting point of any component. Here is a code example.

If you don’t use the constructor() method, you can’t include any additional code to be executed at the point where the component is created.

Answer 14

class MyFlixApplication extends React.Component {

  constructor() {
    super();
    // code executed right when the component is created in the memory
  }  

render() {
return <div>Hello World</div>;
}
}

Question 15

What does it mean when “a component is mounted”?

Answer 15

When a component is “mounted,” it means that it’s fully rendered and has been added to the DOM, making it visible on the browser.

Question 16

Name the methods and order of the lifecycle of a component

Answer 16

Component construction: constructor()
render()
Component has been mounted: componentDidMount()
Component will be unmounted: componentWillUnmount()
Component has been updated: componentDidUpdate()

Don’t forget that changes done to the state and props will also prompt a render cycle (the render() method), just as you learned in “The UI as a Function of Its State” section earlier in this Exercise. This means that whenever the componentDidUpdate() method is triggered, so too shall the render() method be triggered.