Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

React > Basics > Flashcards

Basics Flashcards

1
Q

What is “state”?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is React’s approach to reactive UI rendering?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

Reduce the complexity of creating/maintaining UIs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are components?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How did the web “used” to work?

A

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).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does SPA stand for?

A

Single Page Application

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are SPAs constantly doing?

A
  • Fetching new data
  • transforming parts of the DOM as the user interacts through the UI
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does DOM stand for?

A

Document Object Model

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What happens when interfaces grow more complex?

A

It gets more difficult to:

  • examine the current state of the application
  • make the necessary punctual changes on the DOM to update it
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

Data binding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

It’s faster to manipulate than the real DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

User interaction and data fetching

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How does React use the virtual DOM?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A
  • It makes React very fast and efficient.
  • React apps can easily run at 60 fps, even on mobile devices
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What does ‘fps’ stand for?

A

Frames per second

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the advantage of being able to combine components?

A

We can create more complex and feature-rich components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

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

A

Templating languages and HTML directives

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Why can templating languages be limiting?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

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

A

Build abstractions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Why do React components lead to a separation of concerns?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What did separation of concerns ‘used to mean’?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Why have display logic and markup inevitably become tied together?

A

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

26
Q

What did the ‘old’ separation of concerns become?

A

A separation of technologies, not a separation of concerns

27
Q

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

A

Perceived performance and SEO

28
Q

What does the use of JSX require?

A

A transpilation step where JSX gets transformed into JS

29
Q

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

A
  • 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
30
Q

The basic project structure for a react project contains what?

A
  • 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
31
Q

Describe the index.html file in React applications

A
  • 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
32
Q

What is the package.json file?

A

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

33
Q

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

A
  • Let’s you specify dependencies (that can get automatically downloaded and installed)
  • Let’s you define script tasks
34
Q

What does a module bundler do?

A

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

35
Q

What alternatives to webpack are there in principle?

A

Grunt, Gulp and Brunch among others

36
Q

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

A

Webpack

37
Q

What is webpack?

A

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

38
Q

What should the source folder contain?

A

JavaScript modules

39
Q

What should the source folder not contain?

A

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

40
Q

How can you create a package.json file?

A

npm init

41
Q

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

A

npm init -y

42
Q

What are typical dependencies for our react projects?

A

react, react-dom and react-router

43
Q

What are typical DEV dependencies for our react projects?

A

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

44
Q

What does our webpack.config.js file do?

A

require webpack and export a configuration object

45
Q

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

A

entry and output

46
Q

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

A

the main application module

47
Q

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

A

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

48
Q

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

A
49
Q

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

A

npm start

50
Q

What should the npm start script look like?

A

"scripts":

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

}

51
Q

Create a hello world component using ES6

A
52
Q

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

A
53
Q

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

A

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

54
Q

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

A

… a JS expression and rendered in the markup

55
Q

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

A

… configure them

56
Q

How does React allow us to configure components?

A

Using props

57
Q

What are props?

A

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

58
Q

What is special about props?

A

The can’t be changed from inside the child component; props are passed and “owned” by the parent

59
Q

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

A

props.children

60
Q

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

A
  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
61
Q

What are the two main approaches to building components?

A

Top-down and bottom-up

React (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions