General React.js

Question 1

React.js is a framework, library or langauage?

Answer 1

Library

Question 2

What does a React function look like?

Answer 2

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Question 3

What does a React component look like?

Answer 3

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Question 4

What notation are React events written?

Answer 4

camelCase

Question 5

Where do you bind events?

Answer 5

In the constructor

Question 6

How are named modules imported? Default modules?

Answer 6

import defaultExport, { namedExport1, namedExport3, etc… } from ‘module’;

Question 7

Difference b/w class component and function?

Answer 7

A class component requires you to extend from React.Component and create a render function which returns a React element. Class is required for states.

Question 8

Why use class components?

Answer 8

When states are needed

Question 9

How to pass states to a function?

Answer 9

If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.

Question 10

What is preventDefault() event method?

Answer 10

• ## the default action that belongs to the event will not occur.

Question 11

What does Redux Middleware do?

Answer 11

Provides the capability to run code after an action is dispatched, but before the reducer. e.g. 3rd party extension point, logging, aysnc API calls

Question 12

What can middleware be used for?

Answer 12

-inspecting the action and state
- modify action
dispatch other actions
- stop actions from reaching reducers

Question 13

What is Thunk?

Answer 13

A kind of middleware that subroutine used to inject an additional calculation in another subroutine; allows you to write action creators that return a function instead of an action; use Thunk to generator an API call to a server; used for complex synchronous logic (multiple/conditional dispatches)

Question 14

What is a reducer?

Answer 14

Reducers specify how the application’s state changes in response to actions sent to the store.

Reducers calculate a new state given the previous state and an action

Pure function that computes the next state.
Predictable.

Question 15

What are Redux Actions?

Answer 15

Payloads of information that send data from your application to your store.
They are the only information for the store. They are sent to the store using store.dispatch().
They are plain JS. They must have a type property that indicates the type of action being performed.

They are ‘what happened’.

Question 16

What is the Redux Store?

Answer 16

The object that brings actions and reducers together.

The store:

• holds application state (tree);
• allows acces to state via getState();
• allows state to be updated via dispatch(action);
• registers listeners
• handles unregistered listeners

type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}

Only one store made using createStore()

Question 17

What is the dataflow in Redux?

Answer 17

1. You call store.dispatch(action)
2. The Redux store calls the reducer function you gave it
3. Root reducer may combine the output of multiple reducers into a single state tree
4. The Redux store saves the complete state tree returned by the root reducer

Question 18

What is an action creator?

Answer 18

A function that creates an action (a payload of information).

Question 19

What is REST?

Answer 19

Representational State Transfer using:

• uses JSON or XML
• uses web standards (built on HTTP)
• stateless (server does store states, client does via cookies)
• uses GET, POST, PUT, DELETE (HTTP)

Question 20

What is a promise?

Answer 20

A mechanism that supports async computation; it represents a value that may be available now or in the future;

Question 21

How is a promise written?

Answer 21

new Promise (function (resolve, reject) {…});

Question 22

What is fetch?

Answer 22

API, promise-based, provides an interface for fetching resources;

Question 23

How is fetch used?

Answer 23

fetch(baseUrl + ‘item’)
.then(response => response.json())
.then(data=> console.log(data))
.catch(error => console.log(error.message))

Question 24

What is the format of an arrow function?

Answer 24

const myFunction = () => {
  //...
}

const myFunction = (param1, param2) => doSomething(param1, param2)

Question 25

What is the format of an arrow function?

Answer 25

const myFunction = () => {
  //...
}

const myFunction = (param1, param2) => doSomething(param1, param2)

Question 26

Does ‘this’ work in an arrow function?

Answer 26

No. Due to this, arrow functions are not suited as object methods.

Question 27

Two benefits of arrow functions?

Answer 27

A shorter syntax than typical functions

No binding of this

Question 28

What is the syntax of a function expression?

Answer 28

const myVariable = function (param) {
statements
}

Question 29

How to change to an arrow function?

Answer 29

remove ‘function’ and add => after the params

Question 30

What is a service worker

Answer 30

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

Question 31

Can hooks be called conditionally?

Answer 31

No. Must be called in the same order.

Question 32

Can you have a function in useState()?

Answer 32

Yes, use for expensive functions to only run once.

Question 33

Can you pass in a function in setState?

Answer 33

Yes. Via an arrow function.

Question 34

How do you keep all the values in the current state when setting a new state (setState)?

Answer 34

Use …

Question 35

Can you have multiple useState’s in a function?

Answer 35

Yes.

Question 36

What is the onChange code to update a form field with a new state using hooks?

Answer 36

onChange = {e => setEmail(e.target.value)}

Question 37

What is useEffect?

Answer 37

Gets called whenever the component gets re-rendered

Second argument determines when the re-render will happen (when the first function in useEffect is rendered)

Can be used to replace componentDidMount.

Question 38

How can you conditionally render?

Answer 38

Hook (useState) && component call

Question 39

What is the return function in useEffect?

Answer 39

Cleanup function, unmount.

Question 40

Applications of useEffect?

Answer 40

event listners, api’s.