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.state in constructor
• Hooks
  • assign setState hook to component
  • re-render component if state changes

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

• https://www.typescriptlang.org/docs/handbook/basic-types.html
• https://learnxinyminutes.com/docs/typescript/

• microsoft/TypeScript#13422