Running a React App

Running a React app means starting a development server that builds and serves your React application so that you can view it in a web browser.

React Project
     ↓
Development Server
     ↓
Web Browser
     ↓
React Application

Before running the application, open the terminal and move into your React project folder.

cd my-react-app

The terminal should be working inside the folder that contains package.json.

The package.json file contains the scripts that can be used to run the project.

{
    "scripts": {
        "dev": "vite"
    }
}

The exact scripts may vary depending on how the project was created.

If the project dependencies have not been installed yet, run:

npm install

This command reads the project's package information and installs the required packages.

For a typical Vite React project, start the development server using:

npm run dev

This command runs the development script defined in package.json.

The command can be understood as follows:

npm
 ↓
Run a script
 ↓
dev
 ↓
Start the development server

The dev script commonly starts Vite in a Vite-based React project.

After running npm run dev, the terminal normally displays information about the development server.

VITE vX.X.X  ready in XXX ms

➜  Local:   http://localhost:5173/

The exact version and startup time may be different on your computer.

localhost refers to your own computer. A development server can make your React application available through a local URL.

http://localhost:5173/

The port number can be different depending on the development server configuration.

Copy the local URL shown in the terminal and open it in a web browser.

http://localhost:5173/

You should then see the React application running in the browser.

The browser sends requests to the local development server, and the development server provides the application files.

Browser
   ↓
localhost
   ↓
Development Server
   ↓
React Project

Open src/App.jsx and change the displayed content.

function App() {

    return (
        <h1>Welcome to My React App</h1>
    );

}

export default App;

Save the file after making the change.

During development, Vite can update the application in the browser when source files are changed. This development feature is commonly called Hot Module Replacement (HMR).

Edit Code
    ↓
Save File
    ↓
Development Server
    ↓
Browser Updates

HMR makes development faster because you can make changes and quickly see the result without manually rebuilding the entire application after every small change.

Write Code
    ↓
Save
    ↓
See Changes
    ↓
Continue Development

You can use the integrated terminal in Visual Studio Code to run your React application.

VS Code
   ↓
Terminal
   ↓
cd my-react-app
   ↓
npm run dev

The terminal can remain open while you work on the project.

In VS Code, you can open the integrated terminal from the Terminal menu.

After opening the terminal, make sure you are inside the React project directory.

cd my-react-app

Once the terminal is inside the project folder, run:

npm run dev

The development server will start and provide a local address.

Sometimes the default port is already being used by another application. In that situation, the development server may use another available port.

Local: http://localhost:5174/

Always use the URL displayed by your terminal.

If a port is already being used, the development tool may report the issue or select another available port depending on its configuration.

The important point is to check the terminal output instead of assuming that the application must always use one specific port.

After opening the local URL, check whether your React application is displayed correctly.

• Check the page title.
• Check the headings.
• Check buttons and links.
• Check component output.
• Check the browser console for errors if necessary.

The browser developer tools can help you find JavaScript errors and other problems.

Browser
   ↓
Developer Tools
   ↓
Console
   ↓
Check Errors

Console messages can provide useful information when an application does not behave as expected.

Start Server
     ↓
Open Browser
     ↓
Write React Code
     ↓
Save Code
     ↓
Browser Updates
     ↓
Test
     ↓
Repeat

This cycle is used frequently while developing React applications.

When you want to stop the development server, focus on the terminal where it is running and press:

Ctrl + C

This stops the currently running development process.

After stopping the server, you can start it again whenever you need it.

npm run dev

Then open the local URL displayed by the terminal.

If the terminal says that npm is not recognized, Node.js may not be installed correctly or the system PATH may not be configured correctly.

Check Node.js and npm using:

node --version
npm --version

If npm run dev cannot find the required project script, make sure the terminal is inside the correct project folder.

cd my-react-app
npm run dev

The project folder normally contains package.json.

If dependencies have not been installed, run:

npm install

Then try starting the development server again:

npm run dev

1. Open VS Code
2. Open React Project
3. Open Terminal
4. Check Project Folder
5. Run npm install if needed
6. Run npm run dev
7. Open Local URL
8. Edit src files
9. Test in Browser
10. Stop with Ctrl + C

The development server is mainly used while developing and testing the application.

Development
     ↓
npm run dev
     ↓
Local Testing

A production deployment uses a production build process appropriate to the project's setup.

# Check Node.js
node --version

# Check npm
npm --version

# Install dependencies
npm install

# Start development server
npm run dev

# Stop development server
Ctrl + C

These commands are commonly used during React development.

React Project
     ↓
Open Terminal
     ↓
cd my-react-app
     ↓
npm install
     ↓
npm run dev
     ↓
Development Server
     ↓
Open localhost URL
     ↓
React App in Browser
     ↓
Edit src Files
     ↓
Save Changes
     ↓
Test Application
     ↓
Ctrl + C to Stop

Once you understand this process, you can easily start and test your React applications during development.