# Day2 with React: Igniting Our App

I hope you understand every concept in our previous blog. Now let's learn more about React🥳

In this blog, we will learn about how to make our app production-ready. So let me introduce you to the first thing -

```plaintext
1. What is npm?

-npm doesn't stand for the Node Package Manager 

You can give your own name to npm; I'll give it the name "new pop music." It is a package manager for the JavaScript programming language and is the default package manager for Node.js, a popular JavaScript runtime. npm is used to manage and distribute packages (libraries and modules) of reusable JavaScript code. It allows developers to easily install, share, and manage dependencies for their projects.

Let's add npm to our project with the following command:
1. `npm init` (you can do `npm init -y`, but it will skip some points, and I want to show you each point).
2. Now, it will ask you for a package name. I'll give it the name "ReactSeries."
3. Version: (1.0.0)
4. Description: This is React series.
5. Entry point: App.js
6. Test command: jest
7. Git repository URL
8. Keywords: react, jatin
9. Author: Jatin Sharma
10. License: "ISC"

Now, it will ask, "Is this okay?" Answer, "Yes, it's okay😉."

It has now created a JSON file.

Let's install our dependencies.

The most important package in our project is the bundler. What is a bundler?
A bundler is a tool that takes all your JavaScript code, along with any other assets like CSS or images, and combines them into a single file (or a few files) that can be served to the browser.
It packages your app properly to ship the app to production.

2. What is Parcel/Webpack?
Parcel automatically tracks all the files, configuration, plugins, and dev dependencies involved in your build and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.

What is package.json?
The specifics of npm's package.json handling. This document contains all you need to know about what's required in your package.json file. It must be actual JSON, not just a JavaScript object literal. A lot of the behavior described in this document is affected by the config settings described in config.

Let's install Parcel in our project with the following command:
`npm install -D parcel`
What is -D?
There are two types of dependencies an app can have:
1. Dev dependencies - generally required for the development phase.
2. Normal dependencies - required for production.

For example, we need Parcel, which is a dev dependency. This is how we tell npm we need a dev dependency by writing -D.

Now open the package.json file, and you will see:

"devDependencies": {
  "parcel": "^2.8.3"
}
```

Read about ^ and understand what it does to your app🧐.

Now you will see the package-lock.json file after you install Parcel. What is package-lock.json? It keeps track of every package installed. It keeps the exact version.

Difference between package.json and package-lock.json?

* package.json: Manifest for the project, managing metadata, and configuration.
    
* package-lock.json: Automatically generated by npm when installing or updating packages. Locks the exact versions of dependencies for reproducibility and consistent installations.
    

One more thing is created in our project: node\_modules.

What is node\_modules? Is it good to push node\_modules to GitHub?

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703258386468/aa229e0d-6104-4a0b-b9c6-653fe694f988.jpeg align="center")

The node\_modules folder is created when you install packages using the Node Package Manager (npm). It stores the packages and their dependencies that your project requires. It is generally not a good idea to push the node\_modules folder to GitHub. This is because the node\_modules folder can be very large and can contain sensitive information, such as API keys. Additionally, the node\_modules folder can change frequently, making it difficult to track changes to your project.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703258469673/a8601ea0-7551-4c1c-9140-7d4ea7b1b33b.jpeg align="center")

If you are working on a team project, it is best to have each team member install the node\_modules folder on their machine. This ensures that everyone is using the same version of the packages, and the node\_modules folder is not accidentally pushed to GitHub.

Every package you install has its own package.json and own dependencies. The best practice is to keep the node\_modules in the .gitignore file.

Q: Is it important to put package-lock.json and package.json onto your Git repo? A: Yes, if you have package.json and package-lock.json, you can recreate your node\_modules. That's why it is not required to put node\_modules on your Git. Whatever you regenerate, just don't put it on Git.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703258601743/b3cab4fd-dc25-4d82-b635-ed45cb46f948.jpeg align="center")

Now let's take a break😉

Part 2

