DEV Community

Cover image for Here's a React v16+ Cheatsheet (PDF/JPEG/Custom themes)
jsmanifest
jsmanifest

Posted on • Updated on • Originally published at jsmanifest.com

Here's a React v16+ Cheatsheet (PDF/JPEG/Custom themes)

#react #javascript #node #webdev

Find me on medium
Join my newsletter

Bring me to the cheat sheet

Sometimes it can take thirty minutes to create a quick interface using React. But sometimes it can also take hours, influenced possibly by many reasons.

If you often forget the names of methods, properties, or the functionality they provide, it can become irritating having to leave your code editor just for a google search. However, is it really that hard to type in a couple of letters and get the answers you want? Well, absolutely not. But if this happens more than once then maybe it's time to acquire a cheat sheet in your possession so that you don't have to leave your code editor anymore. Having a cheat sheet next to you will certainly save you some time in the long run!

Here's a cheat sheet you can use:

react v16 cheat sheet

Bring me to the cheat sheet

While you are looking at the cheat sheet just have in mind that you can:

  1. Generate the cheat sheet into a downloadable PDF or PNG, or you can bookmark the page and come back to it at a later time.

  2. If you don't like how the columns are ordered you can drag and re-order them before you save the cheat sheet.

  3. You can select any of the code syntax themes in the select box to generate in the cheat sheet (there are about 25 themes you can choose):

select box

I will go ahead and put this in a public repo if anyone needs it. I also just began this yesterday so it may not be a perfect cheat sheet, yet.

Also, my goal was to fit all this into one page but there was too much information. If anyone has any suggestions on which parts to swap/remove feel free to let me know.

And the changes will persist after you close your browser so that you don't have to re-do everything.

Here is a full list of what's in the cheat sheet so far (I will keep updating the cheat sheet over time):

Fragments 

// Does not support key attribute
const App = () => (
  <>
    <MyComponent />
  </>
)

// Supports key attribute
const App = () => (
  <React.Fragment key="abc123">
    <MyComponent />
  </React.Fragment>
)
Enter fullscreen mode Exit fullscreen mode

Return Types 

const App = () => 'a basic string' // string
const App = () => 1234567890 // number
const App = () => true // boolean
const App = () => null // null
const App = () => <div /> // react element
const App = () => <MyComponent /> // component
const App = () => [
  // array
  'a basic string',
  1234567890,
  true,
  null,
  <div />,
  <MyComponent />,
]
Enter fullscreen mode Exit fullscreen mode

Error Boundary (React v16.0) 

class MyErrorBoundary extends React.Component {
  state = { hasError: false }
  componentDidCatch(error, info) {...}
  render() {
    if (this.state.hasError) return <SomeErrorUI />
    return this.props.children
  }
}

const App = () => (
  <MyErrorBoundary>
    <Main />
  </MyErrorBoundary>
)
Enter fullscreen mode Exit fullscreen mode

Static Methods 

// Returning object = New props require state update
// Returning null = New props do not require state update
class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {...}
  state = {...}
}

// Return value is passed as 3rd argument to componentDidUpdate
class MyComponent extends React.Component {
  static getSnapshotBeforeUpdate(prevProps, prevState) {...}
}

// Listening to context from a class component
import SomeContext from '../SomeContext'
class MyCompmonent extends React.Component {
  static contextType = SomeContext
  componentDidMount() { console.log(this.context) }
}

// Enables rendering fallback UI before render completes
class MyComponent extends React.Component {
  state getDerivedStateFromError() {...}
  state = { error: null }
  componentDidCatch(error, info) {...}
}
Enter fullscreen mode Exit fullscreen mode

Component States 

// Class component state
class MyComponent extends React.Component {
  state = { loaded: false }
  componentDidMount = () => this.setState({ loaded: true })
  render() {
    if (!this.state.loaded) return null
    return <div {...this.props} />
  }
}

