Challenge: Custom renderer skeleton
- React course
- Expert
- Lesson 32/32
- 6 min
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.
Practice 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.
Starter code
// Write the customHostConfig hereSample solution
const customHostConfig = {
supportsMutation: true,
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => {
parent.children.push(child);
return parent;
},
};
export default customHostConfig;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the role of the host config?
- Provide target environment functions Correct answer
- Compile CSS
- Send HTTP requests
- Generate TypeScript types
Explanation: The host config provides target-specific functions.
2 Fill in the blank: create a node
const hostConfig = {
____: (type) => ({ type, children: [] }),
appendChild: (parent, child) => parent.children.push(child),
};const hostConfig = {
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => parent.children.push(child),
};Explanation: createInstance creates a new node.