React (Web Framework) Reference

Contents

• Commands
• Patterns
• Idioms
• Gotchas
• create-react-app (CRA)
  • Templates
• App File Structure / Directory Structure
• Custom Environment Variables
• Events
  • SyntheticEvent
• JSX
• Resources
  • The History of Render Props, Higher Order Components, and Mixins
• FAQ
  • Why is the cursor jumping on my controlled component?
  • How can I tell what hooks changed?
  • Where can I find what the hook numbers refer to? Why can’t I see hook numbers on the Components tab?
• React Terminology

Commands

start without loading a browser:

$ BROWSER=none npm start

Patterns

• lifting state up
• single source of truth
• controlled components
• top-down data flow
• single responsibility principle; used when identifying component boundaries
• DRY: don’t repeat yourself
• composition over inheritance

Idioms

• use on[Event] to represent props that are events
• use handle[Event] to represent methods that handle events

Gotchas

• do not mutate state in setState()
• deeply nested objects within state may not register updates

create-react-app (CRA)

Facebook created the project create-react-app to aid the automation of single-page application creation.

npx create-react-app my-app

or, in an existing directory:

npx create-react-app .

Under the hood create-react-app uses yarn (if available), babel, and webpack to create a front end build pipeline.

Templates

Note: specifying multiple --template flags is not supported.

$ npx create-react-app . --template redux

$ npx create-react-app . --template typescript

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

• onChange
• onFocus
• onInput
• onKeyUp

SyntheticEvent

Mimics portions of the native Event interface. Selected attribute explanations:

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

• Releases
• React API Reference
  • SyntheticEvent
• create-react-app documentation
• Style Guides:
  • Airbnb React/JSX Style Guide
• Making setInterval Declarative with React Hooks
• Your Guide to React.useCallback()
• 10 lessons I've learned about handling React state over the last 7 years...

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

• Mixins Are Dead. Long Live Composition
• Mixins Considered Harmful
• Higher-Order Components
• Cheng Lou - The State of Animation in React at react-europe 2015
• Use a Render Prop!
• Render Props

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?

• Open React Dev Tools
• Go to Settings
• Select tab Profiler
• Check box Record why each component rendered while profiling

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?

• Go to Components tool
• Select the component in question
• Under Hooks, expand each and look in sections like: SelectorWithStoreAndSubscription

React Terminology

JSX

AKA “JavaScript XML”; an extension of the JavaScript language syntax to include XML-like tags

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

component, functional component

components without state; only with a render method

component, higher order component

a function that takes a component and returns another component

element

lightweight description of what to render

hydrate

rendering markup with data server-side before sending to client

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

props

short for “properties”; are read-only; considered “model” data

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

state

considered “model” data

unmounting

when an component is removed from the browser DOM