Kamalesh AR

Posted on Jul 15

REACT - Vite,Components and npm

#webdev #programming #react #ai

Vite:

Vite (pronounced "veet", French for "quick") is a modern frontend build tool that helps developers create web applications faster.

It provides:

A development server
Fast hot reloading
A build system for production
Project scaffolding for frameworks like React, Vue, Svelte, and others

Instead of configuring everything manually (Webpack, Babel, etc.), Vite gives you a ready-to-use development environment.

Have you seen or heard about Vite? Vite is the 12th-ranked bundling tool used by 2023 Stack Overflow selection developers. Here’s what Wikipedia defines as Vite.

Vite (French: [vit], like “veet”) is a local development server written by Evan You,[1] the creator of Vue.js, and used by default by Vue and for React project templates. It has support for TypeScript and JSX. It uses Rollup and esbuild internally for bundling.

It’s a pretty clear explanation, but today’s story is a longer and easier way to understand Vite. First, there’s a background you need to know to understand Vite.

Why do we use Vite?

Before Vite, tools like Create React App (CRA) and Webpack were commonly used.

The problem was:

Slow startup time
Slow rebuilds as the project grew
Longer development cycles

Vite solves these problems by making development much faster.

With vite:

Write Code
     ↓
Vite serves files directly
     ↓
Only changed module reloads
     ↓
Browser updates instantly

Without vite:

Write Code
     ↓
Webpack bundles entire project
     ↓
Browser loads application

Typical vite project structure:

my-app/
│
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
│
├── package.json
├── vite.config.js
└── node_modules/

Components:

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

In older React code bases, you may find Class components primarily used.

It is now suggested to use Function components along with Hooks, instead of Class components.

Class components are still supported, check the Class components section for more information.

A component is a reusable piece of UI (User Interface).

Instead of writing the same HTML multiple times, you create a component once and use it wherever needed.

Think of a website like a set of LEGO blocks:

Navbar
Button
Card
Footer

Each block is a component

With components:

function ProductCard() {
  return (
    <div className="card">
      <h2>iPhone 16</h2>
      <p>₹80,000</p>
    </div>
  );
}

Without components:

<div class="card">
  <h2>iPhone 16</h2>
  <p>₹80,000</p>
</div>

<div class="card">
  <h2>Samsung S25</h2>
  <p>₹75,000</p>
</div>

<div class="card">
  <h2>Pixel 10</h2>
  <p>₹70,000</p>
</div>

Node package manager(NPM):

npm stands for Node Package Manager.

npm is the world's largest Software Registry.

The registry contains over 800,000 code packages.

Open-source developers use npm to share software.

Many organizations also use npm to manage private development.

It is the default package manager for Node.js. npm helps you install, manage, update, and remove packages (libraries) that your project depends on.

Think of npm as an app store for JavaScript libraries.

For example, if you need:

React
Express
Axios
Lodash

You can install them using npm.

Background

Before the activation of JavaScript libraries and npm, developers used to deploy their projects by uploading HTML, CSS, and JavaScript files to the server. (In fact, in the big picture, there doesn’t seem to be much difference from current development practices.) Over time, as JavaScript libraries became more prevalent, developers started actively utilizing npm to make installing libraries easier. npm, in simple terms, is a platform for gathering JavaScript libraries. When you install an npm library, a folder named node_modules is created within your project directory. This folder contains the source code of the library and its dependencies. This allows developers to easily import modules, but it has two major drawbacks.

The large size of the node_modules folder
the fact that the import/require syntax was not browser-friendly at that time

Why we use npm?

Instead of writing every feature from scratch, developers use packages created by others.

For example:

Want to make HTTP requests? → Install axios
Want routing in React? → Install react-router-dom
Want icons? → Install react-icons

npm downloads these packages and manages their versions.

How npm works

Developer
    │
    │ npm install react
    ▼
npm Registry (online repository)
    │
    ▼
Downloads React
    │
    ▼
node_modules/

Reference:

https://www.w3schools.com/whatis/whatis_npm.asp
https://www.w3schools.com/react/react_components.asp
https://medium.com/@gmmicky1026/easy-explanation-about-vite-8a6493731fc4

DEV Community