Very, very nice.<p>His presentation library is available as well!<p><a href="https://codesurfer.pomb.us/" rel="nofollow">https://codesurfer.pomb.us/</a><p><a href="https://github.com/pomber/code-surfer/blob/code-surfer-v2/readme.md" rel="nofollow">https://github.com/pomber/code-surfer/blob/code-surfer-v2/re...</a>
Presentation is amazing here.<p>That said, I recently wrote a webcomponent based router and I was surprised at how easy it was to get to a very usable point at such a minimal amount of code. All too often I get in the loop of just `npm i`'ing whatever it is I need, even if the functionality I really need is just a tiny subset of whatever huge library I'm importing.<p>Rodrigo's right that something like this helps you understand React and how to contribute to the codebase, but I think it goes further than that - it lets you understand that the library isn't magic. It gives you the confidence you need to think that maybe you don't need that full 560kb library.
Along a similar vein, Sophie Alpert did a talk[1] at React Conf this year on building your own React custom renderer by using implementing the interfaces that React exposes. Sophie explains how you could use React as a declarative API for pretty much any platform if you wanted, similar to how react-native works.<p>[1] <a href="https://www.youtube.com/watch?v=CGpMlWVcHok" rel="nofollow">https://www.youtube.com/watch?v=CGpMlWVcHok</a>
I think that inverting the order, putting the text on the left and code on the right would work much better.<p>For me, it felt quite unnatural to go against the normal reading direction. I believe that because we read left-to-right, and the additional content is usually on the right, it would be easier for the eyes to search for the examples on the right rather than backward. It felt very distracting.<p>Great content though!
I really like the UI of this blog. On mobile it's a bit annoying to have the top half of the screen be filled by a black block of code, but on desktop it look definitely awesome.
This is great. I did the same for Express.js last year. If anyone interested in it, here is the link: <a href="https://github.com/antsmartian/lets-build-express" rel="nofollow">https://github.com/antsmartian/lets-build-express</a>
What a great tutorial!<p>I wanted a React-like TUI lib for a Clojure project and ended up writing facsimile by looking at the React source. Reading the React source to try to understand how React works is very challenging. This would have made the perfect guide. Thank you.
Wasn't there a very similar article recently? Wouldn't mind if this is a new tutorial trend. Regardless the presentation of this article is great! I hope this also catches on, it has maximum scanning efficiency.
I find that these kinds of tutorials are great at all stages of my experience.<p>As a beginner, it's helpful to watch someone's thought process as they build something from scratch. I remember not even knowing where to start.<p>As a more experienced developer, I tend to know how things work independently, but am always interested to see how you might go about stitching them together at a high level.<p>Here, I liked the concurrent-mode and fiber patterns broken down into their simplest implementation to get the point across.
I think concurrent mode and fibers are kludgy hacks that arise from the problem that only the main thread has access to the DOM. As far as I know and I may be ignorant but few, if any, other frameworks are scheduling DOM updates as aggressively as React is, and are simpler to understand as a result.<p>Hopefully the standards folks can come up with a decent DOM API for WebAssembly.
Reminds me of the book "Build Your Own AngularJS" from a couple of years ago. - <a href="https://teropa.info/build-your-own-angular/" rel="nofollow">https://teropa.info/build-your-own-angular/</a><p>Old now, but still worth reading IMHO as you learn a lot.
Is this the same concepts behind Vue as well? As someone that hasn't yet dabbled in the 'new' frameworks I love how this bridges the gap of understanding. Thank You!
This is great.<p>Implementing core libraries/frameworks you use day-to-day, from scratch / for fun, is one of the best and most practical ways to level up as a dev.
What's interesting is the React team had to implement their own DOM manipulation abstraction, with efficient change management and not interrupting the main JS thread. Their implementation strikes me as a possible general purpose implementation that could eventually replace the way DOM works.
Excellent content. I did find that the code previews in the side bar occasionally changed before or after I expected. I understand the intent with having them adjacent rather than inline ... but I'd probably prefer inline. It would be nice to make this an option of the presentation format.
I’ve been building apps with something similar but using D3.js (d3-select specifically) for data binding.<p><a href="https://github.com/ScottORLY/miri" rel="nofollow">https://github.com/ScottORLY/miri</a>
I really hate the layout and the annoying, distracting, animated garbage on the left side of the page.<p>Maybe it isn't rendering properly in my browser, but I would greatly prefer a simple, wide, vertical layout.