DEV Community

Cover image for The Three React Terms That Confuse Every Beginner (Explained Clearly)
Saravanan Lakshmanan
Saravanan Lakshmanan

Posted on

The Three React Terms That Confuse Every Beginner (Explained Clearly)

#react #javascript #webdev #beginners

Understanding Vite, Components, and Node Package Manager (NPM)

When developers begin learning React, they frequently encounter three terms: Vite, Component, and Node Package Manager (NPM). Although these concepts are closely related, each serves a different purpose in the development workflow. Understanding them individually helps build a strong foundation before creating React applications.

What is Vite?

Vite (pronounced "veet", derived from the French word for "fast") is a modern frontend build tool that helps developers create, run, and build web applications efficiently. It was created to solve the slow startup and rebuild times experienced with older frontend tooling.

Vite is not a JavaScript library or a framework. Instead, it is a development tool that prepares your project, starts a development server, bundles your code for production, and provides a smooth development experience.

Why was Vite introduced?

As frontend applications became larger, traditional bundlers had to process the entire application before starting the development server. This resulted in longer startup times and slower updates whenever developers modified their code.

Vite improves this process by leveraging modern browser support for native ES Modules. Instead of bundling the entire application during development, Vite serves source files directly to the browser and only processes the files that are requested.

This approach provides:

  • Faster project startup
  • Instant page refreshes
  • Faster Hot Module Replacement (HMR)
  • Optimized production builds

Creating a React Project with Vite

To create a new React application using Vite:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

You will be prompted to choose:

  • Project name
  • Framework (React)
  • Language (JavaScript or TypeScript)

After the project is created:

cd my-project
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

The development server starts, and your React application becomes available in the browser.

Typical Project Structure 

my-project/
│
├── node_modules/
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── package-lock.json
├── vite.config.js
└── index.html
Enter fullscreen mode Exit fullscreen mode

Each folder has a specific responsibility:

  • src/ – Contains the application's source code.
  • public/ – Stores static assets.
  • node_modules/ – Contains installed packages.
  • package.json – Stores project information and dependencies.
  • vite.config.js – Configuration file for Vite.
  • index.html – Entry point of the application.

Key Features of Vite

  • Extremely fast development server
  • Native ES Module support
  • Hot Module Replacement (HMR)
  • Optimized production builds
  • Minimal configuration
  • Supports React, Vue, Svelte, Solid, and other frameworks

What is a Component?

A Component is one of the core concepts of React.

A component is an independent, reusable piece of the user interface. Instead of writing an entire webpage inside one large file, React encourages developers to divide the interface into smaller pieces called components.

Each component is responsible for rendering a specific part of the application.

Examples include:

  • Header
  • Navigation Bar
  • Footer
  • Product Card
  • Login Form
  • Search Box
  • Sidebar

Every webpage is essentially a collection of multiple components working together.

Why Components?

Imagine developing an e-commerce website.

Without components, every product card would need to be written repeatedly.

With components, the product card is written once and reused wherever needed.

This approach provides:

  • Code reusability
  • Better readability
  • Easier maintenance
  • Independent development
  • Improved scalability

Example Component 

function Header() {
    return (
        <h1>Welcome to My Website</h1>
    );
}
Enter fullscreen mode Exit fullscreen mode

This is a React component because it returns JSX, which React converts into user interface elements.

Using a Component 

function App() {
    return (
        <>
            <Header />
        </>
    );
}
Enter fullscreen mode Exit fullscreen mode

When React encounters <Header />, it executes the Header function and displays the returned UI.

Why Do Component Names Start with a Capital Letter?

React follows a naming convention where custom components begin with an uppercase letter.

Correct:

function Header() {}
Enter fullscreen mode Exit fullscreen mode

Incorrect:

function header() {}
Enter fullscreen mode Exit fullscreen mode

This distinction exists because React interprets lowercase tags as standard HTML elements.

For example:

<div></div>
Enter fullscreen mode Exit fullscreen mode

React recognizes this as an HTML <div> element.

However:

<Header />
Enter fullscreen mode Exit fullscreen mode

React recognizes this as a custom React component.

Using PascalCase allows React to differentiate custom components from built-in HTML tags.

Components Are JavaScript Functions

Most React components are simply JavaScript functions.

Example:

function Greeting() {
    return <h1>Hello</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Although a component is technically a JavaScript function, React refers to it as a Component because its purpose is to produce a portion of the user interface.

Types of Components

Modern React primarily uses Function Components.

function Welcome() {
    return <h2>Welcome</h2>;
}
Enter fullscreen mode Exit fullscreen mode

Earlier versions of React also supported Class Components.

class Welcome extends React.Component {
    render() {
        return <h2>Welcome</h2>;
    }
}
Enter fullscreen mode Exit fullscreen mode

Today, function components are the recommended approach because they are simpler and support Hooks.

What is Node Package Manager (NPM)?

NPM (Node Package Manager) is the default package manager for Node.js.

It enables developers to install, update, remove, and manage reusable JavaScript packages.

A package is a collection of reusable code created by developers to solve common programming problems.

Examples include:

  • React
  • Axios
  • Express
  • Lodash
  • Bootstrap

Instead of writing every feature from scratch, developers install packages maintained by the community.

Why Do We Need NPM?

Modern web development depends heavily on third-party libraries.

Without NPM, developers would need to manually download libraries, manage versions, and copy files into every project.

NPM automates this entire process.

It can:

  • Install packages
  • Update packages
  • Remove packages
  • Manage project dependencies
  • Execute project scripts

Installing a Package 

npm install axios
Enter fullscreen mode Exit fullscreen mode

or

npm i axios
Enter fullscreen mode Exit fullscreen mode

NPM downloads Axios and stores it inside the node_modules directory.

Installing React 

npm install react react-dom
Enter fullscreen mode Exit fullscreen mode

This downloads React and its required packages into your project.

package.json

Every NPM project contains a package.json file.

It stores important information such as:

  • Project name
  • Version
  • Dependencies
  • Scripts
  • Project metadata

Example:

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Whenever a package is installed, NPM automatically updates this file.

node_modules

After running:

npm install
Enter fullscreen mode Exit fullscreen mode

NPM creates a directory named:

node_modules/
Enter fullscreen mode Exit fullscreen mode

This folder contains every installed package along with its required dependencies.

Because this directory can become very large, developers typically exclude it from version control using .gitignore.

Common NPM Commands

Create a Vite project:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Install a package:

npm install package-name
Enter fullscreen mode Exit fullscreen mode

Remove a package:

npm uninstall package-name
Enter fullscreen mode Exit fullscreen mode

Start the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Build the project:

npm run build
Enter fullscreen mode Exit fullscreen mode

Relationship Between Vite, Components, and NPM

Although these technologies work together, they have distinct responsibilities.

  • Vite creates and serves the project during development and builds it for production.
  • NPM installs and manages the packages required by the project.
  • Components are the reusable building blocks used to construct the application's user interface.

A typical React development workflow is:

  1. Create a project using Vite.
  2. Install project dependencies with NPM.
  3. Build the application's interface using React components.
  4. Run the project using the Vite development server.
  5. Build the optimized production version when development is complete.

Understanding the role of each tool provides a strong foundation for modern React development and makes it easier to learn advanced concepts such as Hooks, Routing, State Management, and API integration.

Top comments (0)