Basics

Question 1

What is “state”?

Answer 1

All the internal data that defines an application at a given point in time

Question 2

What is React’s approach to reactive UI rendering?

Answer 2

You declare how state is represented as visual elements of the DOM. From then on, React automatically updates the DOM to reflect state changes.

Question 3

What is React’s ‘raison d’etre’?

Answer 3

Reduce the complexity of creating/maintaining UIs

Question 4

What are components?

Answer 4

Self-contained, concern-specific building blocks that are easy to reuse, extend and maintain.

Question 5

Give 3 reasons why JSX is great for describing user interfaces?

Answer 5

1) it’s declarative
2) it’s easy to spot the relationship between elements
3) it’s easy to visualize the overall structure of your UI.

Question 6

How did the web “used” to work?

Answer 6

For every interaction the user performed on a page, a whole new page was sent from the server (even if this new page was only a slightly different version of the page the user was on).

Question 7

What does SPA stand for?

Answer 7

Single Page Application

Question 8

What are SPAs constantly doing?

Answer 8

• Fetching new data
• transforming parts of the DOM as the user interacts through the UI

Question 9

What does DOM stand for?

Answer 9

Document Object Model

Question 10

What happens when interfaces grow more complex?

Answer 10

It gets more difficult to:

• examine the current state of the application
• make the necessary punctual changes on the DOM to update it

Question 11

What technique do other JS frameworks use to keep the interface in sync with state?

Answer 11

Data binding

Question 12

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 12

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

Question 13

What is the advantage of the virtual DOM over the real DOM?

Answer 13

It’s faster to manipulate than the real DOM

Question 14

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

Answer 14

User interaction and data fetching

Question 15

How does React use the virtual DOM?

Answer 15

• It quickly compares the current state of the UI with the desired state.
• It then computes the minimal set of real DOM mutations to achieve the change.

Question 16

What is the ‘end benefit’ of React’s virtual DOM?

Answer 16

• It makes React very fast and efficient.
• React apps can easily run at 60 fps, even on mobile devices

Question 17

What does ‘fps’ stand for?

Answer 17

Frames per second

Question 18

What approach does developing applications using components allow us to take?

Answer 18

A “divide and conquer” approach, where no particular part needs to be especially complex

Question 19

What is the advantage of being able to combine components?

Answer 19

We can create more complex and feature-rich components

Question 20

React components are written in plain JS. What has traditionally been used for web application UIs though?

Answer 20

Templating languages and HTML directives

Question 21

Why can templating languages be limiting?

Answer 21

They dictate the full set of abstractions that you are allowed to use to build your UI

Question 22

What does React’s use of a full-featured programming language to render views make it easier to do?

Answer 22

Build abstractions

Question 23

Why do React components lead to a separation of concerns?

Answer 23

They are self-contained, combining unifying markup with its corresponding view logic

Question 24

What did separation of concerns ‘used to mean’?

Answer 24

HTML for content structure, CSS for styling and JS for behaviour

Question 25

Why have display logic and markup inevitably become tied together?

Answer 25

Interfaces are magnitudes more interactive and complex than they used to be

Question 26

What did the 'old' separation of concerns become?

Answer 26

A separation of technologies, not a separation of concerns

Question 27

What are the two main reasons for React giving us the ability to render components on the server?

Answer 27

Perceived performance and SEO

Question 28

What does the use of JSX require?

Answer 28

A transpilation step where JSX gets transformed into JS

Question 29

What 5 things are the bare minimum we want from our React development workflow?

Answer 29

* Being able to write JSX and transform it into regular JS on the fly * Write code in a module pattern * Manage dependencies * Bundle JS files * Use source maps for debugging

Question 30

The basic project structure for a react project contains what?

Answer 30

* A source folder to contain all your JS modules (common names are source or app) * An index.html file * A package.json file * A module packager or build tool

Question 31

Describe the index.html file in React applications

Answer 31

* Tends to be almost empty * Is responsible only for a) loading the app's JS and b) providing an element (typically a div) that is used by React to render the app's components into

Question 32

What is the package.json file?

Answer 32

A standard npm manifest file that holds various information about the project

Question 33

What are the 2 most important features of the package.json file?

Answer 33

* Let's you specify dependencies (that can get automatically downloaded and installed) * Let's you define script tasks

Question 34

What does a module bundler do?

Answer 34

Modules help us organise JS code by splitting it into multiple files. The module bundler then automatically packs everything together in the correct load order

Question 35

What alternatives to webpack are there in principle?

Answer 35

Grunt, Gulp and Brunch among others

Question 36

What has the React community in general adopted as its preferred build tool?

Answer 36

Webpack

Question 37

What is webpack?

Answer 37

A module bundler that can also put source code through loaders that can transform and compile it

Question 38

What should the source folder contain?

Answer 38

JavaScript modules

Question 39

What should the source folder not contain?

Answer 39

Static assets that don't go through the module bundler (webpack) e.g. index.html, images and CSS files\*

Question 40

How can you create a package.json file?

Answer 40

npm init

Question 41

How can you avoid all the questions asked when running npm init?

Answer 41

npm init -y

Question 42

What are typical dependencies for our react projects?

Answer 42

react, react-dom and react-router

Question 43

What are typical DEV dependencies for our react projects?

Answer 43

babel-core, babel-loader, babel-preset-es2015, babel-preset-react

Question 44

What does our webpack.config.js file do?

Answer 44

require webpack and export a configuration object

Question 45

What are the bare minimum keys on the webpack configuration object?

Answer 45

entry and output

Question 46

What does the entry key point to on the webpack configuration object?

Answer 46

the main application module

Question 47

What does the output key do on the webpack configuration object?

Answer 47

tells webpack where to save the single JS file containing all the modules packed in the correct order

Question 48

What does a bare bones webpack.config.js file look like?

Answer 48

Question 49

What script should we add by convention to our package.json file?

Answer 49

npm start

Question 50

What should the npm start script look like?

Answer 50

`"scripts": ` `{ "start": "node_modules/.bin/webpack-dev-server --progress" ` `}`

Question 51

Create a hello world component using ES6

Answer 51

Question 52

Create a hello world component using ES6 and destructuring assignment in the module import (saves a bit of typing)

Answer 52

Question 53

While it's possible to render directly into the document body, why should we not do so?

Answer 53

Many libraries and browser extensions attach nodes to the document body. Because React needs to fully manage the DOM tree under its control, this can cause unpredictable results

Question 54

In JSX, values written between curly braces are evaluated as...

Answer 54

... a JS expression and rendered in the markup

Question 55

A key factor to make components reusable and composable is the ability to...

Answer 55

... configure them

Question 56

How does React allow us to configure components?

Answer 56

Using props

Question 57

What are props?

Answer 57

The mechanism used in React for passing data from parent to child components

Question 58

What is special about props?

Answer 58

The can't be changed from inside the child component; props are passed and "owned" by the parent

Question 59

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

Answer 59

props.children

Question 60

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

Answer 60

1. They should be small and have a single concern i.e. do one thing (if it ends up growing it should be broken into smaller sub-components) 2. Analyse wireframes and layouts that give clues to component hierarchy 3. Look at the data model - break your UI into components that represent exactly on piece of your data model

Question 61

What are the two main approaches to building components?

Answer 61

Top-down and bottom-up