My tech blogs

Unveiling the Power of Bundlers: A Dive into React and Vite

Kaustubhya shukla's photo
Kaustubhya shukla
·

7 min read

Table of contents

In the ever-evolving realm of web development, efficiency is key. One tool that stands out in streamlining the development process is the Bundler. Let's explore this concept, shedding light on its functionalities and the impactful role it plays in projects.

Understanding Bundlers

At its core, a Bundler is a program designed to merge multiple JavaScript files, consolidating them into a single, optimized file. A noteworthy example is Vite, a Bundler that excels in this task. This consolidation enhances performance and aids in creating more manageable codebases.

React Unveiled: The Power of Sub-libraries

Central to modern web development is React, a robust library with an ecosystem of sub-libraries tailored for specific purposes. Key among them are:

  1. React-dom: Employed in conjunction with React to craft compelling web applications.

  2. React-native: Teaming up with React to forge powerful mobile applications.

Command Line Magic: Demystifying "npx"

The command npm is used to download JavaScript packages from Node Package Manager, and npx is used to execute the JavaScript packages downloaded this way.

When we install packages via npm, those packages can be installed globally, but this is not the default behavior. It means all the packages will be downloaded in a subdirectory (named “node_modules”) of the current working directory (means packages will be installed locally within that directory).

In simpler terms: npx is an npm package used to execute any package on the npm registry directly without installing it. npx helps us avoid versioning, dependency issues and installing unnecessary packages that we just want to try out.

create-react-app: An All-in-One Utility

For those opting for the traditional route in setting up a React application, create-react-app stands as a versatile utility. A simple command, such as npx create-react-app (app-name), sets the stage for a boilerplate React project.

To get started with react, just type this code in your terminal:

npx create-react-app (app-name)

// then go to your project directory
cd (app-name)

// to run boilerplate react code (demo code)
npm run start

P.S. Make sure you have Node.Js installed already and you have added it to your environment variables path.

Navigating React Projects: The Package.json Guide

Embarking on a React journey, the package.json file becomes the focal point. Each line within this file contributes to the project's configuration. Dive deeper into this aspect by referring to this enlightening video. This video will explain you what each line in the create-react-app method's package.json file has.

(skip to 15.00 mins)

or you can read the following example:

{
  "name": "ksd-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

  1. name: Specifies the name of your project or application. In this case, it's named "ksd-app."

  2. version: Indicates the version of your project. The given version is "0.1.0."

  3. private: A boolean flag indicating whether the package should be private (not publishable to the npm registry). In this case, it's set to true.

  4. dependencies: Lists the dependencies required for your project. Each dependency is specified with a package name and a version range. Notable dependencies include:

    • react and react-dom: Libraries for building user interfaces with React.

    • react-scripts: Scripts and configurations for managing a React project.

  5. scripts: Defines a set of npm scripts that can be run using the npm run command. Key scripts include:

    • start: Starts the development server.

    • build: Creates a production build.

    • test: Runs tests.

    • eject: Copies the configuration files and dependencies into the project so you have full control over them.

  6. eslintConfig: Configures ESLint, a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In this case, it extends configurations provided by Create React App (react-app and react-app/jest).

  7. browserslist: Specifies the browsers supported by your application. It is used by Autoprefixer to add vendor prefixes to CSS. It defines browser versions for both production and development environments.

Vite: A Swift Alternative

In search of a leaner alternative to create-react-app, many turn to Vite. The process is simple:

  1. Execute:

     // type this in your terminal to get started
 npm create vite@latest

 // then go to the project directory
 cd app-name
 /* the app name which you entered as the project title 
 and which you see on the folder title */

 // finally to run the boilerplate code
 npm run dev

  2. Fill in project details like:

    1. Project Title (Giving your project a title)

    2. Selecting a Library / Framework (choose React as the framework)

    3. Select the template with react (opt for plain JavaScript here)

(use the arrow keys to navigate and press enter to select)

🛑🛑 Make sure to install the node modules folder before running the project (i.e. brfore typing npm run dev.

To install the node modules folder, type the following code in the terminal:

npm install

// alternatively 
npm i

Looking at Vite's package.json

{
  "name": "react-01",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

  1. name: Specifies the name of the project or application. In this case, it's named "react-01."

  2. private: A boolean flag indicating whether the package should be private (not publishable to the npm registry). It's set to true.

  3. version: Indicates the version of your project. The given version is "0.0.0."

  4. type: Specifies the module type used in the project. In this case, it's set to "module," indicating the usage of ECMAScript modules.

  5. scripts: Defines a set of npm scripts that can be run using the npm run command. Key scripts include:

    • dev: Runs the development server using Vite.

    • build: Builds the project using Vite.

    • lint: Lints the project using ESLint with specific configurations.

    • preview: Runs the project in preview mode using Vite.

  6. dependencies: Lists the runtime dependencies required for your project. In this case, it includes React and ReactDOM.

  7. devDependencies: Lists the development-only dependencies required for your project. These dependencies are not needed for the production runtime but are necessary during development. Notable devDependencies include:

    • @types/react and @types/react-dom: TypeScript type definitions for React and ReactDOM.

    • @vitejs/plugin-react: Vite plugin for React support.

    • eslint and related plugins: ESLint for linting JavaScript code.

    • vite: The Vite build tool.

This package.json file indicates that the project is using Vite as a build tool, React for building user interfaces, and ESLint for code linting. The TypeScript type definitions are included for better development tooling and type safety.

Crafting React Components with Finesse

Whether you're in the React or Vite world, certain best practices prevail.

  1. Use .jsx for files.

  2. Initiate functions and filenames with an uppercase letter, and, if issues arise, a simple window reload may work wonders if you are getting an error even after following all these steps .

    (if you are in VS Code do the following for a window reload:

    1. Right Click -> Go to Command Palette

    2. Select Developer: Reload Window

Using Fragments in JSX

Some times when we call a component and html tags together we get errors because react is supposed to deal with one thing at a time.

To solve this issue we enclose everything inside fragments <> (code) </>

see the following example:

import Intro from "./Intro"

function App() {

  return (
    <> 
    <Intro />
// intro is the component which returns an h1 text statement "Kaise ho guys"
    <h3> Kudos</h3>
    <p> to you </p>
// these are your html tags
    </>

  )
}

export default App

Q. When to use .js and .jsx?

For HTML-infused JavaScript, go for .jsx;

For pure JavaScript, opt for .js.

Hope this article helps you, please do share if you like it!

Reactreact jsvitejson