React Components

Question 1

What is a React.Component?

Answer 1

Is a simple javascript class that must be inherited to write a react component.

Question 2

How parameters are sent to the component?

Answer 2

Via the props parameter

Question 3

How to have the vscode html helpers even on javascript files?

Answer 3

By configuring the emmet settings.json to:

"emmet.includeLanguages": {
    "javascript": "html"
}

Question 4

What does the render method returns?

Answer 4

a React element

Question 5

How to interpolate javascript in a JSX structure?

Answer 5

By the use of the curly brackets { }

Question 6

What is the method that is always called when you create a react component?

Answer 6

render(){

}

Question 7

How to do string interpolation on javascript?

Answer 7

the string needs to be defined with `` and the var with ${ }

alert(this is the flashcard no ${number}.

Question 8

Where the react component keeps values to be used later on?

Answer 8

In the react’s superclass state property

Question 9

What to do with the javascript class when you need to implement the constructor?

Answer 9

You need to call super(props) in order to call React’s constructor - normal oop

Question 10

Should all react components’ constructor start with a super(props)?

Answer 10

Yes… All React component classes that have a constructor should start with a super(props) call.

Question 11

What happens when you call setState in a react component?

Answer 11

It refreshes itself and also all the child components.

Question 12

What is the React Developer Tools?

Answer 12

React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more. To get started, just open the Firefox devtools and switch to the “⚛️ Components” or “⚛️ Profiler” tab.

Question 13

What is a controlled component?

Answer 13

Is when a component does not have its own state, instead it receives delegates to call and inform changes to the parent component.

Question 14

What is immutability in React?

Answer 14

Is when instead of changing the object’s data, you create a new instance of object and replace the existing object with the updated one.

Question 15

Why is immutability important?

Answer 15

Complex features become simpler (time travel) and also the change detection mechanism works best once the object instance changes (instead of its content only).

Question 16

What is the main benefit of immutability?

Answer 16

The main benefit of immutability is that it helps you build pure components in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.

Question 17

What is a function component and what is the benefits of using one?

Answer 17

In React, function components are a simpler way to write components that only contain a render method.

Question 18

When to use a function component?

Answer 18

When the component don’t have their own state…

Question 19

Can a component change the props?

Answer 19

No, it can only change its own state.

Question 20

What are the four ways to create a react component?

Answer 20

React.createClass (deprecated), extends React.Component, Function component and Arrow Functions…

Question 21

What is a container component? What are common “attributes” of such component?

Answer 21

A component that has little to no markup. Tie other presentation components together. Knows about Redux. Stateful.

Question 22

What is a presentation component? What are common “attributes” of such component?

Answer 22

Dumb. Full of markup. Receives data and actions via prop. does not know about Redux. Not stateful - just plain functions.

Question 23

When is it a good idea to create a container component?

Answer 23

When the props a component received is not used and just passed down.