How to Set Up a Modern React JS Development Environment

React no longer recommends Create React App for new projects. The official guidance favors frameworks for production applications; when a client-only SPA or a learning setup is appropriate, Vite provides a focused starting point.

Choose a framework or Vite

Install Node.js LTS

Use nvm, fnm, or Volta for version management, then verify:

node --version
npm --version
git --version

Commit the lock file and use one package manager across the team. A .nvmrc or engines entry can document the supported Node release.

Create a React project with Vite

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

Use react instead of react-ts for JavaScript. Vite prints the local URL, commonly http://localhost:5173.

Understand the basic structure

• src/main.tsx creates the React root.
• src/App.tsx is the sample root component.
• public/ contains files served unchanged.
• vite.config.ts controls plugins, aliases, proxying, and builds.
• package.json defines scripts and dependencies.

Environment variables

Vite only exposes client variables prefixed with VITE_:

# .env.example
VITE_API_URL=https://api.example.test

// src/config.ts
export const apiUrl = import.meta.env.VITE_API_URL;

Anything bundled into frontend code can be read by users. Never place private keys, database passwords, or backend secrets in VITE_*.

Code quality

Keep the ESLint configuration from the template and add formatting according to the team's conventions. CI should at least run:

npm run lint
npm run build
npm run preview

preview verifies a local production build; it is not a production server.

Proxy an API during development

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
});

A development proxy simplifies local CORS, while production still requires correct domains, reverse proxies, and security policy.

Browser tooling

React Developer Tools exposes the component tree, props, state, and profiler. Combine it with the browser Network and Performance panels for requests, bundles, and rendering behavior.

Common problems

• Unsupported engine: switch to the project's Node version, then reinstall dependencies.
• Port occupied: allow Vite to choose another port or pass --port.
• Undefined environment variable: check the VITE_ prefix and restart the server.
• Blank page under a subfolder: configure Vite's base and route fallback.
• Module resolution errors: do not mix lock files; understand the cause before deleting dependencies.

Readiness checklist

1. The framework-versus-SPA decision reflects real requirements.
2. Node and package-manager versions are documented.
3. The lock file is committed.
4. Lint and production builds pass.
5. .env.example contains no secrets.
6. The README documents install, development, test, and build commands.

References

• React Installation
• Build a React app from scratch
• Vite Guide