Code / JavaScript

Question 1

What is the difference between var, let and const?

Answer 1

SCOPE:
var is scoped to a function, while const and let are scoped to a block.

DECLARATION:
const can only be declared once!

Question 2

What is the command to create a React Native app?

Answer 2

$ npx react-native init AppName –verbose –template react-native-template-typescript

Question 3

What is the command to run a React Native app on Android Device?

Answer 3

$ cd APP_NAME

$ npx react-native run-android –deviceId=DEVICE_ID –verbose

Question 4

What is the React Component Lifecycle?

Answer 4

Mounting Cycle:

1. constructor(object props)
2. componentWillMount()
3. render() -> React Element
4. componentDidMount()

Updating Cycle:

1. componentWillReceiveProps(object nextProps)
2. shouldComponentUpdate(object nextProps, object nextState) -> boolean
3. componentWillUpdate(object nextProps, object nextState)
4. render() -> React Element
5. componentDidUpdate(object prevProps, object prevState)

Question 5

What is the role of constructor() ?

Answer 5

1. The component class is instantiated.
2. The parameters to the constructor are the element’s initial props, as specified by the parent element.
3. Optionally, we can specify an initial state for the element by assigning an object to this.state.
4. At this point, no native UI has been rendered yet for this element.

Question 6

What is the role of componentWillMount() ?

Answer 6

1. Invoked only once, before rendering occurs for the first time.
2. At this point, there is still no native UI rendered for this element.

Question 7

What is the role of render() (Mounting Cycle)?

Answer 7

The render method must return a React Element to render (or null, to render nothing).

Question 8

What is the role of componentDidMount() ?

Answer 8

1. Invoked only once, after rendering occurs for the first time.
2. At this point, the native UI for this element has finished rendering, and may be accessed through this.refs for direct manipulation.
3. If you need to make async API calls or execute delayed code with setTimeout, that should generally be done in this method.

Question 9

What is the role of componentWillReceiveProps() ?

Answer 9

The parent of this Component has passed a new set of props. This component will re-render.

You may optionally call this.setState() to update this component’s internal state before the render method is called.

Question 10

What is the role of shouldComponentUpdate() ?

Answer 10

1. Based on the next values of props and state, a component may decide to re-render or not to re-render.
2. The base class’s implementation of this method always returns true (the component should re-render).
3. For optimization, override this method and check if either props or state have been modified, e.g. run an equality test of each key/value in these objects.
4. Returning false will prevent the render method from being called.

Question 11

What is the role of componentWillUpdate() ?

Answer 11

1. Invoked, after the decision has been made to re-render.

2. You may not call this.setState() here, since an update is already in progress.

Question 12

What is the role of render() (Updating Cycle) ?

Answer 12

1. This method is called, assuming shouldComponentUpdate returned true.
2. The render method must return a React Element to render (or null, to render nothing).

Question 13

What is the role of componentDidUpdate() ?

Answer 13

1. This method is invoked after re-rendering occurs.
2. At this point, the native UI for this component has been updated to reflect the React Element returned from the render() method.

Question 14

What is a View component in React Native?

Answer 14

1. Views are the most basic building blocks of React Native app, much like divs.
2. In terms of implementation, View is an abstraction layer on top of the target platform’s native equivalent, whether that’s UIView, android.view, <div>, or something else.</div>