// Function component state (useState/useReducer)
const MyComponent = (props) => {
  // With useState
  const [loaded, setLoaded] = React.useState(false)
  // With useReducer
  const [state, dispatch] = React.useReducer(reducer, initialState)
  if (!loaded) return null
  React.useEffect(() => void setLoaded(true))
  return <div {...props} />
Enter fullscreen mode Exit fullscreen mode

Rendering Components 

// Ways to render Card
const Card = (props) => <div {...props} />

const App = ({ items = [] }) => {
  const renderCard = (props) => <Card {...props} />
  return items.map(renderCard)
  // or return items.map((props) => renderCard(props))
}

const App = (props) => <Card {...props} />

class App extends React.Component {
  render() {
    return <Card {...this.props} />
  }
}

const MyComp = ({ component: Component }) => <Component />
const App = () => <MyComp component={Card} />
Enter fullscreen mode Exit fullscreen mode

Default Props 

// Function component
const MyComponent = (props) => <div {...props} />
MyComponent.defaultProps = { fruit: 'apple' }

// Class component
class MyComponent extends React.Component {
  static defaultProps = { fruit: 'apple' }
  render() {
    return <div {...this.props} />
  }
}
Enter fullscreen mode Exit fullscreen mode

Other React Exports 

// createContext (React v16.3)
const WeatherContext = React.createContext({ day: 3 })
const App = ({ children }) => {
  const [weather, setWeather] = React.useState(null)
  const [error, setError] = React.useState(null)
  React.useEffect(() => {
    api.getWeather(...)
      .then(setWeather)
      .catch(setError)
  }, [])
  const contextValue = { weather, error }
  return (
    <WeatherContext.Provider value={contextValue}>
      {children}
    </WeatherContext.Provider>
  )
}
const SomeChild = () => {
  const { weather } = React.useContext(WeatherContext)
  console.log(weather)
  return null
}

// createRef (Obtain a reference to a react node) (React v16.3)
const App = () => {
  const ref = React.createRef()
  React.useEffect(() => { console.log(ref.current) }, [])
  return <div ref={ref} />
}

// forwardRef (Pass the ref down to a child) (React v16.3)
const Remote = React.forwardRef((props, ref) => (
  <div ref={ref} {...props} />
))
const App = () => {
  const ref = React.createRef()
  return <Remote ref={ref} />
}

// memo (Optimize your components to avoid wasteful renders) (React v16.6)
const App = () => {...}
const propsAreEqual = (props, nextProps) => {
  return props.id === nextProps.id
} // Does not re-render if id is the same
export default React.memo(App, propsAreEqual)
Enter fullscreen mode Exit fullscreen mode

Importing 

// default export
const App = (props) => <div {...props} />
export default App
import App from './App'

// named export
export const App = (props) => <div {...props} />
import { App } from './App'
Enter fullscreen mode Exit fullscreen mode

Pointer Events (React v16.4) 

onPointerUp           onPointerDown
onPointerMove         onPointerCancel
onGotPointerCapture   onLostPointerCapture
onPointerEnter        onPointerLeave
onPointerOver         onPointerOut

const App = () => {
  const onPointerDown = (e) => console.log(e.pointerId)
  return <div onPointerDown={onPointerDown} />
}
Enter fullscreen mode Exit fullscreen mode

React Suspense/Lazy (React v16.6) 

// lazy -> Dynamic import. Reduces bundle size
// + Code splitting
const MyComponent = React.lazy(() => import('./MyComponent))
const App = () => <MyComponent />

// Suspend rendering while components are waiting for something
// + Code splitting
import LoadingSpinner from '../LoadingSpinner'
const App = () => (
  <React.Suspense fallback={<LoadingSpinner />}>
    <MyComponent />
  </React.Suspense>
)
Enter fullscreen mode Exit fullscreen mode

React Profiler (React v16.9) 

const App = () => (
  <React.StrictMode>
    <div>
      <MyComponent />
      <OtherComponent />
    </div>
  </React.StrictMode>
)
Enter fullscreen mode Exit fullscreen mode

Synchronous / Asynchronous act Test Utility (React v16.9) 

import { act } from 'react-dom/test-utils'
import MyComponent from './MyComponent'
const container = document.createElement('div')

// Synchronous
it('renders and adds new item to array', () => {
  act(() => {
    ReactDOM.render(<MyComponent />, container)
  })
  const btn = container.querySelector('button')
  expect(btn.textContent).toBe('one item')
  act(() => {
    button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
  })
  expect(btn.textContent).toBe('two items')
})

// Asynchronous
it('does stuff', async () => {
  await act(async () => {
    // code
  })
})
Enter fullscreen mode Exit fullscreen mode

Bring me to the cheat sheet

Conclusion

And that concludes the end of this post! I hope you found this to be useful and look out for more in the future!

Find me on medium
Join my newsletter

Top comments (7)

Collapse
 
fref profile image
Fredrik Fall • • Edited

Great idea for a cheat sheet!
Perhaps the PDF version could be tweaked a bit as seen in my attachment here. Would love a landscape version with a bit wider code boxes, so the full text can be read.

Keep up the good work :)

Attachment: screenshot

Collapse
 
jsmanifest profile image
jsmanifest • • Edited

Will improve that now, thank you!

Collapse
 
ajspotts profile image
Alec Spottswood •

Super helpful thanks for making this!

Collapse
 
guico33 profile image
guico33 • • Edited 
const App = () => <MyComponent /> // component

Technically MyComponent is a component whereas <MyComponent /> is a react element.

Collapse
 
djdrek profile image
Dr. Derek Austin [aka dj D-REK from Richmond, VA] •

Great point!

Collapse
 
holmesrg profile image
Ron Holmes •

Love it!!

Collapse
 
jsmanifest profile image
jsmanifest •

Glad to hear that, roy!

Read next

madsstoumann profile image

Designing Better Tables: Using Popovers for Extra Data

Mads Stoumann -

aliyuadeniji profile image

Variables and Data types in Rust: A simplified approach.

Aliyu Adeniji -

abayomijohn273 profile image

Deploying NestJS Application using Vercel and Supabase

Abayomi Olatunji -

sshamza profile image

Creating a Live Collaborative Editor with Next.js and Sockets.IO

Hamza Nadeem -