Set Up a React Frontend with Node, npm, and Vite

Moving from Python tooling into a React portfolio often starts with a simple question: which pieces replace venv, pip, and requirements.txt?

Python isolates packages in a virtual environment and pins them in a requirements file. A React front end uses a different stack. Node.js supplies the runtime, npm installs packages, and Vite scaffolds a fast local app. The steps below build a React plus Vite environment from an empty folder.

1. Install Node.js

React tooling expects Node.js, which ships with npm (Node Package Manager). After installing Node from the official distribution for your OS, confirm both binaries in a terminal:

node --version
npm --version

npm plays a role similar to pip: it downloads libraries and records versions for the project. You do not create a separate Python-style virtualenv for this workflow; Node and the project-local node_modules tree handle isolation.

2. Create a GitHub Repository

Make a new GitHub repository for the site. Initialize it with a README.md and a .gitignore suited to front-end work. At minimum the ignore file should list:

node_modules/
dist/
.env
.env.*

Never commit node_modules. Those packages are local artifacts. Anyone cloning the repo can recreate them with npm install from package.json. Keep secrets out of Git as well: .env and .env.* belong on the ignore list so API keys never land in history.

3. Clone or Open the Project Locally

Clone the repository or create the folder on disk, then open it in VS Code (or another editor). Working inside that directory keeps Vite’s scaffold and later npm commands rooted in the right place.

4. Initialize React with Vite

Vite gives modern front-end apps a quick start and a responsive development server. From the project root run:

npm create vite@latest .

The trailing . tells the scaffolder to place files in the current directory rather than creating a nested folder. When the prompts appear, choose:

Framework: React
Variant: JavaScript

Some versions also ask for a linter. Accepting one helps catch syntax and style issues early; you can refine the rules later.

5. Install Dependencies

If the scaffolder did not install packages automatically, run:

npm install

npm reads package.json, creates node_modules, and installs every declared dependency. That directory is large and machine-specific, which is why it stays out of version control.

6. Start the Development Server

Launch the local server with:

npm run dev

Vite prints a local URL, commonly:

http://localhost:5173/

Open that address in a browser. Editing and saving React source should refresh the page through Vite’s hot update path during development, so you see UI changes without a full manual reload each time.

Python vs React: The Difference That Helped Me

The mapping that clears the confusion looks like this. A typical Python project flows as:

Python → venv → pip → requirements.txt

A React plus Vite project flows as:

Node.js → npm → package.json → node_modules

The React portfolio does not need a Python venv. Node.js is the runtime, npm is the installer, package.json is the manifest, and node_modules holds installed packages. Keeping those roles distinct avoids mixing Python habits into a JavaScript front end.

Final Thoughts

Coming from Python or data science, the Node-centric setup can feel opaque until each tool’s job is clear. Once Node.js, npm, React, and Vite line up, the path is short:

Create repository
        ↓
Open project in VS Code
        ↓
Initialize React + Vite
        ↓
Install dependencies
        ↓
npm run dev
        ↓
Build!

With that chain in place, the React front-end environment is ready for portfolio work and further libraries you add through npm.