Skip to content

Instantly share code, notes, and snippets.

@vadimdemedes
Last active Jul 10, 2020
Embed
What would you like to do?
Starter code for creating a custom React renderer
import React from 'react';
import reconciler from './reconciler';
const App = () => {
return <h1>Hello World</h1>;
};
const render = (tree, target) => {
const container = reconciler.createContainer(target);
container.updateContainer(tree, container);
};
const root = document.querySelector('#root');
render(<App/>, root);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>react-simple-dom</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
{
"name": "react-simple-dom",
"private": true,
"version": "1.0.0",
"description": "Custom React renderer for DOM",
"author": "Vadim Demedes",
"license": "ISC",
"scripts": {
"dev": "parcel index.html"
},
"dependencies": {
"react": "^16.13.1",
"react-reconciler": "^0.25.1",
"scheduler": "^0.19.1"
},
"devDependencies": {
"parcel-bundler": "^1.12.4"
}
}
import createReconciler from 'react-reconciler';
import {unstable_scheduleCallback, unstable_cancelCallback} from 'scheduler';
const reconciler = createReconciler({
schedulePassiveEffects: unstable_scheduleCallback,
cancelPassiveEffects: unstable_cancelCallback,
now: Date.now,
supportsMutation: true,
getRootHostContext: () => {},
getChildHostContext: () => {},
shouldSetTextContent: () => false,
prepareForCommit: () => {},
resetAfterCommit: () => {},
finalizeInitialChildren: () => {},
getPublicInstance: instance => instance
});
export default reconciler;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment