This cheatsheet provides a quick reference for core React.js concepts, essential APIs, and best practices for building modern user interfaces.

React Installation and Setup

Begin by installing the necessary packages for your React project. This typically involves react for building UI components and react-dom for rendering them in the browser.

npm install --save react
npm install --save react-dom
npm install --save prop-types
                

prop-types is crucial for runtime type checking of props, ensuring component robustness.

React Core API

React provides several core functions for creating and manipulating elements. While JSX simplifies element creation, understanding React.createElement is fundamental.

React.createElement(type, [props], [...children])

Creates and returns a new React element. JSX code is transpiled into calls to this function.

React.cloneElement(element, [props], [...children])

Clones an existing React element, merging new props shallowly.

React.isValidElement(object)

Checks if an object is a valid React element.

React.Children Utilities

The React.Children object offers utilities for managing the this.props.children opaque data structure.

• map(children, function[(thisArg)]): Applies a function to each immediate child.
• forEach(children, function[(thisArg)]): Iterates over children without returning an array.
• count(children): Returns the total number of children.
• only(children): Ensures children contains exactly one element.
• toArray(children): Returns children as a flat array with keys.

React.Fragment

Use React.Fragment (or the shorthand <></>) to group multiple elements without adding extra nodes to the DOM.

React.Component Lifecycle and Methods

Subclassing React.Component is the standard way to create stateful components. Understanding its lifecycle methods is key to managing component behavior.

Constructor

Initialize state and bind event handlers here. Always call super(props) first.

setState(updater[, callback])

Enqueues state updates and triggers re-renders. Use the callback for actions after the state update.

Lifecycle Hooks

• componentWillMount(): Called before mounting.
• componentDidMount(): Called after mounting; ideal for DOM manipulation and data fetching.
• componentWillReceiveProps(nextProps): Called when props change.
• shouldComponentUpdate(nextProps, nextState): Determines if a re-render is necessary.
• componentWillUpdate(nextProps, nextState): Called before an update.
• componentDidUpdate(prevProps, prevState): Called after an update; good for DOM operations based on new props/state.
• componentWillUnmount(): Called before unmounting; for cleanup.
• componentDidCatch(): Error boundary method to catch JavaScript errors.

render()

The only required method; returns the JSX to be rendered. It must be pure.

forceUpdate(callback)

Forces a re-render, bypassing shouldComponentUpdate. Use sparingly.

Default Props

Define Component.defaultProps to set default values for props.

ReactDOM API

The react-dom package provides methods for interacting with the browser DOM.

• render(element, container[, callback]): Renders a React element into a DOM container.
• hydrate(element, container[, callback]): Hydrates a server-rendered container.
• unmountComponentAtNode(container): Removes a component from the DOM.
• findDOMNode(component): Gets the DOM node for a component (use refs instead when possible).
• createPortal(child, container): Renders children into a DOM node outside the component's hierarchy.

ReactDOMServer API

For server-side rendering, use react-dom/server.

• renderToString(element): Renders to a static HTML string.
• renderToStaticMarkup(element): Renders to HTML without React-specific attributes.
• renderToNodeStream(element): Renders to a Readable stream.
• renderToStaticNodeStream(element): Renders to a stream without React-specific attributes.

Typechecking with PropTypes

Use prop-types to define the expected data types for your component's props, improving code reliability.

Refer to the official React documentation for detailed usage of various PropTypes like array, bool, func, number, object, string, node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape, and any. Remember to use the .isRequired modifier for mandatory props.

For more in-depth information, consult the React Documentation and the File Structure FAQ.