Bwtk in React Clarification

1. **"BTWK"** — maybe you meant:
– **"BTWK"** as in “By The Way, in React”?
– **"BWK"** or “BW Token” or something custom?

2. Did you mean a **React package** like:
– `react-bootstrap`
– `react-router`
– or something related to **state management**, **design systems**, or **toolkits**?

Please confirm what you're referring to by **"Bwtk"** so I can assist accurately.

npm i linklocal --force

### Here's a breakdown:

– `npm i` is shorthand for `npm install`
– `linklocal` is a package used to symlink local packages together in a monorepo (though it's not widely used these days)
– `–force` forces npm to proceed even if it finds conflicts or warnings

### What `linklocal` does:
`linklocal` scans your `package.json` for dependencies that are local paths and automatically creates symlinks using `npm link`, helpful in local development when you're working across multiple packages.

—

### Alternative Tools:
If you're working in a monorepo or multi-package setup, more modern alternatives are:

– [`pnpm`](https://pnpm.io/workspaces) (fast and efficient)
– [`yarn workspaces`](https://classic.yarnpkg.com/en/docs/workspaces/)
– [`lerna`](https://lerna.js.org/)

Would you like help using one of those tools instead, or do you want to proceed using `linklocal`?

First go the folder
D:
Cd bell-canada
Cd my-account
Cd npm cache clean – – force
Cd npm i linklocal – – force
Cd npm install – – legacy-peer-deps-verbose
Npm run build

Now do it for all child to parent

What I’m doing roght by doing al this

Let’s analyze what you're doing **step-by-step**, and I’ll confirm if it’s **right**, and where improvements or corrections can be made.

—

### 💡 Your Bundle Structure

myaccount-internet-overview (Parent)
└── myaccount-landing-internet-overview (Child)
    └── myaccount-landing-common (Child's Child)

—

### ✅ Your Process (bottom to top):

1. **Go to the folder:**

D:
   cd bell-canada/my-account/myaccount-landing-common

2. **Clean npm cache:**

npm cache clean --force

3. **Link local dependencies:**

npm i linklocal --force

4. **Install node modules (ignoring peer dependency issues):**

npm install --legacy-peer-deps --verbose

5. **Build the package:**

npm run build

6. **Repeat the same for:**
– `myaccount-landing-internet-overview`
– `myaccount-internet-overview`

—

### ✅ What You're Doing Right

– **Bottom-to-top approach is correct** in a dependency chain.
– **Cleaning the npm cache** may help avoid strange state issues.
– **Using `linklocal`** is valid if you're linking local dependencies manually instead of using a monorepo tool.
– **Using `–legacy-peer-deps`** helps avoid peer dependency conflicts during `npm install`.
– **Building after install** ensures compiled code is ready for parent usage.

—

### ⚠️ What Can Be Improved / Cleaned Up

1. **Directory Navigation:**
You don’t need to write `cd npm cache clean`. That’s a command, not a folder. It should be run as a command **inside the folder**, like this:

cd D:bell-canadamy-accountmyaccount-landing-common
   npm cache clean --force

2. **Avoid using `linklocal` unless necessary.** If you control all the packages, consider switching to a monorepo setup (like **`yarn workspaces`** or **`pnpm`**) which:
– Handles linking automatically
– Reduces duplication
– Simplifies build and dependency management

3. **Use scripts for automation:**
Since you're repeating this process across multiple folders, create a simple shell script or Node.js script to automate:

# build-all.sh
   for dir in myaccount-landing-common myaccount-landing-internet-overview myaccount-internet-overview; do
     cd D:/bell-canada/my-account/$dir
     npm cache clean --force
     npm i linklocal --force
     npm install --legacy-peer-deps --verbose
     npm run build
   done

—

### ✅ Summary: You're mostly doing it right.

– ✔ Bottom-to-top is correct
– ✔ Using `–legacy-peer-deps` is valid
– ✔ Building each layer is necessary
– ❌ Typo in directory navigation (don’t type `cd npm cache clean`)
– ⚠ Consider automation or switching to `yarn workspaces`/`pnpm` if long-term project

—

Would you like me to create a full automation script or help migrate this setup into a proper monorepo with Yarn Workspaces or pnpm?

—

### 🔧 In Simple Terms:

> “A polyfill is like a fallback — it mimics newer features so that old browsers can still understand and run your code.”

—

### 🧠 Real-Life Example:

Suppose you're using `Array.prototype.includes()` in your React app:

['apple', 'banana'].includes('apple'); // true

This method is **not supported in Internet Explorer**. To avoid errors, you can use a **polyfill** that "fills in" the missing method:

if (!Array.prototype.includes) {
  Array.prototype.includes = function (searchElement, fromIndex) {
    return this.indexOf(searchElement, fromIndex) !== -1;
  };
}

Now even older browsers will behave like modern ones.

—

### 🔥 Common Polyfills (used in React apps)

1. **`core-js`** – Modern ES features
2. **`whatwg-fetch`** – Fetch API
3. **`@babel/polyfill`** (deprecated, replaced with `core-js` + `regenerator-runtime`)
4. **`react-app-polyfill`** – For CRA (Create React App)

—

### ✅ How to Use in React (CRA):

Install:

npm install react-app-polyfill

In your entry point (`index.js` or `main.js`):

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

—

### 🧪 When Should You Use a Polyfill?

– You're supporting **older browsers** (e.g., IE11)
– You're using **features not available** in your target environment
– You encounter runtime errors like `xxx is not a function`

—

Would you like help deciding **which polyfills your React project actually needs** or how to bundle them efficiently?

npm list -g --depth=0

This will list all globally installed npm packages.

—

### 🔍 To specifically check for `linklocal`, run:

npm list -g --depth=0 | grep linklocal

Or on Windows (without `grep`), use:

npm list -g --depth=0

Then look manually in the output for `linklocal`.

—

### ✅ If you want to install it globally:

npm install -g linklocal

—

### 🧠 Pro Tip:
Global installs are useful for CLI tools. But if you're using `linklocal` inside a project via scripts or CI, it's better to install it as a **dev dependency**:

npm install linklocal --save-dev

Let me know if you want a global vs. local comparison table too.

### ✅ On **any system** (Windows/Mac/Linux):

npm list -g linklocal

—

### 🔍 Output:

– If installed globally, you’ll see something like:

/usr/local/lib
  └── linklocal@2.8.2

– If **not installed**, you’ll see:

└── (empty)

or an error like:

npm ERR! missing: linklocal@*, required by ...

—

Let me know if you want to install it globally or just use it locally in your project.

'linklocal' is not recognized as an internal or external command, operable program or batch file.

It means `linklocal` is **not installed globally**, or your global npm packages folder is **not in your system PATH**.

—

### ✅ To Fix This:

#### 1. **Install it globally**

Run:

npm install -g linklocal

Then try:

linklocal

—

#### 2. **Still not recognized? Fix your PATH**

Sometimes npm's global binaries aren't linked to your system PATH. To find the location:

npm bin -g

This might return something like:

C:UsersYourNameAppDataRoamingnpm

Make sure this path is added to your **system’s PATH environment variable**:

##### 👉 Steps for Windows:

– Search **“Environment Variables”** in Start
– Click **“Environment Variables…”**
– In **System Variables**, find and edit the `Path`
– Add this line if it’s missing:

C:UsersYourNameAppDataRoamingnpm

– Click OK and restart Command Prompt

—

Let me know if you want a script to verify it or help editing your PATH.

**ESLint** is a **static code analysis tool** for JavaScript (and TypeScript) that **checks your code for errors, style issues, and best practices** — before you even run it.

—

### 🧠 In Simple Terms:

> **ESLint tells you when you're doing something wrong or messy in your code**, like:
>
> – Missing semicolons
> – Unused variables
> – Bad formatting
> – Deprecated or unsafe patterns

—

### 📦 Why Use ESLint in React (or any JS project)?

1. ✅ **Catch bugs early** (before they break your app)
2. 🎯 **Enforce consistency** across your codebase
3. 🚫 **Avoid anti-patterns**
4. 💻 **Integrates with editors** like VS Code to show errors while you type
5. 🧼 **Works great with Prettier** (for code formatting)

—

### 🔧 Example

Code **without** ESLint:

const name = 'Neeraj'
console.log(Name)

Errors:
– Unused variable
– Case mismatch (`Name` vs `name`)

ESLint will warn you:

✖  2 problems (1 error, 1 warning)

—

### 🛠️ How to Use ESLint?

Install it:

npm install eslint --save-dev

Init setup:

npx eslint --init

Then you can run:

npx eslint yourfile.js

—

### 🌟 In React Projects (Create React App)

If you used **Create React App**, ESLint is already built-in.

To customize, create `.eslintrc.js` or `.eslintrc.json` file.

—

### 🔄 ESLint + Prettier

– ESLint = catch code **logic/style issues**
– Prettier = handle **code formatting**
– Often used together for clean and consistent code

—

Would you like help setting up ESLint in your current React project with best rules and Prettier integration?

A `.tar` file (short for **Tape Archive**) is a **compressed archive** file used to bundle **multiple files and folders into one** — like a ZIP file, but commonly used on **Linux and macOS systems**.

—

### 🧠 In Simple Terms:

> A `.tar` file is like a **folder packed into a single file** so it’s easier to copy, send, or back up.

It doesn't compress by itself — it's just an archive. Compression is usually added with `.gz` (GZIP) or `.bz2` (BZIP2), like:
– `.tar.gz`
– `.tar.bz2`

—

### 📂 Example:

Let's say you have:

my-folder/
  ├─ file1.js
  ├─ file2.js

You can archive it into:

my-folder.tar

Or compress it into:

my-folder.tar.gz

—

### 🔧 Common `.tar` Use Cases:

– Backing up project directories
– Sharing multiple files in one bundle
– Distributing software (like `.tar.gz` for Linux packages)

—

### 🔨 How to Extract a `.tar` file

#### On **Linux/macOS**:

tar -xvf file.tar

#### On **Windows**:

– Use tools like **7-Zip**, **WinRAR**, or **Windows Subsystem for Linux (WSL)**

—

### 🔨 How to Create a `.tar` File:

tar -cvf archive.tar foldername/

Add `z` to compress with gzip:

tar -czvf archive.tar.gz foldername/

—

Would you like to extract or create a `.tar` file right now? I can give you exact commands for your OS.