To view a React app in the browser, ensure project dependencies are installed, then run the appropriate start command from your project's root directory. This command compiles your code and typically opens the app automatically in your default web browser, giving you an instant live preview.
How to view a react app in the browser
If you already have a React project with its dependencies installed, the fastest way to view it is to open your terminal, navigate to the project folder, and execute the start script defined in your `package.json`. This is usually `npm run dev` for Vite-based projects or `npm start` for older setups. The development server will compile your code and, in most cases, automatically launch a new browser tab pointing to your localhost address.
Creating a modern React project with Vite
For new projects, the recommended approach is to use a build tool like Vite, which offers a faster and more streamlined experience than the deprecated Create React App. To scaffold a new project, run the following command in your terminal:
- Run `npm create vite@latest my-react-app -- --template react` to generate a new project directory with the React template.
- Navigate into the project folder using `cd my-react-app`.
This gives you a clean, modern setup with built-in support for hot module replacement and optimized builds, making it the preferred choice for both beginners and experienced developers.
Installing project dependencies
Whether you've cloned a repository or just created a new project, you'll need to install all required dependencies before you can start the development server. If the `node_modules` folder is missing, run one of the following commands in the project root:
- Use `npm install` if you prefer npm.
- Alternatively, use `yarn install` or `pnpm install` depending on your package manager.
This step ensures that all libraries and tools your app depends on are available locally, allowing the dev server to run without errors.
Customizing the server port and browser
Sometimes you might want to change the default port or prevent a new browser tab from opening automatically. You can control this using environment variables. If you prefer to specify which browser opens, use the `BROWSER` variable, such as `BROWSER=Firefox npm run dev` to open in Firefox, or `BROWSER=none` to disable automatic opening entirely. For more advanced cases, the `BROWSER_ARGS` variable lets you pass additional arguments to the browser instance, giving you fine-grained control over how the app launches.
Debugging with React Developer Tools
To inspect the component tree, props, and state of your running app, install the React Developer Tools browser extension, available for Chrome, Firefox, and Edge. This extension is essential for debugging, as it lets you select any rendered component and view its current props and state in real time, making it easier to identify issues and optimize performance. For enhanced debugging of React components, install the React Developer Tools browser extension, available for Chrome, Firefox, and Edge.
