Build Your Own React

Posted21 days agoActive19 days ago

howToTestFE

183 points

22 comments

pomb.usProgrammingstory

informativepositive

Debate

20/100

ReactJavascriptHTML

Key topics

React

Javascript

HTML

The "Build Your Own React" tutorial has wowed commenters with its interactive and engaging presentation, reminiscent of annotated sources like Backbone.js and CoffeeScript docs. The creator, Pomber, founder of CodeHike, has developed a tool that powers the code block animations, making complex concepts easier to follow. As commenters rave about the tutorial's clarity, they also spark a conversation about the potential for commercial vendors to adopt similar interactive documentation styles, with Pomber revealing he's already working on making it more accessible. The discussion highlights the value of innovative presentation in tech education.

Snapshot generated from the HN discussion

Discussion Activity

Moderate engagement

First comment

Peak period

12-18h

Avg / period

4.6

Comment distribution23 data points

Loading chart...

Based on 23 loaded comments

Key moments

01Story posted
Dec 19, 2025 at 7:16 PM EST
21 days ago
Step 01
02First comment
Dec 19, 2025 at 9:41 PM EST
2h after posting
Step 02
03Peak activity
10 comments in 12-18h
Hottest window of the conversation
Step 03
04Latest activity
Dec 22, 2025 at 1:23 PM EST
19 days ago
Step 04

Generating AI Summary...

Analyzing up to 500 comments to identify key contributors and discussion patterns

Discussion (22 comments)

Showing 23 comments

agarren

21 days ago

4 replies

That is a fantastic presentation. It reminds me of the annotated source/site that backbonejs used to have, but this one is interactive. Really great job!

dleeftink

21 days ago

Motioncanvas may also be of interest then!

[0]: https://motioncanvas.io/blog

agumonkey

21 days ago

coffeescript docs used the same system iirc, very nice indeed

theturtletalks

21 days ago

Pomber is the founder of CodeHike and the code block animations you see are powered by it! We use CodeHike for our doc tutorials and it’s so much easier to follow.

keeganpoppen

21 days ago

could not agree more. this is the "everything has to be communicated via video format" they tell you not to worry about... as it were... all of the interactive and sequential that helps to build up a story, but where every detail is brought into focus exactly when it is relevant, but still forms part of a cohesive, intelligible whole (ie. a document! (who knew that documents were a great way to document things!)). i really have nothing to add to parent other than to second how fantastically presented the content on this page is. really beautiful work.

kitd

21 days ago

1 reply

Love the way this is done. It's a shame commercial vendors don't do this sort of thing for their product docs more regularly.

pomber

21 days ago

Author here.

> It's a shame commercial vendors don't do this sort of thing for their product docs more regularly.

I've been trying. I'm even building something to make adoption easier. Not launched yet, but it's here: https://docskit.codehike.org

TZubiri

21 days ago

1 reply

Why a .us domain?

greenchair

21 days ago

MAGA!

franciscop

21 days ago

3 replies

This is an amazing resource to understand the internals/potential internals, and led me to build a small renderer that I've been using to amazing success for my own alt backend renderer. I now can do it like this:

    export default server()
      .get('/', () => <div>Hello world</div>)
      .get(...);

I've been using Bun's JSX transformer as well to do the transpilation, and since it's just a renderer on the backend I don't need to worry about events or hooks, just the rendering step. For this, the article was amazing and I learned a lot.

alfonsodev

21 days ago

2 replies

How do you handle interaction ?

8n4vidtmkvmk

21 days ago

1 reply

I wrote something like this too. If i need interaction, i did something with the onclicks so it just sends the function definition to the client and calls that. Its not as powerful as react but you can do basic stuff. Its good if your site is mostly static.

franciscop

21 days ago

I was strongly thinking about doing that, but I think I prefer (for now) explicitly not having events, than having events that work kinda similar but not the same. Did you end up publishing it? Would love to have a look!

franciscop

21 days ago

No interaction built in for this kind of simplified use-case, it's just like one of the old "template engines" of the old day, just in JSX/TSX. It's actually much better than expected, I used to dislike that all the old templates had something "off" for me; either they invented their own syntax for logic that you needed to learn besides normal JS (think Handlebars, Pug, etc), or they were in JS-like and with an odd HTML syntax that made sharing between plain HTML and whichever language very hard (think Pug/Jade).

With JSX templating, it's a subset of React, so you can directly share "up"t, and sharing "down" is very easy as well (just removing interaction), since both use the same syntax.

thecupisblue

21 days ago

1 reply

I'm actually about to release something similar, if you're interested would love to share it with you - getting some feedback would really help a lot.

franciscop

21 days ago

That's very nice, sure, thanks! Would love to see what others are working on. My very minimal implementation and docs are here, not really yet in my public projects, I've only used it for experiments:

- Documentation: https://server-js.com/documentation#jsx

- Source of the main renderer: https://github.com/franciscop/server-next/blob/master/src/js...

satvikpendem

21 days ago

1 reply

Isn't this just a JSX template engine? For anything interactive you still need JS on the frontend. And then you essentially recreate React Server Components.

franciscop

19 days ago

Yes, it's a JSX template engine. I'm pointing out that this blog post was the main inspiration to learning how "straightforward" JSX was under the hood.

vivzkestrel

21 days ago

This is honestly how code should be presented on every coding website. Top tier work, if you dont mind sharing, how does it work? how are you highlighting relevant code sections on scroll? Mind shedding some light?

Etheryte

21 days ago

The animations don't keep up when you scroll the page quickly and it really makes the whole thing a pain to glance through. When you scroll fast or just jump to a point in the middle of the article with the scrollbar, you get a bunch of enqueued animations that make no sense.

javcasas

20 days ago

I have followed this to implement React-like in Python using tk. It is quite cool.

braebo

21 days ago

React is such a terrible technology due to being based on such a fundamentally bad idea. The entire render model introduces so much indirection by breaking the entire platform and forcing you to write code against piles of leaky abstractions while constantly keeping the library behavior attached to each line of code in the back of your head.

The fact that it hasn’t been taken out back and shot continues to baffle me everyday at work as I’m neck deep in Nextjs daydreaming about deleting 2/3 of the code and sticking the remaining Typescript and markup into a Sveltekit app.

This post is cool so sorry for using it to vent… it just kills me seeing how it works and knowing people are celebrating it instead of protesting it.. forcing others like me to use it on purpose.

a456463

21 days ago

Amazing website and presentation of the story. Love it!

View full discussion on Hacker News

ID: 46332526Type: storyLast synced: 12/23/2025, 12:15:41 AM

Want the full context?

Jump to the original sources

Read the primary article or dive into the live Hacker News thread when you're ready.

Open link View on HN