2 Flashcards
(86 cards)
1
Q
4.
A
R
2
Q
5.
A
T
3
Q
When was React released?
A
2013.
4
Q
What did we have before React?
A
The front end landscape was very different. In the 90s and early 2000s we only had HTML, CSS and JavaScript.
5
Q
What was the problem with different browsers?
A
They implemented their browsers differently, so developers had to accommodate JavaScript to work with these different browsers.
6
Q
What helped developers implement JavaScript on different browsers?
A
jQuery.
7
Q
What did jQuery allow for developers?
A
To easily interact with the DOM across multiple browsers.
8
Q
Why is jQuery not needed as much now days.
A
There are more similarities between browsers.
9
Q
What happened to websites when jQuery was released?
A
They became more complex.
10
Q
What happened when websites become full applications that people can interact with?
A
Libraries like backbone.js came we made.
11
Q
Why was backbone.js created?
A
As JavaScript files keeps getting bigger, it allowed us to organise our JavaScript files.
12
Q
What happened when it became easier to work with the DOM?
A
We had the birth of the single page application (SPA).
13
Q
What changed when SPA’s become more popular?
A
We focused less on HTML and a lot more on JavaScript. You also only load the application code once.
14
Q
What changed when SPA’s become more popular in regards to the server?
A
You were able to sign into an application and interact with that application without communicating to the server.
15
Q
When was AngularJS released?
A
2010.
16
Q
What became the first standard way of building SPA’s?
A
AngularJS.
17
Q
Who created AngularJS?
A
Google.
18
Q
What was the difference between AngularJS and jQuery?
A
AngularJS allowed developers to build large applications by forming containers that wrapped your project.
19
Q
What does MVC stand for?
A
Model View Controller.
20
Q
What happened when websites started getting even more complex?
A
It got harder to find bugs in the code and it was harder to understand how each part of the app was affecting the other.
21
Q
When was AngularJS completely rewritten to Angular?
A
2014.
22
Q
6.
A
D
23
Q
What four core things made React so successful?
A
Don’t touch the DOM. I’ll do it.
Build website like Lego blocks.
Unidirectional data flow.
UI, the rest is up to you.
24
Q
What does ‘Don’t touch the DOM. I’ll do it’ mean in React?
A
Many existing frameworks and libraries before React were directly manipulating the DOM
25
What does DOM stand for?
Document Object Model.
26
What is the DOM?
It's what the browser uses to display a website or a web app. It's the tree representation of the page.
27
What does JavaScript do in regards to the DOM?
Manipulating it.
28
How could you show an example of JavaScript manipulating the DOM?
Inspect an element that has interactivity, interact with it and you should see a flash in the elements panel. This flash is JavaScript updating.
29
Show examples of what methods were used to manipulate the DOM of websites before React.
document. getElementById(id)
| element. innerHTML
30
What did DOM api's allow us to do.
Traverse to DOM, access any node we wanted to, remove them, add new nodes etc.
31
What is an imperative paradigm?
Where you directly change individual parts of your app in response to various user events.
32
What's the problem with the imperative paradigm?
Even though it sounds intuitive it becomes difficult to see the relationships between events and all the edge cases/
33
What approach does React use?
A declarative approach.
34
Why is it good that React uses a declarative approach? (to DOM manipulation???)
DOM manipulation is one of the biggest performance bottle necks.
35
Why is DOM manipulation such a performance bottle neck?
Because the browser has to do two intensive operations.
36
What are the operations the browser has to do with regards to DOM manipulation.
To repaint/change an element and add it onto a page.
| Reflow which is to recalculate the layout of the page and move things around if need be.
37
How does React handle DOM manipulation?
Declare what the app looks like by passing a JavaScript object of how we want the app to look.
38
What will React do when you pass a JavaScript object that describes how you want the app to look?
React holds the JavaScript object (a blueprint of how things should look) and based on it updates the DOM in an efficient way.
39
Why is Reacts approach to DOM manipulations called a declarative paradigm?
Because we declare, 'this is what the state/data of our app should be like'. Based on this state React makes those changes.
40
Give an example of how React would handle this state in a declarative paradigm.
```
let state = {
user: 'John',
isLoggedIn : True
}
```
If the user is logged in, React already knows what to update and what to do.
41
What does the idea of a declarative style mean in this code?
```
let state = {
user: 'John',
isLoggedIn : True
}
```
We don't have to directly say 'do this and if this happens to that'. Instead, we tell it 'this is the state of our app' and React automatically does it for us.
42
What is the difference between the imperative and declarative paradigm?
All the different states are accounted for in one place, that is one big JavaScript object that describes how our app should work.
43
What is the result of using declarative versus an imperative paradigm?
Less complexity, better code quality and faster developer times.
44
Where does the name React come from?
The name is basically saying 'whatever the state/data of the app is (which describes our app), I'm just going to 'react' to it and change everything for you so you get the display that you want.
45
7.
C
46
What is React designed around?
The concept of reusable components (even across different sites).
NOTE: this means components designed by other developers can be used in your app.
47
What are some examples of 3rd party components that you can use in your own code?
Material UI
or component libraries like
React Bootstrap
Blueprint
48
How could you describe components in React in a simple term?
As JavaScript functions.
49
What is the state of an application?
Any data that describes out app.
50
What are components?
They are created based on the state/data as functions. They're JavaScript functions that receive some sort of input or attribute called props and returns something.
NOTE: They can be built as a function or a class.
51
8.
O
52
How could you think about the idea state?
A JavaScript object that describes our app. All the data of our app is in the state.
53
What does React create?
A virtual DOM.
54
What is the virtual DOM
A JavaScript version of the DOM
55
What is the React library?
A function that we give the state and components to.
56
What does the virtual DOM give React?
A blue print of how it should update the actual DOM.
57
What happens when React has the virtual DOM?
It modifies the DOM based on the virtual DOM.
58
What does the idea of a unidirectional data flow mean?
Any time we want want something to change on the webpage the state/data has to change in our app.
59
What happens when a user clicks a signout button in React?
React intercepts it, asks how are we going to change the state. Internally, isLoggedIn is changed to false.
60
What happens in React when the state changes?
It reacts to that change. It combines the new state and the components we have and update the DOM.
NOTE: The data only flows one way.
61
What is another way to think about data flow in React?
Our applications is built with a virtual DOM (a JavaScript Object that describes our app). As soon as the state changes it will trickle down that information and let everything know the state just changed.
NOTE: Data can never move up.
62
What's an example of data not being able to flow up?
As state can live in different locations, if the state changes it can never move up only down.
63
What is the key takeaway of one way data flow?
By having the restriction of data only flowing down from the state of our application to the DOM. If the state changes we go back to the state and that state change trickles down to different components in one direction is a restriction on how data can move.
64
Why is it good that there's a restriction of data flow in React?
It's really easy to debug code and easier to understand how the app works.
65
Give an example of how one way data flow is easy to debug.
If there's a problem with the signout function, you can go to wherever the state isLoggedIn lives and know that is where the bug is happening. You only have to look at where the data exists and where the data flows through.
66
9.
U
67
What does 'UI, the rest is up to you' mean in React?
AngularJS came with a things built in and was a framework. React only cares about the idea of components and the virtual DOM, and only works with the view/user interface.
68
What is a framework?
You can think of it as a whole kitchen. It gives developers all the tools necessary to build an application. React is more like a stove.
NOTE: It's very opinionated.
69
What happens if you're using React and need something else other than a UI library?
Use other modules/libraries.
70
Because React is so small you can 'learn once and use anywhere'. What does this mean?
React doesn't make assumptions about what technologies you use. Because it's so small we're able to move React to other places other than the web.
71
Why is React so small?
All it gives you is the idea of components of a blueprint that we can use a massive JavaScript object to make changes and a robot that interacts with the DOM and makes changes for you.
72
What does it mean when we say we can move React to places other than the web?
We can have different robots that interact with different views and all they need is the main React library or blueprint of how to look at a JavaScript object and say change this UI.
73
What other places can React be used?
React Native.
React 360.
Electron and React Desktop.
React Blessed.
74
How can React work in React Native?
This robot can look at the blueprint and say change the view in an iOS, Android app.
75
What is different about React and React Native?
It doesn't know anything about the DOM. It only need to know about Views in a mobile app.
76
What is React 360?
A VR app.
77
What does Electron and React Desktop allow us to build?
Desktop applications. They interact with Windows, MacOS and Linux operating systems.
78
What is React Blessed?
It works with the terminal and the command prompt.
79
What is ReactDOM?
A library that only knows how to interact with the DOM of the web browser.
80
What two library will be use in a web app?
React and ReactDOM.
81
10.
H
82
Give a summary of how React works.
React uses an imperative paradigm. Instead of telling our apps exactly what to do we give it some state, some components that are built with JSX which sometimes receive properties/props (all this information is a giant JavaScript object) creates a VirtualDOM. The VirtualDOM is used by the React library to update the DOM for us.
83
How can you became a great React developer?
Decide on components.
Decide the state and where it lives.
What changes when state changes.
84
What does it mean when we 'decide on components'?
You need to know what is a component, how much you want to break down a component, how do we build reusable components. Deciding on how to break down the app into different components is a very important skill.
85
What does it mean when we 'decide the state and where it lives'?
The state can live in different locations in the VirtualDOM. Where it's put is very important in architecting the app.
86
What does it mean when we 'what changes when state changes'?
Based on what the JavaScript object called state is changed we have to decide what to re-render, what part of the VirtualDOM changes. This is important because it has huge effects on performance.
