How to install react js :
git commands :
sudo apt install npm
npx create - react - app name
cd name
npx start
NPM = package manager.
NPX = runs packages without installing.
CRA = old-school React starter kit.
Vite = modern, super-fast React setup tool.
Introduction
NPM is an essential tool for JavaScript developers for managing versatile packages in the node.js ecosystem.
While I was learning Tailwind CSS and Node.js, I came across this term "NPM" and this made me pretty curious.
What is NPM(Node Package Manager)
NPM is like an app store for JavaScript developers.
It helps you install and manage different packages (libraries, tools, or frameworks) that your React project needs.
It is the main and default package manager for the JavaScript runtime environment Node.js
Let's break it into much simpler words. It is a huge repository containing numerous open-source software that can be used by anyone for free.
Example: If you want to use React, you install it with npm install react.
Why do we need NPM?
Now the question that arises in our mind is why do we actually need npm?
Let's understand this using an example. Assume that we are building a laptop. Is it possible to build all its components from scratch and then assemble all the components to build a laptop?
No right?
As it will take a lot of time and is also not worth it. Instead, we just take the pre-built components and assemble them to make a laptop which makes the process much easier and faster
NPM helps us in a similar way. It makes writing code easier as we can use pre-built code written by other authors
Other authors write their code for their package and publish it on the NPM registry. We can then use the code by installing it on our machine using NPM CLI(Command Line Interface). All kinds of packages are present in NPM from single-purpose ones to large libraries.
What is npx
npx stands for Node Package eXecute.
This command-line utility, bundled with npm version 5.2.0 and above, allows developers to execute Node.js packages directly from the npm registry without globally installing them on your system.
NPX is a tool that comes with NPM.
Think of it as a one-time executor. Instead of permanently installing a package, NPX lets you run it directly.
Example: You don’t need to install create-react-appglobally.
npx create-react-app my-app
How Does npx Work
Checks for Local Installation: When you run npx , npx first looks for a local installation of the package in your project.
**Executes if Found**: If the package is installed locally, `npx` executes the package's associated command.
**Temporary Installation**: If the package is not found `npx` downloads the package from the `npm` registry into a temporary cache and adds the necessary `executables` to your PATH for the execution.
**Runs the Command**: `npx` executes the command in the temporary environment, ensuring it uses the correct version and dependencies.
**Cleanup**: After execution, `npx` deletes the temporary installation of the package.
If the package exists in your project's package.`json`, `npx` will use the version specified there. You can use `npx` <package-name>@<version> to execute a specific version of a package.
When to Use npx
CRA (Create React App)
CRA is a starter kit for React apps.
It sets up everything (project structure, Webpack, Babel, testing, etc.) so you can start coding right away without worrying about complex configurations.
Example: Run npx create-react-app my-app, and you instantly get a ready-to-use React app.
Create React App (CRA) is an officially supported command-line interface (CLI) tool from Facebook that simplifies the process of setting up a new React single-page application. It provides a pre-configured development environment, handling complex configurations like Webpack and Babel, allowing developers to focus directly on writing React code.
To be discuss this topic
Vite
Vite is a next-generation build tool for front-end projects.
It’s faster than CRA because it uses modern technology (like ES modules and hot module replacement).
Developers prefer Vite for React because:
.It starts the dev server almost instantly.
.It rebuilds your app super quickly.
Happy coding...
Top comments (0)