Challenge: Custom renderer skeleton

Write a skeleton with react-reconciler that prints to the console.

Challenge: Custom renderer skeleton

In this challenge you will write a host config skeleton for a custom renderer. You will define createInstance and appendChild functions.

This skeleton provides the basis for rendering React to a non-DOM target. The host config can be written for terminals, canvas or mobile native environments. The React core logic stays the same.

Exercise Write the customHostConfig

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

Show example solution

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

Test yourself

What is the role of the host config?
- Provide target environment functions
- Compile CSS
- Send HTTP requests
- Generate TypeScript types
Show answer

Provide target environment functions — The host config provides target-specific functions.

Fill in the blank: create a node

const hostConfig = {
  ____: (type) => ({ type, children: [] }),
  appendChild: (parent, child) => parent.children.push(child),
};

Show answer

const hostConfig = {
  createInstance: (type) => ({ type, children: [] }),
  appendChild: (parent, child) => parent.children.push(child),
};

Next lesson: Expert section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies