React Flashcards
What is composition?
Composition is the combining of smaller functions to make larger more complex functions.
What are the benefits of composition?
- Code Reuse
2. Utilize the “JOT” function rule
Describe the difference between Declarative Code and Imperative Code
Declarative code is where you instruct JavaScript on what you want to be done.
Imperative code is where you provide the steps to come up with a solution.
When you get in a car, you declare that the temperature should be 71 degrees.
However, some cars require you to turn nobs and fiddle with the state to achieve 71 degrees as you are driving, that is Imperative behavior.
Why is React so great?
Its compositional model
Its declarative nature
The way data flows from parent to child; unidirectional flow through the Virtual DOM tree.
Because React conceptually re-renders everything whenever anything changes, the code is safe by default and it also means less work has to be done by the programmer because they don’t have to deal with updating the state of the UI themselves.
What are two ways to render UI with React
You can render UI utilizing plain JSX like so:
let someData = 'Hello, World'
const element = <ol>
<li>{someData}</li>
</ol>
let element = React.createElement(
return (
<div>
<h1>Hello, World</h1>
</div>
);
);
function helloWorld(props) {
return (
);
}
helloWorld.PropTypes {
// pass in some requirements and
// structure of component
}
ReactDOM.render(element, document.getElementById(‘root’))
What is a prop
A prop is what allows you to pass data into a component.
How is React Unidirectional?
React is unidirectional because data flows from parent to child.
At what layer would you change state?
State should be changed in the layer that is storing the data, which is the upper most layer; parent.
Before React there was a major source of bugs for front-end developers, what was it?
How did React solve this issue?
A major source of bugs for front-end developers was around synchronizing the data model with the DOM; it is very difficult to make sure that whenever data changes, that the UI is consistent with those changes.
React solves this through a pure JavaScript representation of the DOM, implementing diffing clientside and then using events that send simple commands: create, update, delete.
What are the benefits of re-rendering everything whenever anything changes in your data model?
A layer of safety is introduced and time is saved for the developer because they only need to write the creation path; updates are taken care of for them.
Describe how data flows with two-day data binding; the opposite of unidirectional data flow.
What is the flaw?
In two-way data binding, the data is kept in sync throughout the app no matter where it is updated.
Any part of an application that has that binding can change the state of the data, so you have to keep in mind where the data is being updated and how that change affects other areas.
What is the virtual DOM?
The virtual DOM is an internal representation of the DOM that contains elements returned from react components. The nice thing about the virtual DOM is that it avoids creating DOM nodes and accessing existing ones beyond necessity.
What is the diffing algorithm?
Diffing determines how to make efficient changes to the DOM.
With diffing, old DOM nodes are taken out and replaced only when necessary.
This way, our app doesn’t perform any unnecessary operations to figure out when to render content.
Why split JSX over multiple lines?
For readability and also to avoid automatic semicolon insertion.
How does React prevent injection attacks?
React escapes any values in JSX before rendering them; everything is converted to a string preventing XSS cross-site scripting attacks.
