Table of Contents
Frontend Development
React
Notes
Electron
TypeScript
Other
Frontend Development
electron-react-boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
https://electron-react-boilerplate.js.org/docs/installation
Uses TypeScript :tada:
Build an Electron app with TypeScript and React
https://www.codiga.io/blog/build-electron-typescript-react-app/
React
Course
https://courses.joshwcomeau.com/joy-of-react/
Core Loop
https://courses.joshwcomeau.com/joy-of-react/02-state/03.01-core-react-loop
Mount
First load
Happens once
Leads to Trigger
Trigger
Something happens
Leads to Render
Render
Build the virtual DOM
Reconcile with the existing DOM to see if any changes are needed
Leads to Commit
Commit
Change the DOM if necessary, causing browser to re-paint the page
React goes idle after this until something happens that sends it back to Trigger
Tools
https://courses.joshwcomeau.com/joy-of-react/11-tools-of-the-trade
Event Pooling was removed in React 17
https://github.com/facebook/react/pull/18216
State as a Snapshot
https://react.dev/learn/state-as-a-snapshot
Notes
React is typically compiled to turn the JSX components into function calls
It is possible to use React without compiling by calling the functions directly
https://react.dev/reference/react/createElement#creating-an-element-without-jsx
Webpack bundles files together to speed up page load times
Also lets you import
CSS
(or images or whatever) in the same way you would import JS
https://webpack.js.org/loaders/css-loader/
Webpack is typically used in conjunction with compiling React
HTTP/2.0 doesn't replace bundling
https://blog.khanacademy.org/forgo-js-packaging-not-so-fast/
BEM
is a systematic way of naming
CSS
classes
https://en.bem.info/methodology/quick-start/
Done automagically by Webpack (and consequently by React, when compiled)
CSS
uses specificity to decide between multiple styles that have been applied to an element
https://css-tricks.com/specifics-on-css-specificity/
CSS
uses ORDER OF DEFINITION (precedence) to decide between multiple styles WITH EXACTLY THE SAME SPECIFICITY
https://css-tricks.com/precedence-css-order-css-matters/
Electron
Installation
https://electron-react-boilerplate.js.org/docs/installation
Tutorial
https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
Electron does NOT support EcmaScript Modules
https://github.com/electron/electron/issues/21457
How to Notarize/Sign a macOS app
https://www.codiga.io/blog/notarize-sign-electron-app/
TypeScript
Docs
https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
https://www.typescriptlang.org/docs/handbook/2/basic-types.html
Other
Prettier is the new standard JavaScript formatter
https://prettier.io/docs/en/install
Svelte is a competitor to React
https://svelte.dev/
Uses its own language that observes values directly instead of using hooks like useState