Reusability / Patterns Flashcards
Do this with react children…
[div]
[Navbar name=”yo” /]
[div]
[div]
[Navbar]
[p] This is where name goes [/p]
[/Navbar]
[/div]
What is the main case for using react children?
When you need to put much different information within the same component. If it’s too much for props to pass, you might want to insert data using it as props.children.
How do you access children?
Wrap the compenent tag with data…
[Component]
[p] This is the data [/p]
[/Component]
and access it within the Component like this…
{props.children}
What are examples of higher-order functions?
.map()
.filter()
.reduce()
What is the definition of a Higher Order Component? (HOC)
A function that takes a component as its first argument and returns a new component that wraps the given component, providing extra capabilities to it.
How to change a class based Component into a Functional Component?
class Menu extends Component {
render() {
return (
into
function Menu(props) {
return (
What is an example of using a HOC?
Higher Order Component
When you have two components that are using state for the same purpose, perhaps for true/false toggle.
What is a good example of a File Structure for HOC?
(higher order component?)
App.js
HOCs -> theNameOfHOC.js
(lowercase, camel)
What is the syntax of a basic HOC?
(Higher Order Component)
import {exampleHOC} from “./HOCs/exampleHOC”
[this component goes here]
export default exampleHOC(ComponentName)
– Calling the Function with Component as variable
import React from “react”
export function exampleHOC(component) {
return function(props) {
return (
<toggler></toggler>
)}}
— Toggler — is a classed based component used only in this…
Why are we learning HOCs?
What are the newer versions of HOCs?
Higher Order Components are more for legacy code. If you are writing newer code, you’re good.
Render Props - Still Legacy
Hooks - Newest and Shiniest
