#134 What are polyfill and transpiler in React?

🔹 1. Polyfill

• Definition:
  A polyfill is a piece of code (usually JavaScript) that adds modern features to older browsers that don’t support them.
• Why needed?
  • Not all browsers support latest JavaScript features (e.g., Promise, fetch, Array.flat() etc.).
  • Polyfills provide a fallback implementation.

• Example:

  // Older browsers may not support Promise
  if (!window.Promise) {
    window.Promise = function(executor) {
      // Custom implementation of Promise
    };
  }
  

• Real world:
  • Common polyfill libraries:
    • core-js
    • @babel/polyfill
  • Example: React apps use polyfills automatically when built with tools like Babel + Webpack.

---

🔹 2. Transpiler

• Definition:
  A transpiler converts code written in modern JavaScript (ES6/ESNext) into an older version (ES5) so it works in all browsers.
• Why needed?
  • Some browsers don’t understand ES6+ features like let, const, arrow functions, classes, etc.
  • Transpilers make code backward compatible.

• Example with Babel
  Input (ES6 code):

  const sum = (a, b) => a + b;
  export default sum;
  

  After Transpilation (ES5 code):

  "use strict";
  
  function sum(a, b) {
    return a + b;
  }
  exports.default = sum;
  

• Popular transpilers:
  • Babel (most widely used, especially in React projects).
  • TypeScript compiler (transpiles TS → JS).

---

🔹 Difference Between Polyfill & Transpiler

Feature	Polyfill 🛠️	Transpiler 🔄
What it does	Adds missing features at runtime	Converts new JS syntax into older JS
Runs at	Runtime (in browser)	Build time (before running code)
Example	Promise, fetch, Object.assign	let/const, arrow functions, classes
Tool used	core-js, @babel/polyfill	Babel, TypeScript compiler

---

🔹 React / MERN Context

• In a React app, your code (written in ES6+) is transpiled by Babel before being shipped.
• To ensure it runs on all browsers, polyfills are included for missing features.