Summary - Custom renderer

Set up a small custom renderer skeleton that prints to the console.

Summary - Custom renderer

In this group you learned custom renderers, react-reconciler and the host config.

react-reconciler provides the core logic; you only write the host config. createInstance, appendChild and commitUpdate are written for the target environment.

Now you will write a mini host config.

Exercise Write the miniHostConfig

Write a miniHostConfig. Set supportsMutation: true. Add createInstance: (type) => ({ type, children: [] }) and appendChild: (parent, child) => { parent.children.push(child); return parent; }. Export it.

Show example solution

const miniHostConfig = {
  supportsMutation: true,
  createInstance: (type) => ({ type, children: [] }),
  appendChild: (parent, child) => {
    parent.children.push(child);
    return parent;
  },
};
export default miniHostConfig;

Test yourself

Which is wrong?
- react-reconciler runs only on the server
- host config includes createInstance
- appendChild returns parent
- react-dom also uses the reconciler
Show answer

react-reconciler runs only on the server — react-reconciler also runs on the client.

Fill in the blank: create a reconciler

const reconciler = ____(hostConfig);

Show answer

const reconciler = Reconciler(hostConfig);

Match concepts

react-reconciler

Core logic
host config

Target functions
createInstance

Creates a node
appendChild

Adds a child

Next lesson: Project: Micro frontend and design system

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies