Intro Topics Flashcards
const App = () => (
data
)
is the same as…
function App() {
return( data )
}
Do you have to bind(this) each method in a Class Based Component?
No
instead of binding the method in State…
this.increment = this.increment.bind(this)
just make the method an arrow function, and this will bind
increment = () => {}
What is the more efficient way of this…
this.setState(prevState => {
return {count: prevState.count + 1}
}
Old Way:
this.setState(prevState => {
return {count: prevState.count + 1}
}
New Way:
this.setState(prevState => ({count: prevState.count + 1})
New Way of This:
constructor() {
super()
this. state = {
key: value
}
}
New Way:
state = {
key: value
}
OLD WAY
H1 – {this.state.thingHere} – H1
What’s the new way?
New Way
render() {
const { thingHere, otherThing } = this.state
return (
h1– {thingHere} and {otherThing }. – h1 )
Old Way
H1 – {this.state.thingHere} – H1
Rename While Deconstructing?
const { thisThing } = this.state
Rename doing this -
const {thisThing: renamedThing } = this.state
Instead of wrapping in div, and clogging up the DOM, you could use what?
–div– –/div–
changed to…
–React.Fragment– –/React.Fragment–
or you could just use empty braces… take the div and just delete the div letters, leave the less than and greater than…
How do you add a default prop inside a functional component?
props.thingsYourBriningIn accessed in function
after function but before export default XXX
XXX.defaultProps = {
thingsYourBringing: “red”
}
How do you add a default prop inside a functional component?
props.thingsYourBriningIn accessed in function
after XXX extends Component {
static defaultProps = {
thingsYourBringing: “red”
}
What is a Static Method?
Aka Helper Method
It’s a method that you can use whether the class was instanciated or not…
Call it on the Class itself, not on the instance…
How do you use Prop Types module?
import PropTypes from “prop-types”
After XXX Function is completed, before default
XXX.propTypes = {
propName: PropTypes.string
}
Most Popular Types to Use with PropTypes Module for React:
import PropTypes from ‘prop-types’;
optionalArray: PropTypes.array
optionalBool: PropTypes.bool
optionalFunc: PropTypes.func
optionalNumber: PropTypes.number
optionalObject: PropTypes.object
optionalString: PropTypes.string
optionalSymbol: PropTypes.symbol
How do you require a prop?
import “PropType” from “prop-types”
XXX.propTypes = {
cardColor: PropTypes.string.isRequired
}
Give me an example how you can specifically go through and validate that the prop must one of the options in a function:
Example of Prop Must Be One of These:
Card.propTypes = {
cardColor: PropTypes.oneOf([“blue”, “red”])
}
What is an enum in JavaScript?
(enumerated type)
In computer programming, an enumerated type is a data type consisting of a set of named values called elements, members, enumeral, or enumerators of the type.
In reality Javascript does not support enumerated types, but what you can do is define a global constant object that looks and behaves like an Enum.
