simon_space:frontend_dev
Table of Contents
Frontend Development
- electron-react-boilerplate
- Uses TypeScript :tada:
- Build an Electron app with TypeScript and React
React
- Course
- Core 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
- Event Pooling was removed in React 17
- 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
- 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
- Webpack is typically used in conjunction with compiling React
- HTTP/2.0 doesn't replace bundling
- BEM is a systematic way of naming CSS classes
- 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
- CSS uses ORDER OF DEFINITION (precedence) to decide between multiple styles WITH EXACTLY THE SAME SPECIFICITY
Electron
- Installation
- Tutorial
- Electron does NOT support EcmaScript Modules
- How to Notarize/Sign a macOS app
TypeScript
- Docs
Other
- Prettier is the new standard JavaScript formatter
- Svelte is a competitor to React
- Uses its own language that observes values directly instead of using hooks like useState
simon_space/frontend_dev.txt · Last modified: by loqui
