This document discusses building React from scratch by summarizing key components and concepts. It recommends getting hands-on practice over just watching tutorials, and advises against analyzing or rebuilding every library used. The core concepts covered include React, renderers, the reconciler, scheduler, createElement, ReactDOM.render, fibers vs stacks, work loops, performing reconciliation work, and useState. Resources for learning more are provided, with an emphasis on practical implementation over just learning concepts.

1. DIY: React.js from scratch
Robert Goik

2. Childlike curiosity

3. The Sorrows of Young Werther

4. …Their toys just get bigger, and more expensive!

5. Not all good stories stars from the beginning

6. Summary
READ THE CODE
READ AND TRY TO UNDERSTAND
GET YOUR HADS DIRTY
STOP WATCHING TUTORIALS
LEARN BY DOING

7. Clickbait?

8. What should I
take from this
presentation?

9. What should I take from this presentation?
SHOULD I ANALYZE EVERY LIBRARY THAT I USE?
I DON’T THINK SO

10. What should I take from this presentation?
SHOULD I BUILD A NEW FRAMEWORK?
PLEASE, NO!

11. GET YOUR HADS
DIRTY pron. practice a lot
What should I take from this presentation?

12. THANK YOU

13. React.js - JSX

14. React.js - NO JSX

15. React.js - createElement
Dev

16. React.js - createElement
Prod

17. createElement

18. Resources
Paul O Shannessy - Building React From Scratch
https://www.youtube.com/watch?v=_MAD4Oly9yg
Implementation Notes
https://reactjs.org/docs/implementation-notes.html
Codebase Overview
https://reactjs.org/docs/codebase-overview.html

19. render

21. The result

22. DONE! ;)

23. React.js - What’s in the box?
●React
●Renderers
●Reconciler
●Scheduler
https://reactjs.org/docs/codebase-overview.html

24. Didact.js - Rodrigo Pombo
https://github.com/pomber/didact
https://pomb.us/build-your-own-react/
https://www.youtube.com/watch?v=8Kc2REHdwnQ

25. React
The “core” of React includes all the top-
level React APIs. React core only
includes the APIs necessary to define
components.

26. React.createElement()

27. Renderer
https://github.com/chentsulin/awesome-react-renderer

28. Renderer
https://www.youtube.com/watch?v=CGpMlWVcHok&t=2s

29. ReactDOM.render()

30. Renderer

31. Renderer

32. Reconciler - stack vs fiber
https://claudiopro.github.io/react-fiber-vs-stack-demo/
https://www.youtube.com/watch?v=ZCuYPiUIONs
Lin Clark - A Cartoon Intro to Fiber - React Conf 2017
https://www.youtube.com/watch?v=aS41Y_eyNrU&t=398s
SMOOSHCAST: React Fiber Deep Dive with Dan Abramov

33. Reconciler

34. Reconciler

35. Scheduler
● Binary heap
https://www.youtube.com/watch?v=Dvq-YKeuO9Y

36. Reconciler - work loop

37. Work Loop - shouldYield

38. Fiber

39. Reconciler - perform unit of work
https://github.com/facebook/react/issues/7942
Fiber Principles: Contributing To Fiber

41. What about update?

42. https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react
Inside Fiber: in-depth overview of the new reconciliation algorithm in React

43. Reconciler - perform unit of work

44. Reconciler

45. reconcileChildren

46. Dom functions

47. useState

48. The result

49. THANK YOU