#     References for Using React

**Published by:** [coinvest](https://paragraph.com/@gytibor/)
**Published on:** 2023-09-16
**URL:** https://paragraph.com/@gytibor/references-for-using-react

## Content

A handy, quick reference for me (and everyone) to come back to when working with React. Sourced from: rstacruz / cheatsheets.Componentsimport React from 'react' import ReactDOM from 'react-dom' class Hello extends React.Component { render () { return <div className='message-box'> Hello {this.props.name} </div> } } const el = document.body ReactDOM.render(<Hello name='John' />, el) Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)Import multiple exportsimport React, {Component} from 'react' import ReactDOM from 'react-dom' class Hello extends Component { ... } Properties<Video fullscreen={true} autoplay={false} /> render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· } Use this.props to access properties passed to the component. See: PropertiesStatesconstructor(props) { super(props) this.state = { username: undefined } } this.setState({ username: 'rstacruz' }) render () { this.state.username const { username } = this.state ··· } Use states (this.state) to manage dynamic data. With Babel you can use proposal-class-fields and get rid of constructorclass Hello extends Component { state = { username: undefined }; ... } See: StatesNestingclass Info extends Component { render () { const { avatar, username } = this.props return <div> <UserAvatar src={avatar} /> <UserProfile username={username} /> </div> } } As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.import React, { Component, Fragment } from 'react' class Info extends Component { render () { const { avatar, username } = this.props return ( <Fragment> <UserAvatar src={avatar} /> <UserProfile username={username} /> </Fragment> ) } } Nest components to separate concerns. See: Composing ComponentsChildren<AlertBox> <h1>You have pending notifications</h1> </AlertBox> class AlertBox extends Component { render () { return <div className='alert-box'> {this.props.children} </div> } } Children are passed as the children property.DefaultsSetting default propsHello.defaultProps = { color: 'blue' } See: defaultPropsSetting default stateclass Hello extends Component { constructor (props) { super(props) this.state = { visible: true } } } Set the default state in the constructor(). And without constructor using Babel with proposal-class-fields.class Hello extends Component { state = { visible: true } } } See: Setting the default stateOther componentsFunctional componentsfunction MyComponent ({ name }) { return <div className='message-box'> Hello {name} </div> } Functional components have no state. Also, their props are passed as the first parameter to a function. See: Function and Class ComponentsPure componentsimport React, {PureComponent} from 'react' class MessageBox extends PureComponent { ··· } Performance-optimized version of React.Component. Doesn’t rerender if props/state hasn’t changed. See: Pure componentsComponent APIthis.forceUpdate() this.setState({ ... }) this.setState(state => { ... }) this.state this.props These methods and properties are available for Component instances. See: Component APILifecycleMountingMethodDescriptionconstructor *(props)*Before rendering #componentWillMount()Don’t use this #render()Render #componentDidMount()After rendering (DOM available) #------componentWillUnmount()Before DOM removal #------componentDidCatch()Catch errors (16+) # Set initial the state on constructor(). Add DOM event handlers, timers (etc) on componentDidMount(), then remove them on componentWillUnmount().UpdatingMethodDescriptioncomponentDidUpdate *(prevProps, prevState, snapshot)*Use setState() here, but remember to compare propsshouldComponentUpdate *(newProps, newState)*Skips render() if returns falserender()RendercomponentDidUpdate *(prevProps, prevState)*Operate on the DOM here Called when parents change properties and .setState(). These are not called for initial renders. See: Component specsHooks (New)State Hookimport React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } Hooks are a new addition in React 16.8. See: Hooks at a GlanceDeclaring multiple state variablesfunction ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); // ... } Effect hookimport React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. By default, React runs the effects after every render — including the first render.Building your own hooksDefine FriendStatusimport React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; } Effects may also optionally specify how to “clean up” after them by returning a function.Use FriendStatusfunction FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; } See: Building Your Own HooksHooks API ReferenceAlso see: Hooks FAQBasic HooksHookDescriptionuseState(initialState)useEffect(() => { … })useContext*(MyContext)*value returned from React.createContext Full details: Basic HooksAdditional HooksHookDescriptionuseReducer(reducer, initialArg, init)useCallback(() => { … })useMemo(() => { … })useRef(initialValue)useImperativeHandle(ref, () => { … })useLayoutEffectidentical to useEffect, but it fires synchronously after all DOM mutationsuseDebugValue*(value)*display a label for custom hooks in React DevTools Full details: Additional HooksDOM nodesReferencesclass MyComponent extends Component { render () { return <div> <input ref={el => this.input = el} /> </div> } componentDidMount () { this.input.focus() } } Allows access to DOM nodes. See: Refs and the DOMDOM Eventsclass MyComponent extends Component { render () { <input type="text" value={this.state.value} onChange={event => this.onChange(event)} /> } onChange (event) { this.setState({ value: event.target.value }) } } Pass functions to attributes like onChange. See: EventsOther featuresTransferring props<VideoPlayer src="video.mp4" /> class VideoPlayer extends Component { render () { return <VideoEmbed {...this.props} /> } } Propagates src="..." down to the sub-component. See Transferring propsTop-level APIReact.createClass({ ... }) React.isValidElement(c) ReactDOM.render(<Component />, domnode, [callback]) ReactDOM.unmountComponentAtNode(domnode) ReactDOMServer.renderToString(<Component />) ReactDOMServer.renderToStaticMarkup(<Component />) There are more, but these are most common. See: React top-level APIJSX patternsStyle shorthandconst style = { height: 10 } return <div style={style}></div> return <div style={{ margin: 0, padding: 0 }}></div> See: Inline stylesInner HTMLfunction markdownify() { return "<p>...</p>"; } <div dangerouslySetInnerHTML={{__html: markdownify()}} /> See: Dangerously set innerHTMLListsclass TodoList extends Component { render () { const { items } = this.props return <ul> {items.map(item => <TodoItem item={item} key={item.key} />)} </ul> } } Always supply a key property.Conditionals<Fragment> {showMyComponent ? <MyComponent /> : <OtherComponent />} </Fragment> Short-circuit evaluation<Fragment> {showPopup && <Popup />} ... </Fragment> New featuresReturning multiple elementsYou can return multiple elements as arrays or fragments.Arraysrender () { // Don't forget the keys! return [ <li key="A">First item</li>, <li key="B">Second item</li> ] } Fragmentsrender () { // Fragments don't require keys! return ( <Fragment> <li>First item</li> <li>Second item</li> </Fragment> ) } See: Fragments and stringsReturning stringsrender() { return 'Look ma, no spans!'; } You can return just a string. See: Fragments and stringsErrorsclass MyComponent extends Component { ··· componentDidCatch (error, info) { this.setState({ error }) } } Catch errors via componentDidCatch. (React 16+) See: Error handling in React 16Portalsrender () { return React.createPortal( this.props.children, document.getElementById('menu') ) } This renders this.props.children into any location in the DOM. See: PortalsHydrationconst el = document.getElementById('app') ReactDOM.hydrate(<App />, el) Use ReactDOM.hydrate instead of using ReactDOM.render if you’re rendering over the output of ReactDOMServer. See: HydrateProperty validationPropTypesimport PropTypes from 'prop-types' See: Typechecking with PropTypes | any | Anything |Basic| string | | | number | | | func | Function | | bool | True or false |Enum| oneOf(any) | Enum types | | oneOfType(type array) | Union |Array| array | | | arrayOf(…) | |Object| object | | | objectOf(…) | Object with values of a certain type | | instanceOf(…) | Instance of a class | | shape(…) | |Elements| element | React element | | node | DOM node |Required| (···).isRequired | Required |Basic typesMyComponent.propTypes = { email: PropTypes.string, seats: PropTypes.number, callback: PropTypes.func, isClosed: PropTypes.bool, any: PropTypes.any } Required typesMyCo.propTypes = { name: PropTypes.string.isRequired } ElementsMyCo.propTypes = { // React element element: PropTypes.element, // num, string, element, or an array of those node: PropTypes.node } Enumerables (oneOf)MyCo.propTypes = { direction: PropTypes.oneOf([ 'left', 'right' ]) } Arrays and objectsMyCo.propTypes = { list: PropTypes.array, ages: PropTypes.arrayOf(PropTypes.number), user: PropTypes.object, user: PropTypes.objectOf(PropTypes.number), message: PropTypes.instanceOf(Message) } MyCo.propTypes = { user: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number }) } Use .array[Of], .object[Of], .instanceOf, .shape.Custom validationMyCo.propTypes = { customProp: (props, key, componentName) => { if (!/matchme/.test(props[key])) { return new Error('Validation failed!') } } } Also seeReact website (reactjs.org)React cheatsheet (reactcheatsheet.com)Awesome React (github.com)React v0.14 cheatsheet Legacy version

## Publication Information

- [coinvest](https://paragraph.com/@gytibor/): Publication homepage
- [All Posts](https://paragraph.com/@gytibor/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@gytibor): Subscribe to updates
- [Twitter](https://twitter.com/coinvest0): Follow on Twitter