Please enable JavaScript.
Coggle requires JavaScript to display documents.
React (JSX (Props Ex: JSX expression <Hello now={new Date()…
React
JSX
Props
Ex: JSX expression
<Hello now={new Date().toISOString()}/>
Hello: is React component name
now: is JSX attribute that will populate the now prop on the React componet
{..} is JSX attribute expresstion
Spread Attributes
const props = {a: 4, b:2}
const element = <Sum ...props/>;
Child Expressions and Elements
JSX element can be nested
props.children
Design componet can be wrapped another component
What? support xml-like syntax in JS
Ex: <Sum a={4} b={3}/> React Element
NOT using JSX => Javascript function calls (no need JSX transformer)
Component
Definition
Render
Testing using 'Jest'
Testing using Enzyme
Props
Prop validation
'Prop types'
Ex: Sum.propTypes={
a: PropTypes.number.isRequired
b:PropTypes.number.isRequired
}
State
Set State