Getting Started with React

npm run dev starts the Vite dev server and prints an address such as http://localhost:5173. Keep that page open in your browser, edit src/App.tsx and save: the change shows up immediately without a full reload. Thanks to Fast Refresh, provided by Vite's React plugin, component state is usually preserved as well.

Try replacing the contents of src/App.tsx with this:

function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}!</p>;
}

export default function App() {
  return (
    <main>
      <h1>My first React app</h1>
      <Greeting name="React" />
      <Greeting name="Vite" />
    </main>
  );
}

Both Greeting and App are functions that return JSX, in other words components. Component names must start with a capital letter so React can tell them apart from HTML tags. To change the port, open the browser automatically or reach the server from a phone on the same network, pass options through:

npm run dev -- --port 3000 --open
npm run dev -- --host

Editor setup

Visual Studio Code supports TypeScript and JSX out of the box, so autocomplete, inline type errors and rename refactoring work immediately. A few additions make life easier:

• ESLint extension: reads the eslint.config.js that ships with the Vite template and flags problems such as Rules of Hooks violations right in the editor.
• Prettier extension: formats code on save. Installing it in the project too (npm install -D prettier) keeps everyone on the same version.
• React Developer Tools: a browser extension for Chrome, Firefox and Edge that shows the component tree with props and state, and profiles rendering.

A project-level .vscode/settings.json can run formatting and ESLint auto-fixes on every save:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

During development you may notice components rendering twice or effects running twice. That is <StrictMode> in src/main.tsx doing extra work on purpose, only in development, to surface bugs such as missing cleanup early. It never happens in a production build.

Summary

• React tooling runs on Node.js, so install an LTS release first.
• The official docs recommend a framework for new apps, but Vite is simpler for learning and client-only apps.
• Create a project with npm create vite@latest my-app -- --template react-ts and run it with npm run dev.
• Fast Refresh updates the page as you save; StrictMode's double invocation happens only in development.
• ESLint and Prettier in VS Code plus React Developer Tools in the browser make a solid setup.