Getting Started with $render
$render makes JSX possible in the browser without a virtual DOM. $render JavaScript components with the speed of light in script tags, and esModules.
It's intuitive, super fast and flexible.
Installation
You can check out LovePlay music player (opens in a new tab) if you want to see $render in action with script tags in the real world. It even has swiping and downloading capability.
Add $render with a script.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script>
</body>
</html>Add JSX
- Add JSX inline
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script>
<script>
const { $render } = render;
const Counter = (count = 0) => {
return `
<div id="counter">
<button
onClick="$render(Counter, ${count + 1})"
style="height:30px; width:100px">Count is ${count}
</button>
</div>
`;
};
$render(Counter);
</script>
</body>
</html>- Count live
- Add JSX via a link (app.js)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/@codingnninja/render/dist/umd/bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>app.js content:
const {$render} = render;
const Counter = (count = 0) => {
return `
<div id="counter">
<button
onClick="$render(Counter, ${count + 1})"
style="height:30px; width:100px">Count is ${count}
</button>
</div>
`;
};
$render(Counter);