Please enable JavaScript.
Coggle requires JavaScript to display documents.
1280px-React-icon.svg - Coggle Diagram
Props
passing down of dynamic variables to child components
<PropComponent testProp={testProp} />
props with JS destructuring methods strategy
Can only send props down and NOT up in components
another concept for passing down props - prop drilling
Events
Dynamic events happening on the page (onClick)
calling events dynamically in curly braces and anonymous functions () => () = invoking the functions
best practice - ending events with handler (clickHandler)
using arguments and interpoloation wtth backticks passing in values
inside a event you have alos have access to the event parameter (e)
React and the concept of "State"
most important concept in React
State is data in your application.
once you state changes, your UI will update and must be in sync with the state
Hooks (Functions) in React
UseState
useEffect
mount components, unmount components, renders and re-renders
binding data with inputs and the state (e.target.value)
You can also pass down state via props (never Upwards!)