This cheatsheet provides a concise and comprehensive overview of react.js, covering essential concepts, syntax, and best practices. It includes sections on properties, nesting, defaults, lifecycle, hooks, references, dom events, jsx patterns, property validation, and more. The cheatsheet is designed to be a quick reference for developers of all levels, from beginners to experienced professionals.
Download React.js Cheatsheet: A Comprehensive Guide to React Development and more Cheat Sheet Software Development in PDF only on Docsity!
React.js cheatsheet
React is a JavaScript library for building user interfaces. This guide targets React v15 to v16.
Components
import React from 'react' import ReactDOM from 'react-dom' class Hello extends React.Component { render () { return
Hello {this.props.name}
} } const el = document.body ReactDOM.render(, el) Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)
Import multiple exports
import React, {Component} from 'react' import ReactDOM from 'react-dom' class Hello extends Component { ... } DEVHINTS.IO Edit Deliver website design projects 30% faster with BugHerd. ads via Carbon
Properties
Use this.props to access properties passed to the component. See: Properties
States
constructor(props) { super(props) this.state = { username: undefined } } this.setState({ username: 'rstacruz' }) Use states (this.state) to manage dynamic data. With Babel you can use proposal-class-fields and get rid of constructor class Hello extends Component { state = { username: undefined }; ... } See: States render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· } render () { this.state.username const { username } = this.state ··· }
Setting default props
See: defaultProps
Setting default state
Set the default state in the constructor(). And without constructor using Babel with proposal-class-fields. See: Setting the default state
Functional components
Functional components have no state. Also, their props are passed as the first parameter to a function. See: Function and Class Components Hello.defaultProps = { color: 'blue' } class Hello extends Component { constructor (props) { super(props) this.state = { visible: true } } } class Hello extends Component { state = { visible: true } } Other components function MyComponent ({ name }) { return
Hello {name}
}
Pure components
Performance-optimized version of React.Component. Doesn’t rerender if props/state hasn’t changed. See: Pure components
Component API
this.forceUpdate() this.setState({ ... }) this.setState(state => { ... }) this.state this.props These methods and properties are available for Component instances. See: Component API
Mounting
constructor (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(). import React, {PureComponent} from 'react' class MessageBox extends PureComponent { ··· } Lifecycle
Effect hook
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. import 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; }, [count]); return (
You clicked {count} times
); }
Building your own hooks
Define FriendStatus Effects may also optionally specify how to “clean up” after them by returning a function. Use FriendStatus See: Building Your Own Hooks import 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); }; }, [props.friend.id]); if (isOnline === null) { return 'Loading...'; } return isOnline? 'Online' : 'Offline'; } function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline? 'Online' : 'Offline'; }
DOM Events
Pass functions to attributes like onChange. See: Events
Transferring props
Propagates src="..." down to the sub-component. See Transferring props
Top-level API
React.createClass({ ... }) React.isValidElement(c) ReactDOM.render(, domnode, [callback]) ReactDOM.unmountComponentAtNode(domnode) ReactDOMServer.renderToString() ReactDOMServer.renderToStaticMarkup() There are more, but these are most common. See: React top-level API class MyComponent extends Component { render () { <input type="text" value={this.state.value} onChange={event => this.onChange(event)} /> } onChange (event) { this.setState({ value: event.target.value }) } } Other features class VideoPlayer extends Component { render () { return <VideoEmbed {...this.props} /> } } JSX patterns
This renders this.props.children into any location in the DOM. See: Portals
Hydration
Use ReactDOM.hydrate instead of using ReactDOM.render if you’re rendering over the output of ReactDOMServer. See: Hydrate render () { return React.createPortal( this.props.children, document.getElementById('menu') ) } const el = document.getElementById('app') ReactDOM.hydrate(, el) Property validation
PropTypes
import 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
