Skill Maps

Professional Environment: Why So Many Tools?

When you first started learning HTML, you only needed Notepad and a Browser. But in professional React development, we don't just create " pages " ; we build complex engineering systems. For this, we need a " factory " for code assembly.

1. Node.js: The Heart of Your Workspace

Many get confused: " React is for frontend, why do I need Node.js (backend)? " . Node.js allows you to run JavaScript directly on your computer, not just in the browser.

  • Why it's needed: So special programs can read your code, check it for errors (Linter), translate it from JSX to plain JS (Babel), and bundle everything into one fast archive for the site.
  • Node.js is your engine. Without it, you would spend 90% of your time manually preparing files rather than actual programming.

2. Package Managers (NPM / PNPM / Yarn)

Imagine you're building a house with LEGO, but the parts you need are produced by thousands of different people around the world. NPM (Node Package Manager) is a huge warehouse for these parts.

  • Instead of downloading a react.js file from some site, you write one command: npm install react.
  • node_modules: This is the " box " in your project where NPM drops all the downloaded libraries. Don't be afraid of its size — it's the foundation your project stands on.

3. Vite Bundler: Why is it " Flying " ?

Webpack used to reign supreme. Before showing you the site, it would re-process (build) absolutely all project files. If the project was large, you'd wait 10-30 seconds after every change. Vite revolutionized this:

  • Smart Work: It doesn't touch files you haven't opened right now.
  • Native ESM: It tells the browser: " Hey, I won't bundle everything together; just take these files one by one, you already know how to read them! " .
  • Result: The project starts instantly, and code changes appear on the screen faster than you can blink (this is called HMR — Hot Module Replacement).

4. File Constitution: package.json

Every project has this file. It's the list of all " ingredients " for your application:

  • dependencies: Everything needed for the site to work for the user (React, icons, router).
  • devDependencies: Tools needed only by you during development (Vite itself, tests, linters). They won't end up in the final site to keep it lightweight.
  • scripts: Short command shortcuts. Instead of long paths, we write npm run dev — and the magic begins.

5. Final Assembly: Build

When the site is ready, you run npm run build. Vite takes your beautiful code, compresses it beyond recognition (to keep it tiny), throws out everything unnecessary (Tree Shaking), and outputs the dist folder. That's what you upload to the server.