W7. ReactJS

Question 1

What issues are there with AJAX?

Answer 1

DOM Manipulation Problems

• can be slow due to reflow
• can be complex
• need to know a lot about current state to update it to new one
• developer’s responsibility to keep data and DOM synchronized

Monolithic code

• no enforced separation of concerns between different parts of the page
• state ends up mixed in and not encapsulated properly
• code hard to read, write and maintain

Question 2

What is a Model-View-Controller (MVC)

Answer 2

MVC breaks system up into three parts:
MODEL - responsible for reading and writing data
VIEW - responsible for displaying user interface and notifying system when user interacts
CONTROLLER - responsible for the logic that acts on events from view and updates model and view appropriately

Question 3

What is reactive programming?

Answer 3

Where the output of a computation is updated automatically when the inputs change
- expression sets up a relationship so if variables are changed it will automatically recalculate and update all values (like excel spreadsheet)

Question 4

What is functional programming?

Answer 4

One of the four main programming paradigms.
In this context will focus on:
- Pure Functions: return value same for every element, inputs and outputs completely capture behaviour of function
- Higher-Order Functions: can have functions as arguments or return functions (e.g. map, filter & reduce)

Question 5

What is functional reactive programming?

Answer 5

Create chains of higher order functions where updates are made automatically along chain when input values change (pipelines of data transformations).

Question 6

What are Pure Views in ReactJS?

Answer 6

• view part of MVC (takes in model and returns a bunch of user interface descriptions)
• pure-function for each component
• inputs to each function are relevant part of the model, can transform them using chains of higher order functions
• components composed hierarchically

Question 7

What is ReactJS?

Answer 7

• JS library for building user interfaces
• lets you write interfaces as a set of declarative components
• view part of MVC
• pure function maps model to view

Question 8

What is JSX?

Answer 8

Extension of Javascript with XML-like literals

- makes react more like HTML when rendering DOM elements

Question 9

What is the virtual DOM?

Answer 9

lightweight data structure describing current state of the component as a tree of DOM elements
- means programmer doesn’t need to explicitly describe mutations to the DOM - just need to specify how it should look

(“Render” method call returns a fragment of the virtual DOM)

Question 10

What are the two ways to define new types of component in ReactJS?

Answer 10

• functions: take in an object containing component’s properties and returns a Virtual DOM fragment
• classes: inherit from React.component and have render methods that return the sub-component tree (JSX), props passed into constructor
  (class components can also have their own local state)

Question 11

What are stateful components?

Answer 11

React class components can have their own state as well as properties.

this. props - stores properties
this. state - stores state (can only be assigned in constructor, then modified with setState), state is often a counter

Question 12

What is the component lifecycle in React?

Answer 12

Mounting - on ReactDOM.render or when added to parent
(After mounting: componentDidMount is called)
Updating - when props change or setState is called
(After updating: componentDidUpdate is called)
Unmounting - when removed from parent or DOM
(Before unmounting: componentWillUnmount is called)

Question 13

What are props?

Answer 13

properties: immutable, defined where you call instance of a component
if parent changes, may pass different props to child causing it to re-render