?? Dive into the World of Custom React – No Frameworks, Just Vanilla JS! ??
?? Hey, fantastic LinkedIn community! ?? Ever been curious about the magic behind your beloved front-end frameworks? Today, I'm thrilled to unveil my journey crafting a nimble React-inspired library using pure JavaScript! ??
Dive into my JavaScript code — a custom renderer mirroring React's power to bring elements to life in the Document Object Model (DOM). This implementation isn't just code; it's a testament to the core concepts of a rendering engine, echoing the very essence of a React renderer. Excited to share this tech adventure with you all! ?? #React #JavaScriptMagic #TechJourney
Here's a visual representation of the folder and files:
?? CustumReact
└── custumReact.js
└── index.html
Let’s see
index.html
<!-- index.html-->
<!DOCTYPE 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 style="display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 20px;" id="root"></div>
<script src="./CustomReact.js"></script>
</body>
</html>
Here i have written basic html, and just called CustomReact.js files and apply some styling properties main div.
Now jump on our functionality,
CustomReact.js:-
?? Understanding reactElements:
The reactElements array represents a virtual representation of your UI. Each element defines a type (e.g., 'div', 'p', 'a'), properties (styles, events, attributes), and children for nested structures or text.
const reactElements = [
{
type: 'div',
props: {
style: { width: '50%', display: 'flex', flexDirection: 'column', padding: '8px', boxShadow: '1px 2px 3px #ababab' },
},
children: [
{
type: 'p',
props: {
style: { color: 'blue', fontWeight: 'bold', padding: '0px', margin: '0px' },
onClick: () => alert('Clicked'),
},
children: 'You can check if a value is an object in JavaScript',
},
// Additional elements...
]
}
// Additional elements...
];
领英推荐
?? customRender Function:
The customRender function takes in React-like elements and renders them into the specified container. It supports nesting and applying properties recursively.
const customRender = (reactElement, container) => {
if (Array.isArray(reactElement)) {
reactElement.forEach((element) => customRender(element, container));
return;
}
const domElement = document.createElement(reactElement.type);
if (reactElement.props) {
customProps(reactElement.props, domElement);
}
if (Array.isArray(reactElement.children)) {
reactElement.children.forEach((child) => customRender(child, domElement));
} else if (typeof reactElement.children === 'object') {
customRender(reactElement.children, domElement);
} else {
domElement.innerHTML = reactElement.children;
}
container.appendChild(domElement);
};
?? customProps Function:
This function handles the creation of DOM elements based on the provided properties, including handling styles, event listeners, and attributes.
const customProps = (props, domElement) => {
Object.keys(props).forEach((key) => {
if (key === 'style') {
const styles = props[key];
Object.keys(styles).forEach((styleKey) => {
domElement.style[styleKey] = styles[styleKey];
});
} else if (typeof props[key] === 'function') {
domElement.addEventListener(key.substring(2).toLowerCase(), props[key]);
} else {
domElement.setAttribute(key, props[key]);
}
});
};
const root = document.querySelector('#root');
customRender(reactElements, root);
Then get root id from html and render code inside of that box.
?? Why Build This?
Understanding the internals of popular libraries helps us become better developers. By creating a simplified version, I gained insights into how React manages the virtual DOM and handles rendering.
?? Check Out the Full Code:
Why build this? Understanding the fundamentals empowers us as developers. Check out the full code on GitHub, play around, and let me know your thoughts! Happy coding! ??
#JavaScript #ReactJS #WebDevelopment #TechTalk
MERN Stack Developer
1 年?? A captivating exploration into the architecture of a custom React-like library using pure JavaScript! ?? The breakdown of customProps and customRender functions provides valuable insights for developers seeking to understand the intricacies of UI frameworks. The reactElements array serves as a powerful tool for structuring virtual UIs – a game-changer for simplifying complex components. ???? The provided example and GitHub repo make this a must-read for anyone looking to enhance their understanding of JavaScript's core concepts. Kudos to the author for distilling complex concepts into an engaging read! ?? Excited to share this with our tech community. #JavaScript #ReactInspiration #TechInsights