Setting Up a React Project

Frameworks and build tools

For new apps, the React documentation recommends starting with a framework such as Next.js or React Router (framework mode), which add routing, data loading and server rendering. For a client-only single-page app or to learn, a build tool like Vite gives a fast development server and production builds. Add TypeScript for type safety, a linter with React hooks rules, and a formatter. Check the current React and framework docs for exact commands, as tooling evolves quickly.

Starting a project (sketch)

Typical commands; check current docs for exact options. Not run here.

# client-side app with Vite + TypeScript
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install && npm run dev

# full-stack framework
npx create-next-app@latest my-app

# useful extras
npm install -D eslint-plugin-react-hooks   # enforces the rules of hooks

Enable the hooks lint rules

The react-hooks ESLint rules catch missing effect dependencies and hooks called conditionally, two very common bugs.

Quick check: What does a framework like Next.js add on top of React?

• Nothing at all
• A different language
• A replacement for JavaScript
• Routing, data loading and server rendering