DEV Community

Cover image for React Essentials: NPM, NPX, JSX Rules, Fragments & More
Hariharan S J
Hariharan S J

Posted on

React Essentials: NPM, NPX, JSX Rules, Fragments & More

1. What is mean by npm?

NPM- Node Package Manager

NPM is a package manager used to install and manage dependencies in a React project.

In React (and JavaScript in general), npm is a tool used to install, manage, and share packages (libraries or tools).

Simple Explanation

Think of npm like an app store for developers
Instead of downloading everything manually, you just run a command and install what you need.

What NPM does in React

When you build a React app, you don’t write everything from scratch. You use packages like:

  • React itself

  • Routing libraries

  • UI libraries

npm helps you:

  • Install them → npm install

  • Update them → npm update

  • Remove them → npm uninstall

Important File

package.json

  • This file keeps track of all installed packages

  • Managed by npm automatically

2. What is mean by NPX?

NPX stands for Node Package Execute

NPX is a tool used to execute Node packages instantly without installing them globally.

NPX is used to run packages without installing them permanently

Why we need NPX?

Before NPX

If you want to use a tool, you had to install it first:

npm install create-react-app
Enter fullscreen mode Exit fullscreen mode

Then run it:

create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

With NPX

You can directly run:

npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

No need to install it globally!

What happens internally?

When you run:

npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

NPX will:

  1. Check if the package is already installed

  2. If not → download it temporarily

  3. Run it

  4. Remove it (or cache it)

Real-life analogy

NPM = Buying a software and installing it on your laptop

NPX = Using an app online without installing

Key Difference between npm and npx

What is dev in npm run dev?

dev is a custom script name in package.json used to run the project in development mode.

dev is just a script name

It is not a keyword in npm

Where does dev come from?

Inside your project, there is a file:

package.json

Example:

{
  "scripts": {
    "dev": "vite",
    "start": "react-scripts start",
    "build": "vite build"
  }
}
Enter fullscreen mode Exit fullscreen mode

What happens when you run:

npm run dev
Enter fullscreen mode Exit fullscreen mode

NPM will:

  1. Go to package.json

  2. Look inside "scripts"

  3. Find "dev"

  4. Execute the command assigned to it

In this case:

vite
Enter fullscreen mode Exit fullscreen mode

So what does dev usually mean?

dev = development mode

Used for:

  • Running your app locally

  • Live reload (auto refresh)

  • Fast development

Example (React with Vite)

"scripts": {
  "dev": "vite"
}
Enter fullscreen mode Exit fullscreen mode

Running:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Starts:

Real-Life Analogy

scripts = Remote control buttons

dev = One button name

npm run dev = Pressing that button

3. What is Fragment in React?

A Fragment is used to group multiple elements without adding extra HTML tags to the DOM

A Fragment in React lets you group multiple elements without adding extra nodes to the DOM.

Why Fragment is needed?

In React, you cannot return multiple elements directly

This will give error:

return (
  <h1>Hello</h1>
  <p>World</p>
)
Enter fullscreen mode Exit fullscreen mode

React needs one parent element

Solution 1 (normal way)

return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
)
Enter fullscreen mode Exit fullscreen mode

Problem:

  • Adds extra in DOM (not always needed)

    Solution 2 (Fragment)

    return (
      <React.Fragment>
        <h1>Hello</h1>
        <p>World</p>
      </React.Fragment>
    )
    

    No extra DOM element created

    Short Syntax (most used)

    return (
      <>
        <h1>Hello</h1>
        <p>World</p>
      </>
    )
    

    This is called Fragment shorthand

    Why Fragment is important?

    • Keeps DOM clean

    • Avoids unnecessary

    • Improves performance slightly

    • Useful in tables, lists, layouts

    • Real-Life Analogy

      Fragment = Invisible box

      • Holds items

      • But you can’t see the box

      4.Rules of JSX

      • Must return a single parent element

      Wrong:

    return (
      <h1>Hello</h1>
      <p>World</p>
    )
    

    Correct:

    return (
      <div>
        <h1>Hello</h1>
        <p>World</p>
      </div>
    )
    
    • Every tag must be properly closed

    Wrong:

    <img src="image.png">
    

    Correct:

    <img src="image.png" />
    

    JSX is strict (like XML)

    • Use className instead of class

    Wrong:

    <div class="box"></div>
    

    Correct:

    <div className="box"></div>
    

    Because class is a JavaScript keyword

    • Inline styles must be objects

    Wrong:

    <div style="color: red;"></div>
    

    Correct:

    <div style={{ color: "red" }}></div>
    

    Double {}:

    • Outer = JavaScript

    • Inner = object

    5.Final Takeaway

    Understanding core concepts like NPM, NPX, JSX, Fragments, and React’s control flow builds a strong foundation for developing modern React applications efficiently.



Top comments (0)