index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src=".\customreact.js"></script>
  </body>
</html>

customreact.js

function customRender(reactElement, container) {
  const domElement = document.createElement(reactElement.type);
  domElement.innerHTML = reactElement.children;
  for (const prop in reactElement.props) {
    if (prop == "children") continue;
    domElement.setAttribute(prop, reactElement.props[prop]);
  }
  container.appendChild(domElement);
}

const reactElement = {
  type: "a",
  props: {
    href: "https://google.com",
    target: "_blank",
  },
  children: "Click me to visit Google",
};

const mainContainer = document.querySelector("#root");

customRender(reactElement, mainContainer);

Explanation: Rendering HTML Elements with React-like Behavior

In this code snippet, a function customRender is defined to simulate React's rendering behavior. It creates a DOM element based on the provided React element object and appends it to the specified container.

The reactElement object contains information about the element to be rendered, including its type (a for anchor), props (such as href and target), and children (the text content of the anchor).

The function iterates over the props of the reactElement, excluding the children prop, and sets them as attributes on the created DOM element. Then, it appends the DOM element to the specified container, mimicking React's rendering process.

Modifying main.js in Vite React App

import React from "react";
import ReactDOM from "react-dom/client";

function MyApp() {
  return (
    <div>
      <h1>Custom App | Chai</h1>
    </div>
  );
}

const anotherElement = (
  <a href="https://google.com" target="_blank">
    Visit Google
  </a>
);

const anotherUser = "John Wick";

const reactElement = React.createElement(
  "a",
  { href: "https://google.com", target: "_blank" },
  "Click me to visit Google",
  anotherUser
);

ReactDOM.createRoot(document.getElementById("root")).render(reactElement);

Explanation: Converting JavaScript into HTML Elements with Babel

This code snippet demonstrates how React converts JavaScript code into HTML elements using Babel. It defines a React component MyApp, which returns a simple JSX structure.

Then, it creates a React element using JSX (anotherElement) and another using React.createElement() (reactElement). Both represent an anchor (<a>) element with attributes (href and target) and children.

Finally, it uses ReactDOM.createRoot().render() to render the reactElement into the DOM, simulating React's rendering process.

App.jsx in Vite React App

import Chai from "./chai";

function App() {
  const username = "Shivam Kumar";
  return (
    <>
      <Chai />
      <h1>Chai aur React {username}</h1>
      <p>Test paragraph</p>
    </>
  );
}

export default App;

Explanation: Passing JavaScript Variables in HTML

In this code snippet, a React component App is defined. Inside it, a JavaScript variable username is declared and assigned a value.

Within the JSX structure returned by App, the value of username is accessed using curly braces {} syntax, allowing dynamic content rendering. This demonstrates how JavaScript variables can be seamlessly integrated into JSX to produce dynamic HTML content.

Creating a Custom React Library

Subscribe to my newsletter

Shivam Kumar

Shivam Kumar