[HN Gopher] Implementing React from Scratch
___________________________________________________________________
Implementing React from Scratch
Author : robpruzan
Score : 88 points
Date : 2024-08-24 14:50 UTC (8 hours ago)
(HTM) web link (www.rob.directory)
(TXT) w3m dump (www.rob.directory)
| robpruzan wrote:
| I started this project out of interest in building a UI framework
| for a completely different language/platform inspired by React.
| Quickly realized I didn't understand everything React was doing
| to allow their API. Rebuilding React was extremely useful for
| learning more about the framework. Hopefully, this article is
| useful to other people in the same way.
| jinushaun wrote:
| Good on ya. I gave a presentation a few years ago on building
| Promise from scratch and learned a lot in the process. I've
| always wanted to do the same for React.
| siamese_puff wrote:
| Yes, I love "from scratch" series as it follows the trend of
| Richard Feymans of I can't do it I can't understand it thing.
|
| Abramov has a good and old but relevant video series on Redux
| from scratch too.
| amelius wrote:
| At my work I try to build everything from scratch but my boss
| hates it.
| LoganDark wrote:
| as he probably should. but building everything from scratch
| just is the autistic urge to actually understand what
| you're doing. not implying you're autistic or anything, but
| I am and I can't always stop myself from doing the same
| thing, hehe.
| efortis wrote:
| About React.createElement, implementing a compatible version
| ended up being my goto helper for small UIs.
|
| For example, I use it in mockaton here:
|
| https://github.com/ericfortis/mockaton/blob/7e6ad6226d7ed48e...
|
| So if at some point I need React I can simply delete my version
| of createElement
| c-smile wrote:
| Just in case:
|
| Sciter has Reactor - its own native and built-in implementation
| of React.
|
| Main difference is that component is instanceof Element -
| components are DOM elements. This allows to unify React and
| WebComponent under the same umbrella/mechanism. Yet to extend
| standard DOM methods by use of JSX, so this
| someDomElement.append(<div>Hello</div>)
|
| works just fine - appends content from the vDOM.
|
| In fact Reactor is three entities implemented natively:
|
| * JSX - embedded into JS compiler (830 LOC) -
| https://gitlab.com/c-smile/quickjspp/-/blob/master/quickjs-j... ,
| produces vDOM literals
|
| * Element.prototype.patch(JSX/vDOM) (420 LOC) - reconciliation /
| diff implementation
|
| * Binding of lifecycle methods (200 LOC) - componentDidMount and
| Co.
|
| There is also native implementation of Signal's (310 LOC) but
| they are optional for React'alike functionality.
___________________________________________________________________
(page generated 2024-08-24 23:00 UTC)