A wee little implemention of react.js for personal learning.
Choose one of the following:
If you're using nix, and have direnv installed (e.g. nix-env -i direnv), simply cd into this repo and the correct nodejs version will be installed.
If you have nvm, .nvmrc is provided.
Pick A or B.
npm install
An Example application is in index.html, and main.js.
npx browser-sync -s
Build src files
npx tsc --watch
Run tests on src changes
npx jest --watchAll
Run server and watch file for changes
npx browser-sync -s -f 'main.js' -f 'lib'
- Functional stateless component
- Template for common DOM elements (h1, p, div)
- Build virtual tree of components and dom nodes (initial render)
- Initial render on page
-
this.statein constructor - Hooks
- assign
setStatehook to component - re-render component if state changes
- assign
This seems like the most complicated piece, depending on how performant we want to be. Currently we naively re-render the whole tree when any state changes.
- Naively render all of virtual tree
- Sub-tree Rendering
- Batching renders
-
Elements:
- different type
- same type
-
Components:
- different type
- same type
-
Keys
-
Applying changes to DOM (maniuplate DOM directly, or just setInnerHTML?)
- Event Delegation
- Context API
- ...Fiber?
- https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
- https://github.com/reactjs/react-basic
- https://reactjs.org/docs/reconciliation.html
- https://reactjs.org/docs/design-principles.html
- https://calendar.perfplanet.com/2013/diff/
- https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode#23995928
- https://gist.github.com/duivvv/2ba00d413b8ff7bc1fa5a2e51c61ba43