React Renderers

Explaints how React Renderers work and how to write your own Renderer. Presented on Colombo JavaScript Meetup on February 2019.

Related Github Repository:
https://github.com/mnmtanish/react-renderer-demo

Transcript

1. React Renderers Colombo JavaScript Meetup - February 2019
2. React Renderers Colombo JavaScript Meetup - February 2019 React?
3. I’m Thanish I write code to draw lines and shapes at Creately In most places, my username is “mnmtanish” Who am I?
4. How React Works
5. How React Works: Components and Elements Elements - Bunch of simple javascript objects - Create a tree of React Elements - Built-in types vs. Custom types
6. const App = props => <img src={props.url} /> How React Works: Components and Elements Elements - Bunch of simple javascript objects - Create a tree of React Elements - Built-in types vs. Custom types
7. const App = props => <img src={props.url} /> <App url=”http://localhost/icon.png” /> How React Works: Components and Elements Elements - Bunch of simple javascript objects - Create a tree of React Elements - Built-in types vs. Custom types
8. const App = props => <img src={props.url} /> <App url=”http://localhost/icon.png” /> React.createElement( App, { url: ‘http://localhost/icon.png’ }, ) How React Works: Components and Elements Elements - Bunch of simple javascript objects - Create a tree of React Elements - Built-in types vs. Custom types
9. How React Works: Components and Elements Elements - Bunch of simple javascript objects - Create a tree of React Elements - Built-in types vs. Custom types const App = props => <img src={props.url} /> <App url=”http://localhost/icon.png” /> React.createElement( App, { url: ‘http://localhost/icon.png’ }, ) { type: App, props: {type: ‘img’, src: ‘...’}, }
10. How React Works: Reconciler Reconciler - Bunch of really cool algorithms - Identifies what changes to apply - Decides when to apply changes - Calls methods on renderer vs.
11. https://reactjs.org/docs/reconciliation.html
12. - Renders the tree of Elements - Updates the view on changes - Hydrates any available views How React Works: Renderer Renderer
13. - Renders the tree of Elements - Updates the view on changes - Hydrates any available views How React Works: Renderer Renderer ReactDOM ReactXP ReactNative Test Renderer React Blessed ReDocX React PDF React Synth
14. - Renders the tree of Elements - Updates the view on changes - Hydrates any available views How React Works Elements Reconciler Renderer - Bunch of simple javascript objects - Create a tree of React Elements - Built-in types vs. Custom types - Bunch of really cool algorithms - Identifies what changes to apply - Decides when to apply changes - Calls methods on renderer vs.
15. Let’s build a renderer!
18. Let’s build a renderer! Elements
19. JSX → React.createElement Single Custom Element: <shape render={(shape) => {}}> Let’s build a renderer! Elements
20. JSX → React.createElement Single Custom Element: <shape render={(shape) => {}}> export const Rectangle = props => ( <shape render={g => { g.clear(); g.beginFill(props.color); g.drawRect(props.x, props.y, props.width, props.height); }} /> ); const Canvas = () => <> <Rectangle x="100" y="100" width="100" height="100" color="red" /> <Rectangle x="225" y="125" width="50" height="50" color="red" /> </>; ReactEasel.render(<Canvas />, 'canvas'); Let’s build a renderer! Elements
21. JSX → React.createElement Single Custom Element: <shape render={(shape) => {}}> Let’s build a renderer! Elements Reconciler
22. JSX → React.createElement Single Custom Element: <shape render={(shape) => {}}> Let’s build a renderer! Elements Reconciler Fiber Reconciler ( v16+ )
23. JSX → React.createElement Single Custom Element: <shape render={(shape) => {}}> ReactEaselJS Renderer Let’s build a renderer! Elements Reconciler Renderer Fiber Reconciler ( v16+ )
24. Demo Time!
25. Questions?
26. Reference - Repository with the code used in this demo https://github.com/mnmtanish/react-renderer-demo - Learn how React Reconciler package works https://hackernoon.com/learn-you-some-custom-react-renderers-aed7164a4199 - Fun With Fiber Custom Renderers - Ken Wheeler https://www.youtube.com/watch?v=oPofnLZZTwQ - Awesome React Renderers https://github.com/chentsulin/awesome-react-renderer