Now we will write the command: `npx parcel index.html`

And now you will see: Server running at [http://localhost](http://localhost) URL

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703259244692/3b9b3aeb-8982-4838-9f3d-106d0e38d318.jpeg align="center")

Congratulations🥳 You have hosted your app on your server. Parcel is doing this for us.

What is npx? Executing package; it will execute Parcel. NPX is a package executer, used to execute JavaScript packages directly without installing them. NPX does not install packages, so package pollution on the machine is not a concern. The most common application of NPX is the create-react-app command. Since we only need to use it once, i.e., while initializing the project, we do not install it.

Now, if you remember, we first injected React into our app using CDN links, right? But this is not a preferred way to bring React into our project. Why? Fetching from CDN is a costly operation. It will fetch React from [unpkg.com](http://unpkg.com). Suppose I already have React in my node\_modules; it's easier than creating React from another network.

So let's see the second method of creating React. Command: `npm install react` Did you notice I don't write -D here because I want React as a normal dependency, not a dev dependency?

Now check package.json:

```json
"dependencies": {
  "react": "^18.2.0"
}
```

It means we have successfully installed React. Similarly, install React DOM: Command: `npm i react-dom` (don't panic; `npm i` is a short version of `npm install`)

Now, again check package.json:

```json
"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}
```

Now we no longer need CDN, so remove it from the index.html file.

Let's start our server again and check if it's working or not. Oops, we got an error: Uncaught ReferenceError: React is not defined at App.js:8:16

Why this error? We have just installed the package, but our code doesn't understand where this React is coming from. I'll use this React in our code; I'll use it using the import keyword.

file - App.js:

```javascript
import React from "react";
import ReactDOM from "react-dom";
```

Now start the server, and we will get a new error: Parcel encountered errors @parcel/transformer-js: Browser scripts cannot have imports or exports.

We need this import; we need to tell the browser that this is not a normal browser script; it's a module. To do this, add the fo llowing

```plaintext
to index.html:
<script type="module" src="./App.js"></script>
```

Now let's explore Parcel's superpowers:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703259564005/cabfcbed-6721-41c5-8167-2f2cb04c4a62.jpeg align="center")

* Dev build
    
* Local server
    
* HMR (Hot Module Replacement) -&gt; automatic refreshing of the page
    
* Parcel uses a file-watching algorithm written in C++ for HMR
    
* Caching for faster builds
    
* Image optimization
    
* Minification
    
* Bundling
    
* Compression
    
* Consistent Hashing
    
* Code splitting
    
* Differential Bundling -&gt; support for older browsers
    
* Diagnostic
    
* Good error handling
    
* HTTPS
    
* Tree shaking -&gt; remove unused code
    
* Different dev and prod bundles
    
* To create a prod build, use the command: `npx parcel build index.html`
    

Note: You may encounter an error during the build process related to the "main" attribute in package.json. To fix this, open package.json and remove the "main" attribute.

Now delete the `dist` folder and run the build command again:

```bash
npx parcel build index.html
```

This will create the `dist` folder with three files:

```plaintext
✨ Built in 871ms

dist\index.html 324 B 1.46s
dist\index.8d566482.css 84 B 104ms
dist\index.68db4388.js 138.78 KB 834ms
```

Now you can delete the `.parcel-cache` folder, and if you want to regenerate `dist` and `.parcel-cache`, add these folders to your `.gitignore` file.

Congratulations! You have now built a production-ready app. Let's make the app compatible with different browsers.

* Browser list You need to specify which browsers your app will support. Configure it in your package.json by adding:
    

```json
"browserslist": [
  "last 2 versions"
]
```

For example:

```json
"browserslist": [
  "last 2 chrome versions",
  "last 2 firefox versions"
]
```

This means it might or might not work on other browsers, but it will definitely work on the specified Chrome and Firefox versions.

How to know what to write? Check this website: [browserslist.dev](http://browserslist.dev). Explore this site.

Congratulations! You have made your app production-ready.