React.js Basics

Question 1

When we render a list of components/elements, what property should we add to it?

Answer 1

key

Question 2

The “key” property don’t get passed down to your components. What should we do if we need that value in our components?

Answer 2

We should explicitly pass the value as another prop

Question 3

Which JS operators can be used to conditionally render components?

Answer 3

• The && operator (expression && component)

- Ternary operator

Question 4

What is a “Controlled Component”?

Answer 4

An input form element whose value is controlled by React.
That is achieved by passing a value via the component’s props, and using that props as the value of the input:
Ex:

Question 5

What are 3 DOM elements that have internal state?

Answer 5

• Input
• Textarea
• Select

Question 6

To which event should you add a handler on a controlled component to handle mutation?

Answer 6

onChange

Question 7

To which event should add a handler on a form to handle submission?

Answer 7

onSubmit

Question 8

How is the “computed property name” ES6 syntax?

Answer 8

{ [prop] : value }

Question 9

What happens if you specify the ‘value’ property when rendering a controlled component?
(eg: )

Answer 9

This will prevent the user to change the value of the component.

Question 10

Explain the sentence: “The data always flows down”.

Answer 10

That means the state of a component can only be passed down to its children. A component can never pass state back to its parent.

Question 11

How is the syntax for creating a new class component (with constructor and rendering methods)?

Answer 11

class Calculator extends React.Component {
  constructor(props) {    
  super(props);  
  }    
  render() {   
    return ( <p>Hello</p> )  
  }
}

Question 12

On the snippet:
return (<h1>MyValue</h1>);
Why is it recommended to put parentheses?

Answer 12

To avoid the pitfalls of JS’s automatic semicolon insertion.

Question 13

What does Babel convert JSX expressions to?

Answer 13

To React.createElement() calls.

Question 14

What is React’s equivalente to the following onclick event handling: Activate Lasers

Answer 14

Activate Lasers- Camel case event name- Function is passed as expression, not string

Question 15

What is the difference between props and state for a component?

Answer 15

Props are properties that the component receives at creation time, and should be immutable.State are encapsulated properties that the component initializes (can be based on props values), and can mutate. State change causes component re-rendering.

Question 16

What is the correct way to change a component’s state?

Answer 16

By calling this.setState()

Question 17

In React what does “Lift the state up” means?

Answer 17

That is a technique to share state between components. Sharing state is accomplished by moving (lifting) it up to the closest common ancestor of the components that need it.The ancestor will then provide to the children both the state value and a handler function to mutate its state via the children props.

Question 18

“There should be a single ‘source of truth’ for any data that changes in a React application.”“What does that quote mean in coding perspective?

Answer 18

Means that state should be owned by a single component. If the same state must be shared between components, it must be lifted up to an ancestral component.

Question 19

Which tool can be used to inspect the components state in a page?

Answer 19

React Developer Tools

Question 20

What is the syntax of a function-based component?

Answer 20

function MyComponent(props) { return ( Hello );}

Question 21

Given: Content

How does the component DialogBox receives the div that is inside it?

Answer 21

Through the props.children property

Question 22

Given that a component SplitPane wants to render a layout:      
<div>
// left content here        
</div>
<div>
// right content here  
</div>

What is React solution to receive multiple children content?

Answer 22

Pass it normally via any attribute in props.
Ex:

}
right={ }
/>

SplitPane would use: this.props.left this.props.right internally

Question 23

Is there any limitations in what can be passed as props in React?

Answer 23

No.

Question 24

When is it recommended to use inheritance in React?

Answer 24

Never.

Question 25

What should I do if many components want to share the same non-UI related code?

Answer 25

Extract it into a separate JavaScript module The components may import it and use that function, object, or a class, without extending it.

Question 26

Which programming principle should be used when deciding when to create a new component?

Answer 26

Single Responsibility Principle

Question 27

Which lifecycle hook will be called on a component after it is rendered to the DOM for the first time?

Answer 27

componentDidMount()

Question 28

Which lifecycle hook will be called on a component whenever the DOM produced by it is removed?

Answer 28

componentDidUnmount()

Question 29

What are the 5 steps on Thinking in React?

Answer 29

0. Start with the Mockup
1. Break The UI Into A Component Hierarchy
2. Build A Static Version in React - don’t use state
3. Identify The Minimal (but complete) Representation Of UI State - the minimal state to be kept
4. Identify Where Your State Should Live
5. Add Inverse Data Flow - passing callbacks

Question 30

React uses one-way data binding, while Angular uses two-way data binding.That means in React the data flows automatically from the model to the UI only (using state mutation).How should the other way data flow (UI changing the model) be implemented in React?

Answer 30

The component that owns the state should pass ‘callback functions’ down to the components that will receive UI interaction.

Question 31

What are the steps that react do with virtual DOM at every state update?

Answer 31

• generates a new virtual DOM with the changes- diffs it with the old one- computes the minimal set of DOM mutations and put them in a queue- batch updates all changes

Question 32

What is the benefit of using Functional Components over Class Components

Answer 32

These components tend to be easier to write and React will optimize them more in the future.

Question 33

How to pass a CSS class to a JSX component?

Answer 33

using the “className” attribute

Question 34

What is the correct way to set an int variable called “age” in this.state in the constructor

Answer 34

this.state = {age: 123}

not to be confused with this.state.age = 123

Question 35

How could you use JS destructuring to avoid having to type this.props. everytime?

Answer 35

const {propA, propB } = this.props;

Question 36

How could you use JS spread operator to pass all objects’s properties as props to a component?

Question 37

Which JS library can you use to facilitate routing inside your app?`

Answer 37

react-router

Question 38

Which React API facilitates passing down data to components implicitly, without using props?

Answer 38

The Context API

Question 39

Write a router that renders a component when the URL is at “/”

Question 40

Given a react-router Route with URL parameters:

How does MyApp components access the “filter” URL parameters?

Answer 40

The MyApp component will receive a parameter called “params”.

const MyApp( {params} ) => …

Question 41

Which react-router function can I use to create components that will have the router params injects?

Answer 41

withParam( myComponent )

Question 42

What is “PropTypes”?

Answer 42

It is a mechanism to describe accepted prop attributes of components, in order to make the code more type safe and also to document.

Question 43

How would you define the propTypes of a component Header, which accepts a string as “title” prop. The title must be required.

Answer 43

Header.propTypes = {
title: PropTypes.string.isRequired
}

Question 44

What are pure components (a.k.a. functional components)?

Answer 44

They are simple functions that don’t extend the React.Component class.

Ex:
const Component = (props) => {
  return (<h1>props.title</h1>);
}

Question 45

What is Flux?

Answer 45

Flux is a pattern for managing how data flows through a React application.

Question 46

Explain Flux

Answer 46

The major idea behind Flux is that there is a single-source of truth (the stores) and they can only be updated by triggering actions. The actions are responsible for calling the dispatcher, which the stores can subscribe for changes and update their own data accordingly.

Question 47

What is the difference between export and export default?

Answer 47

there can be only one “export default” per file. When you import it you do:
import AnyName from “myfile.js”

With normal export, you have to import with the same name. There can be many normal exports:
import { Name } from “myfile.js”