React Installation Guide With Examples

Setting Up React Properly

Most people grab their computer and start typing commands without checking what they already have. I did this for years before I learned to look first. Node needs to be running on your machine, and it should be version 18 or newer. Check with a quick terminal command before anything else. If you are on an older version, the build tools will complain loudly and you will spend thirty minutes wondering why. The official tool for scaffolding is create-react-app, though it is worth noting that the maintainers have shifted focus toward Vite. Vite is faster, lighter, and handles hot module replacement without the build wait time that used to drive everyone insane. I switched over two years ago and have not gone back. The old CLI still works fine for beginners who want the most documentation available, but if you are starting something new today, Vite is the logical choice.

React Installation Guide With Examples

Here is the straightforward path. Open your terminal and run the command. With Vite, it looks like this: npm create vite@latest my-app -- --template react Then navigate into the folder and install your dependencies:

cd my-app && npm install Finally, start the dev server: npm run dev

That is it. A browser opens automatically, and you see a counter component updating on screen. The project structure it hands you is clean. A package.json file, a vite.config.js, an index.html, and a src folder containing your components. Nothing unnecessary. With the legacy method using create-react-app, the command is: npx create-react-app my-app

This takes longer to initialize because it downloads a larger set of dependencies upfront. On a slow connection, I have watched this step take nearly five minutes where Vite does it in under thirty seconds. After the install finishes, you run npm start to launch the development server.

What Actually Happens During Installation

When you run either of those commands, the package manager reads your package.json and pulls down everything listed under dependencies. React itself, ReactDOM for DOM rendering, and the build tool. The node_modules folder that appears can grow to over three hundred megabytes. It sounds excessive until you realize that each subpackage is small and specialized. The tradeoff is disk space for convenience, and the industry accepted that deal years ago. One detail people often miss is that npm and pnpm produce different installation behaviors even though the end result looks the same. pnpm uses a content-addressable store, which means duplicate packages across projects share the same files on disk. If you manage multiple React projects, switching to pnpm saved me roughly forty gigabytes of storage on my laptop. It also installs faster because it avoids rewriting symlinks redundantly. The command changes slightly to: pnpm create vite@latest my-app --template react

Then pnpm install instead of npm install.

Common Problems and How I Fixed Them

I ran into a specific issue last year after migrating a project from Node 16 to Node 20. The dev server would start without errors, but any change I made to a component would fail to reflect in the browser. Hot reloading was broken. The error messages were vague, pointing at an incompatible version of esbuild. The workaround was simple but not obvious if you do not encounter it regularly. I updated the vite dependency to the latest minor release in package.json, ran npm install again, and deleted the node_modules folder before reinstalling from scratch. Cached dependency trees can hold onto old resolutions even after you upgrade Node. Another issue that comes up frequently is port conflicts. If you already have something running on port 5173, the Vite dev server will refuse to start and give you an ugly error. The fix is to either kill the other process or tell Vite to use a different port. You can do this by editing vite.config.js and adding a server option with the port property set to whatever is available. Windows users sometimes hit encoding issues when running npm commands in PowerShell. Switching to Windows Terminal or Git Bash resolves most of those cases. Linux users on older distributions may need to install libgcc-s1 or similar system libraries depending on the Node version they are running.

Project Structure After Installation

Once the install finishes, the files that matter are in the src directory. The main entry point is main.jsx or main.js depending on whether you used TypeScript. This file imports React, ReactDOM, and your App component, then mounts it to the DOM element in index.html. You do not need to touch index.html unless you are changing the title, adding meta tags for SEO, or injecting analytics scripts. The App.jsx file contains a basic component you can edit directly. There is also an index.css file for global styles and a separate component stylesheet if you are using CSS modules or Tailwind. The structure is intentionally minimal so you are not fighting against scaffolding opinions.

Verifying the Installation Worked

The simplest verification is to run npm run dev and confirm the browser shows the default React page without errors in the console. A secondary check is to run npm run build, which produces a dist folder containing the production-ready files. If the build succeeds without warnings, your environment is configured correctly. Sometimes the build will succeed but the page will be blank in the browser. This usually means the base path in vite.config.js is misconfigured for your hosting setup. Adding base: './' at the top of the config object fixes it for most static hosting providers.

When Not to Use This Approach

Not every project benefits from a full React installation. If you are building a small widget to embed on an existing page, loading the entire Vite build toolchain is overkill. In those cases, a simple script tag pulling React from a CDN alongside a lightweight bundler like esbuild or even no bundler at all is sufficient. I have projects where the entire React setup took under five minutes because we skipped the scaffolding tool entirely and used a single HTML file with import maps. Large monorepos also tend to outgrow the standard installation pattern. Tools like Turbopack, Rush, or Nx handle dependency management differently and require their own setup processes. The Vite or create-react-app methods work fine for individual applications but become a bottleneck when you are managing ten or twenty packages that share code. The React Installation Guide With Examples found on the official site is accurate but assumes a greenfield project. Real workflows involve existing codebases, CI pipelines, and team conventions that the basic guide does not cover. Once you understand what happens under the hood during npm install, you can adapt the process to fit those constraints without relying on default templates.