33 line React
Languages and libraries
ui library
SHOW HN2020
How HN took it
14 positive, 19 neutral or asking, 1 mixed, 15 critical, out of 49 comments about the project. Thread score +0.01.
Idea: 6 for, 2 againstDesign: 2 for, 6 againstDocs: 2 for, 3 againstExecution: 1 for, 2 againstPerformance: 0 for, 2 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Short and clear, demystifies React's core idea
From 3 comments
What I really like about this is it removes some of the feeling of magic around react and similar frameworks. Yes there's a lot more going on in real react, but the core idea is…
red_admiral on HNI like this, it illustrates the concept nicely
andreigaspar on HNThis also doesn't mix pseudo-HTML (JSX?) with JS code, so that's cool. As someone who has sort of lost contact with the front-end world, it's nice to see a coding TL;DR.
tudorizer on HN
Mithril-influenced design appreciated
From 1 comment
Looks like mithril (the m object and m.render almost the same) ? https://mithril.js.org/
codegladiator on HN
Objections
Not really React: missing JSX, routing, state, and optimizations
From 3 comments
Author here, this was written as a way for me to explore the core idea of react in a minimal setting. Things it's missing - jsx - routing - performance (maybe?) - component state…
leontrolski on HNThis library isn't meant to have full parity with React, but it's a great example that illustrates how simple a naive VDOM diff/patch is to implement. That said, this is missing…
anonytrary on HNReally not React in 33 lines at all.
andrewstuart on HN
Terse variable names and arrow function style are hard to read
From 3 comments
Code like this is interesting to me whenever I see it: const g = [['', '', ''], ['', '', ''], ['', '', '']] // grid Why not just be descriptive and call it `const grid`? It's…
leetrout on HNOT this is the first time I've seen the arrow function syntax in ES6. My god it is horrible. ``` const Cell = (value, i, j)=>m('button.cell', {onclick: ()=>move(value, i, j)},…
fnord77 on HN> const move = (value, i, j){...} > This function makes a move in the game, it takes 'x' or 'o' along with 2 integer coordinates. It will mutate all the state variables to…
ppeetteerr on HN
Requests
Add component-local state tied to component lifetime
From 1 comment
Nice! Explorations like this are truly useful for understanding and maybe even for innovation. You might figure out new ways of expressing things that are unlike react, but solve…
sfvisser on HN
Questions
Performance compared to React and cost of querying the DOM
From 2 comments
Author here, nice to see this got some interest! As a very small benchmark (uh-oh!), in a console on the linked page, I tried to make/recreate 10,000 divs: ``` const root =…
leontrolski on HNIt seems like `m.update` function queries the current DOM state. I'm interested in the performance implications of this. From what I know, other vdom libraries maintain the…
peey on HN
Why React is needed instead of direct DOM manipulation
From 1 comment
This is probably a naive question, coming from someone who has written very little JavaScript: Why do we need React? Why can’t the browser do the same job? Instead of passing a…
joosters on HN
Alternatives named
Mithril
From 1 comment
Looks like mithril (the m object and m.render almost the same) ? https://mithril.js.org/
codegladiator on HN
Snabbdom
From 1 comment
Snabbdom[0] might be a better one there, it's not quite 33 lines (the core is about 200), but it is intended to be usable and used in production systems, either on its own or…
masklinn on HN
Preact
From 1 comment
If you came to this comments section looking for an actual lightweight standalone version of react, preact+htm works wonders.
jmchuster on HN
Cycle.js
From 1 comment
https://cycle.js.org/
modarts on HN
Maquette
From 1 comment
Anyone who likes the idea of a minimal virtual DOM (like this) will probably appreciate MaquetteJS: https://maquettejs.org/
CitrusFruits on HN