Setting Up Your React Reference Without Losing Your Mind
I keep seeing people try to build elaborate cheat sheets for React and end up abandoning them after a week. The problem is usually not the content, it's the setup. Most guides overcomplicate what should be a simple workflow. Here's how I do it, and where things typically go wrong. Start with your package.json. Create a fresh project folder and run npm init -y from the root. Install React and ReactDOM with npm install react react-dom. For a basic setup, you don't need a bundler yet. Just grab a recent version of Node, make sure you're on 18 or above, and you're already partway there. The thing nobody mentions is the HTML entry point. Create an index.html file in the root directory. Inside it, add a single div with id root, then script tag pointing to your JS file. It looks like this, roughly:
script src="index.js" /script (with type module). Then in your index.js, import React and ReactDOM from the node_modules. Render your root element. This alone gets you a working environment in about 3 minutes.
Setup Guide For React Cheat Sheet
Here's where my actual cheat sheet lives. I keep it in a single Markdown file inside the project root called cheatsheet.md. The reason I don't bother with fancy docs tools is that most of what I need is 5 lines or less, and having it in the same directory as my code means I don't have to switch contexts. My file covers hooks (useState, useEffect, useMemo, useRef), component patterns (class vs functional, when to use each), common props patterns, and a few utility imports I reach for constantly. I keep it to one page because if it's longer than that, I stop reading it. One thing I ran into last year that tripped me up for two days: I was setting up a fresh project with a newer React version and kept getting hydration mismatch errors on the server side. Turns out the issue was a mismatch between my server-rendered HTML and what the client expected because I was using a useEffect that mutated DOM state after initial render. The workaround was to separate server and client initialization, using a flag like isClient rendered only after mount, so the first pass always matches exactly. That saved me from rewriting half the component tree.
Get the Full Details
For the bundler piece, if you want to go beyond the vanilla setup, Vite is the current default choice for most people. It's significantly faster than Webpack for dev startups, which matters more than you'd think when you're iterating heavily. Install it with npm create vite@latest, select React, then npm install and npm run dev. That's it. The dev server starts on port 5173 by default. There are tradeoffs though. Vite's HMR works great in development but the production build process is different from what you're used to with older tooling. The output changes depending on your target browser support settings, so if you're shipping to older environments, check your browserslist config before assuming the build will work everywhere. Another common pitfall: people install @babel/preset-react and forget that modern React already supports JSX without a separate Babel transform. If you're using Vite, the transform is built in. Adding Babel manually actually slows things down unnecessarily. I've seen this exact mistake multiple times in team projects, and it always comes back as a confusing build error about duplicate transforms.
For the cheat sheet itself, organize by what you actually look up. Not alphabetically, not by React version, but by situation. My sections are: "I need state", "I need side effects", "I need to reference DOM elements", "I need to memoize something expensive", "I need context", "Forms", "Routing basics". This mirrors how I think when I'm stuck, not how the documentation is structured. If you want something more comprehensive than a single file, there are open source options. The official React docs have a references section that some people mirror locally, but I'd caution against it. The docs move fast, and a static copy gets stale within months. Better to bookmark the live pages and keep your personal notes separate. One final note on testing setup since it usually comes up next. You don't need to set up Jest with React Test Renderer immediately. Start with Vitest, which integrates cleanly with Vite and gives you hook testing out of the box. The learning curve is about a day, and it handles most unit test scenarios without the overhead of a full Jest configuration.
