Summary - Custom renderer
- React course
- Expert
- Lesson 24/32
- 5 min
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.
Practice 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.
Starter code
// Write the miniHostConfig hereSample solution
const miniHostConfig = {
supportsMutation: true,
createInstance: (type) => ({ type, children: [] }),
appendChild: (parent, child) => {
parent.children.push(child);
return parent;
},
};
export default miniHostConfig;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is wrong?
- react-reconciler runs only on the server Correct answer
- host config includes createInstance
- appendChild returns parent
- react-dom also uses the reconciler
Explanation: react-reconciler also runs on the client.
2 Fill in the blank: create a reconciler
const reconciler = ____(hostConfig);const reconciler = Reconciler(hostConfig);Explanation: Reconciler(hostConfig) creates the reconciler.
3 Match concepts
| Term | Meaning |
|---|---|
react-reconciler |
Core logic |
host config |
Target functions |
createInstance |
Creates a node |
appendChild |
Adds a child |