☢️ HTML Remark in React




When you ever began studying React and noticed it is syntax JSX, you possibly thought. “This appears to be like like HTML”

And in the future you wish to remark one thing in JSX, and your first attempt can be to do:

perform Part() {
  return (
    <div>
      <!-- This is my remark -->
      The fast brown fox ...
    </div>
  )
}
Enter fullscreen mode

Exit fullscreen mode

And for certain your bundler began complaining, that your syntax is invalid, and you then search the web, and realise {that a} HTML Remark isn’t legitimate in JSX, and also you study that it’s important to use a JavaScript remark.

Nicely on this weblog publish I’ll present you for studying functions the best way to trick React to render an actual HTML Remark in your browser in a couple of steps.

Step 1

Generate a React app utilizing Create React App

npx create-react-app my-experiment --template typescript
cd my-experiment
npm run begin
Enter fullscreen mode

Exit fullscreen mode

Step 2

Open App.tsx and add a const with a novel id as a string

const HTMLComment = 'unique-html-comment'
Enter fullscreen mode

Exit fullscreen mode

Step 3

Declare this HTMLComment as a Intrinsic Factor in your App.tsx. TypeScript isn’t required, however it’s important to study one thing fascinating 😊

import { PropsWithChildren } from 'react';

declare international {
  namespace JSX {
    interface IntrinsicElements {
      [HTMLComment]: PropsWithChildren<unknown>
    }
  }
}
Enter fullscreen mode

Exit fullscreen mode

Step 4

Render this created HTMLComment as a JSX factor in your App.tsx

perform App() {
  return (
    <div className="App">
      <header className="App-header">
        <HTMLComment>That is my remark</HTMLComment>
        {/* ... */}
      </header>
    </div>
  );
}
Enter fullscreen mode

Exit fullscreen mode

Let’s verify what was rendered in browser.

Nicely, that is anticipated, React thinks our factor is a DOM factor and renders it as regular. Let’s transfer on.

Step 5

  • Open node_modules/react-dom/cjs/react-dom.development.js
  • Discover createElement perform (line ~8954)
  • Discover } else if (typeof props.is === 'string') { (line ~8986)

Image description

You see final } else {? inside that final department a brand new factor is created. We have to add another if department to verify for our HTMLComment

if (kind === 'unique-html-comment') {
  domElement = ownerDocument.createComment('')
}
Enter fullscreen mode

Exit fullscreen mode

Our ultimate added code will appear to be this:

Image description

Save the file. Restart the CRA course of so it may see new modifications from inside node_modules

Open the browser to see the outcome.

Image description

And that is the way you trick React into rendering a HTML Remark!
Feeeling like a hacker now? 🤣

haker typing

Cowl Picture by Florian Olivo on Unsplash



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#HTML #Remark #React