DEV Community

Vigneshwaran V
Vigneshwaran V

Posted on

Understanding Vite, Components, and NPM - React

#webdev #javascript #react #frontend

Vite

Vite (pronounced "veet") is a French word meaning "fast" or "quickly". In web development, Vite is a modern frontend build tool created by Evan You, the creator of Vue.js. It provides a faster and more efficient development experience by offering instant server startup, fast Hot Module Replacement (HMR), and optimized production builds. Vite is commonly used with frameworks such as React, Vue, Svelte, and others.

  • Before tools like Vite, developers used Create React App (CRA) to set up React projects. However, CRA can be slower for large applications. Vite solves this problem by offering faster startup times and instant updates during development.

Why Use Vite?

  • Faster project creation
  • Instant server startup
  • Fast Hot Module Replacement (HMR)
  • Optimized production builds
  • Easy configuration

Hot Module Replacement (HMR)
Suppose you change

<h1>Hello React</h1>
Enter fullscreen mode Exit fullscreen mode

to

<h1>Hello Vignesh</h1>
Enter fullscreen mode Exit fullscreen mode

As soon as you save the file, Vite updates the page without a full refresh.

This is called Hot Module Replacement (HMR).

Creating a React Project Using Vite 

npm create vite@latest

Select:

Framework: React
Variant: JavaScript

Then run:

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

Vite starts a development server and provides a local URL where you can view your React application.

Basic Vite React Project Structure 

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

main.jsx

Entry point of the React application

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);
Enter fullscreen mode Exit fullscreen mode

App.jsx
Your main component

function App() {
  return <h1>Hello React</h1>;
}

export default App;
Enter fullscreen mode Exit fullscreen mode

What is NPM?

NPM (Node Package Manager) is the default package manager for Node.js. It helps developers install, manage, update, and share packages (libraries) that are used in JavaScript and React applications.

  • When creating a React project with Vite, NPM is used to install all the required dependencies and run project scripts.

Why Do We Use NPM?
NPM makes development easier by allowing developers to,

  • Install third-party libraries and frameworks

  • Manage project dependencies

  • Update packages to newer versions

  • Run project scripts and commands

  • Share reusable code with the JavaScript community.

Common NPM Commands
Install all project dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Start the development server

npm run dev
Enter fullscreen mode Exit fullscreen mode

Install a specific package

npm install axios
Enter fullscreen mode Exit fullscreen mode

Create a production build

npm run build
Enter fullscreen mode Exit fullscreen mode

Creates an optimized production build of the application.

What is a Package?

A package is a reusable piece of code published to the NPM registry.

What is the NPM Registry?
The NPM Registry is a large online database that stores millions of JavaScript packages and libraries. It acts as a central repository where developers can publish, share, and download packages for use in their projects.
When you run a command like:

npm install react
Enter fullscreen mode Exit fullscreen mode

NPM connects to the registry, downloads the React package, and installs it into your project.

How It Works

Developer
    ↓
npm install react
    ↓
NPM Registry
    ↓
Downloads React Package
    ↓
Installed in Project
Enter fullscreen mode Exit fullscreen mode

Why is the NPM Registry Important?

  • Provides access to millions of open-source packages.

  • Allows developers to reuse existing code instead of building everything from scratch.

  • Makes package installation and updates simple.

  • Enables developers to publish their own packages for others to use.

The NPM Registry is an online repository that stores and distributes JavaScript packages, allowing developers to install, share, and manage dependencies in their projects.

Examples

  • React

  • Axios

  • Express

  • Lodash

You can install them using NPM:

npm install react
npm install axios
Enter fullscreen mode Exit fullscreen mode

package.json
NPM uses a file called package.json to store project information and dependencies.
Example

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

This file helps NPM know which packages are required for the project.

NPM is an essential tool in modern JavaScript development. It simplifies dependency management, helps run project scripts, and provides access to millions of open-source packages, making application development faster and more efficient.

What is Component

A Component is a reusable and independent piece of UI (User Interface) in a React application. Components allow developers to break a large user interface into smaller, manageable, and reusable parts.

  • In React, a component is typically a JavaScript function whose name starts with a capital letter and returns JSX to describe the UI that should be rendered.

For example, a website may contain

  • Navbar

  • Sidebar

  • Footer

  • Product Card

  • Login Form
    Instead of writing all the code in one file, React lets us create each part as a separate component.

Example

function Header() {
    return <h1>Welcome to React</h1>;
}

export default Header;
Enter fullscreen mode Exit fullscreen mode

This Header component can be used anywhere in the application,

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

Why Do We Use Components?

  • Reusability – Create once, use multiple times.

  • Maintainability – Easier to manage and update code.

  • Readability – Keeps code clean and organized.

  • Scalability – Helps build large applications efficiently.

Types of Components

1. Functional Components (Most commonly used)

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

2. Class Components (Older approach)

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

Difference Between Functional Components and Class Components
Both Functional Components and Class Components are used to create UI in React. The main difference is in how they are written and how they manage state and lifecycle features.

A Component is a reusable, independent piece of UI in React that helps build applications by dividing the interface into smaller and manageable parts.

References

https://www.jspanther.com/blog/what-is-vite/
https://blog.stackblitz.com/posts/what-is-vite-introduction/
https://www.w3schools.com/whatis/whatis_npm.asp
https://www.w3schools.com/react/react_components.asp
https://www.geeksforgeeks.org/reactjs/reactjs-components/

Top comments (0)