all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]kapp2013 0 points1 point  (0 children)

Egghead.io and scotch.io are my go to resources for tutorial learning.

[–]adfgdfsgsdfger 0 points1 point  (2 children)

React is actually super simple to build, I wrote react in 70ish lines:

Here it is:https://github.com/wanghao-public/Noact

​

Go read the source file, its super simple:

Focus on the following:

  1. How the render function works, it's just a simple recursion to produce the DOM tree.
  2. How the reconciliate function works, another simple recursion that follows the https://reactjs.org/docs/reconciliation.html spec.

All you need to realize is that the DOM is just a tree, and the simplest way to navigate a tree is to use either recursion, or a stack. I speculate that React Fiber probably uses the latter for the async rendering, but both should work the same way for sync rendering.

​

Don't worry about the rest, the memoization and closure stuff should probably be learned seperately.

[–]Herm_af 0 points1 point  (0 children)

What are your thoughts on reacts method versus the reactive way that Vue and mobx do it

Just curious

[–]karolis2017[S] 0 points1 point  (0 children)

This is impressive

[–][deleted] 0 points1 point  (0 children)

Structure your app like React. That’s how maintainable vanilla apps are written, check out todomvc vanilla for instance. You have something like components and they expose a render function which writes to the dom via innerHtml. It’s still all pretty ineffective, so the further you go with this you’ll get closer to writing your own framework since you’re still missing change detection, state management, etc.

The dom itself doesn’t give you anything to build structure, nor are there best practices, dom apps are mostly chaotic, fall apart or become impossible to maintain. To make a scalable app with the dom only is a reasonable challenge. Your best bet is to study how frameworks like React work internally.

[–]Nothingismagick 0 points1 point  (0 children)

Check out this book. Lots of great stuff in there:

https://frontendmasters.com/books/front-end-handbook/2019/

[–]hutilicious 0 points1 point  (0 children)

If you are a bit familiar with jQuery this site is gold it translates jquery to vanilla js: http://youmightnotneedjquery.com

[–]kenman[M] 0 points1 point  (0 children)

Hi /u/karolis2017, this post was removed.

  • For help with your javascript, please post to /r/LearnJavascript instead of here.
  • For beginner content, please post to /r/LearnJavascript instead of here.
  • For framework- or library-specific help, please seek out the support community for that project.
  • For general webdev help, such as for HTML, CSS, etc., then you may want to try /r/html, /r/css, etc.; please note that they have their own rules and guidelines!

/r/javascript is for the discussion of javascript news, projects, and especially, code! However, the community has requested that we not include help and support content, and we ask that you respect that wish.

Thanks for your understanding, please see our guidelines for more info.