✳flâneur — a map of the web's best reading

Implementing React from scratch

rob.directory · 5,253 words · saved by 1 readers

My goal here is to walk through my process of building react from the groundup, hopefully giving you an intuition to why things behave the way they do in react. There are many cases where react leaks its abstraction in the interface, so learning how the internals could by implemented is extremely useful to understand the motivation behind those interface designs. But, I'm not trying to follow the same implementation that the react team did. I didn't even know the internal architecture before coding this up. Just high level concepts like virtual dom's and reconciliation. This is also not supposed to be an optimal implementation. There are several very impressive optimizations react implements that I will not be attempting- like concurrent/cancellable rendering. What I want to get done here is: Rendering something to the screen Let's start with the first goal, rendering something to the screen, using react's api. React is traditionally written through jsx, an html like syntax for instant

Implementing React From Scratch Rob Pruzan 8/23/24 Estimated Reading Time: 26.5 m Full Code: https://github.com/RobPruzan/react-scratch Table of Contents Rendering something to the screen useState Re-rendering a component Reconciling view nodes between render Conditional elements Efficient DOM updates More hooks useRef useEffect useMemo useCallback useContext Final result Conclusion My goal here is to walk through my process of building react from the groundup, hopefully giving you an intuition to why things behave the way they do in react. There are many cases where react leaks its abstractio

Explore this link on the map →

saved by

related reading