Mostly condensing starter docs and adding other learnings. Feel free to add to or correct any misunderstandings. Shorter is better.
e.g extending from React.Component
- componentWillUnmount - Fired when a component's DOM is removed
- componentDidMount - Fired when added to the primary DOM for the first time
- State is a special property for storage on a class (this.state)
- States can be updated asynchronously
- State shouldn't be modified directly, use setState.
- State updates are merged for performance reasons
- Data flows down. We want data to be locally scoped / encapsulated. From the docs: Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
- To this end, React aims to be agnostic on whether a component is stateful or stateless and either is supposed to be interchangeable, and compositing components can use either.
- React mandates camelCase, e.g.
<button onclick="go()> --> <button onClick={go}> - Opting for JSX - pass function as event handler. Not string.
return falseis not allowed. CallpreventDefault()- React defines synthetic events as per W3C spec.
- Generally don't need explict call to addEventListener after DOM insertion. Add to element initial render
- Be careful with contextual definition of
thisin JSX callbacks (class methods not bound by default in JS for event handlers!)this.handlerName.bind(this)
- State or props can be used with any operators with rendering. e.g
isHuman ? return <Person />: return <Alien />; - Variables can store elements for conditional assignment/reassignment .
let button = <FatButton /> ... button = <PhatButton /> - Conditional expressions in JSX are possible, using curly brace notation
<div>{ cheese? 'the cheese':'no cheese' }</div> - To prevent components from rendering entirely, return null somewhere in the render chain instead of it's output. Keep in mind this won't prevent lifecycle methods from running.
- Lists are transformed in JS using functions like Array.map()
- Shadow DOM?
React is primarily (soft) geared arount the moot-worthy 'class' syntactic sugar. Primarily to allow lifecycle methods that form the React interface. I don't really like it, I like compositon, but eh.