React.js

Question 1

What is React?

Answer 1

a JavaScript library for creating user interfaces

Question 2

What is a React element?

Answer 2

object

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render()

Question 4

What is JSX?

Answer 4

syntax extension to JavaScript (JS plus some more).

-Transpilation step where JSX gets transpiled into JS

Question 5

Why must the React object be imported when authoring JSX in a module?

Answer 5

In order to use the methods on the react object (ex. react.createElement)

Question 6

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 6

Use babel loader and the plugin @babel/plugin-transform-react-jsx

Question 7

What is a React component?

Answer 7

a JS function that accepts props as inputs and returns react elements

Question 8

How do you define a function component in React?

Answer 8

function definition or a class, capitalize the names

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render()

Question 10

What are props in React?

Answer 10

1. Props is the shorthand for Properties in React.
2. Props are read-only components which must be kept pure i.e. immutable.
3. Props are always passed down from the parent to the child components throughout the application.
4. A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

Question 11

How do you pass props to a component?

Answer 11

as a key=”value” pair inside react element

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

{ }

Question 13

What Array method is commonly used to create a list of React elements?

Answer 13

array.prototype.map

Question 14

What is the best value to use as a “key” prop when rendering lists?

Answer 14

ID number or name from data that distinguishes it from another piece of sibling data

Question 15

How do you create “class” component in React?

Answer 15

class ComponentName extends React.Component {
    render() {
    }
}

Question 16

How do you access props in a class component?

Answer 16

this.props

Question 17

What is the purpose of state in React?

Answer 17

1. States are the source of data and must be kept as simple as possible.
2. States are the objects which determine components rendering and behavior.
3. States are mutable unlike the props and create dynamic and interactive components.
4. States are accessed via this.state().

Question 18

How to you pass an event handler to a React element?

Answer 18

attached as a prop to your react element returned from the render method

Question 19

What are controlled components?

Answer 19

form input whose value is controlled by React

Question 20

What two props must you pass to an input for it to be “controlled”?

Answer 20

value and onChange

Question 21

When does React call a component’s componentDidMount method?

Answer 21

Right when component is mounted in ReactDOM.render

Question 22

Name three React.Component lifecycle methods.

Answer 22

componentDidMount
componentWillUnmount
componentDidUpdate

Question 23

How do you pass data to a child component?

Answer 23

by passing the data through the props when rendering/returning the children react element

Question 24

Basic Project Structure for a React Project

Answer 24

1) A src folder containing all JS modules
2) Index.html
3) Package.json
4) Module packager or build tool

Question 25

What should the source folder not contain?

Answer 25

Static assets that don't go through the module bundler (webpack) e.g. index.html, images and CSS files*
-Instead leave that in a server folder

Question 26

Besides using named props, it’s also possible to reference the content between the opening and closing tag using what?

Answer 26

props.children

Question 27

What 3 principles are useful for breaking the interface into nested components?

Answer 27

1. They should be small and have a single concern i.e. do one thing.
2. Wireframes and understand component hierarchy
3. Look at the data model - break your UI into components that represent exactly on piece of your data model

Question 28

What are two typical things that might change the state of an application?

Answer 28

User interaction and data fetching

Question 29

For performance reasons it’s not viable to trash and re-render the entire interface every time state changes. What’s React’s solution to this?

Answer 29

The ‘virtual DOM’ - an in-memory, lightweight representation of the DOM

Faster to manipulate than the real DOM

Question 30

What are the 2 alternatives to using if statements in JSX?

Answer 30

Use a ternary operator or take the if statement out of the JSX

Question 31

What are the different phases of React component’s lifecycle?

Answer 31

1. Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.
2. Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.
3. Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

Question 32

What do you know about controlled and uncontrolled components?

Answer 32

Controlled Components

1. They do not maintain their own state
2. Data is controlled by the parent component
3. They take in the current values through props and then notify the changes via callbacks

Uncontrolled Components

1. They maintain their own state
2. Data is controlled by the DOM
3. Refs are used to get their current values