Fundamental Concepts of React Module #75 Flashcards
What’s the main reason React gained popularity so quickly
It made was much more easy to port apps to it than the likes of Ember.js or Angular.js
This was due also to it being a less complex framework than the others.
What are the 4 main concepts one must understand when learning React
- Components
- JSX
- State
- Props
How do we get a React project up and running quickly?
Run: npx create-react-app
How do we compile a React App?
npm start
What command do we use to test our app with Jest?
npm test
What does npm eject do?
When you “eject” a react app it means you’re disconnecting the app from any future updates to the framework.
You gain more flexibility from Babel and Webpack configurations, but since ejecting is irreversible, do so as sparingly as possible.
Pop Quiz: What’s the difference between a standard CodePen and a CodePen Project?
Pens are designed for a project with a single JS file and projects accept multiple files for example, a React App.
There is a caveat when using CodePen with regard to ES Modules, what is it?
Instead of using the “import” syntax as is common with ES6, instead you would write it like so:
const { useState } = React
VS the typical convention
import { useState } = React
What’s all this talk about React using a “declaritive” approach to building user interfaces?
It means that you can build UI’s without touching the DOM (think document.querySelector or jQuery) and you can have an event system without having to interact with DOM events.
what does prop.children do?
It is used to inject components into other components.
For example: adding links to a sidebar dynamically
const Sidebar = (props) => {
return {props.children}
}
and you embed more components into it in a transparent way:
What is a higher order component?
When a component receives a component as a ‘prop” and returns a component, it’s called a higher order component.
How does React use the setState method to update the DOM?
When setState( ) is called on a component and the state has changed, React marks it as dirty. React only updates when a Component changes states explicitly.
- This runs the ‘diffing’ algorithm to reconcile changes
- Then the real DOM is updated
Why is the virtual DOM helpful? What is batching?
The virtual DOM is what React uses as a model to update the real DOM, except it does so in “batches” instead of one at a time.
Unidirectional Data Flow, what is the definition? How does React take advantage of this concept?
The idea here is that data has only one way to be transferred to other parts of the app.
React uses this concept to:
- pass the state to the view and child components
- actions are triggered by the view
- actions can update the state
- the state change is passed to the view and child components
What 3 objects interact with each other to update the DOM?
> View > Actions > State >
The view is the result of the application state which gets updated when actions take place.
