React (Web Framework) Reference

Kip Landergren

(Updated: )

My cheat sheet for React covering patterns, idioms, and helpful resources.

Contents

Patterns

Idioms

Conventions

Gotchas

App File Structure / Directory Structure

By feature “foo”:

./src/features/foo/fooSlice.js
./src/features/foo/Foo.js
./src/features/foo/Foo.module.css

By role:

./src/actions/
./src/components/
./src/containers/
./src/middleware/
./src/reducers/
./src/store

Custom Environment Variables

Prefix with REACT_APP_ and access via process.env.REACT_APP_MY_VAR. At build time React will swap them in. More info in the documentation on adding custom environment variables

Events

SyntheticEvent

Mimics portions of the native Event interface.

Selected attribute explanations:
DOMEventTarget target the element on which the event occurred
DOMEventTarget currentTarget the element the event handler has been attached to

JSX

Remember this example, straight from the docs, that JSX represents objects:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

is equivalent to:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Basic usage:

// creates a component referable as `Title`
const Title = (props) => {
  const title = props.title;

  // wrap in parens to reduce automatic semi-colon insertion errors
  return (
    <h2>
      {/* jsx comment style (1 of 2) */}
      {
        // jsx comment style (2 of 2)
      }
      {title} {/* `title` can be untrusted; React DOM escapes before rendering.
                  remember that curly braces wrap to-be-evaluated JavaScript
                  expressions, and are _not_ for control flow (like .erb files).
                */}
    </h2>
  );
}

// and how to use:
const MySection = (props) => {
  const title = props.title;
  const content = props.content;
  
  return (
    {/* HTML attributes need to be converted (most just to camelCase) */}
    <section
      className="my-section"
    >
      {/* note: comments, like HTML, cannot go inside a tag */}
      {/* non-HTML attributes are passed to the component as `props` */}
      <Title
        title={title}
      />
      {content}
    </section>
  );
}

Resources

The History of Render Props, Higher Order Components, and Mixins

FAQ

Why is the cursor jumping on my controlled component?

Stop updating state asynchronously. See here and here.

How can I tell what hooks changed?

The flamegraph will now display a message like: Hook 12 changed.

Where can I find what the hook numbers refer to? Why can’t I see hook numbers on the Components tab?

Terminology

component

A small, isolated, and reusable piece of code; typically maintaining state; typically represents a description of what you want to see on the screen.

Related: element

element

Lightweight description of what to render.

Related: component

functional component

Components without state; only with a render method.

Broader: component

higher order component

A function that takes a component and returns another component.

Broader: component

hydrate

Rendering markup with data server-side before sending to client.

JSX (JavaScript XML)

An extension of the JavaScript language syntax to include XML-like tags.

key

A unique identifier that allows React to determine which items have changed / added / removed.

mounting

When an component is rendered to the browser DOM for the first time.

Related: unmounting

props (properties)

Are read-only; considered “model” data.

Related: state, render prop

ref

A mutable reference.

render prop

A function prop that a component uses to know what to render; the function prop does not need to be actually named render, render just refers to its purpose.

Related: props

state

Considered “model” data.

Related: props

unmounting

When an component is removed from the browser DOM.

Related: mounting