simon_space:frontend_dev
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| simon_space:frontend_dev [2023/08/05 16:30] – created loqui | simon_space:frontend_dev [2023/08/06 18:59] (current) – [Other] loqui | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Frontend Development ====== | ====== Frontend Development ====== | ||
| + | * electron-react-boilerplate | ||
| + | * https:// | ||
| + | * https:// | ||
| + | * Uses TypeScript :tada: | ||
| + | * Build an Electron app with TypeScript and React | ||
| + | * https:// | ||
| + | |||
| + | ===== React ===== | ||
| + | |||
| + | * Course | ||
| + | * https:// | ||
| + | * Core Loop | ||
| + | * https:// | ||
| + | * 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:// | ||
| + | |||
| + | * Event Pooling was removed in React 17 | ||
| + | * https:// | ||
| + | * State as a Snapshot | ||
| + | * https:// | ||
| + | |||
| + | ==== 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:// | ||
| * Webpack bundles files together to speed up page load times | * 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 | * Also lets you import CSS (or images or whatever) in the same way you would import JS | ||
| Line 7: | Line 47: | ||
| * HTTP/2.0 doesn' | * HTTP/2.0 doesn' | ||
| * https:// | * https:// | ||
| - | * BEM is a systematic way of naming CSS classes | + | * <abbr title=" |
| * https:// | * https:// | ||
| - | * Done automagically by Webpack (and consequently by React, when compiling, which is typical) | + | * 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 uses ORDER OF DEFINITION (precedence) to decide between multiple styles WITH EXACTLY THE SAME SPECIFICITY | ||
| + | * https:// | ||
| + | |||
| + | ===== Electron ===== | ||
| + | |||
| + | * Installation | ||
| + | * https:// | ||
| + | * Tutorial | ||
| + | * https:// | ||
| + | * Electron does NOT support EcmaScript Modules | ||
| + | * https:// | ||
| + | * How to Notarize/ | ||
| + | * https:// | ||
| + | |||
| + | ===== TypeScript ===== | ||
| + | |||
| + | * Docs | ||
| + | * https:// | ||
| + | * https:// | ||
| + | * https:// | ||
| + | |||
| + | ===== Other ===== | ||
| + | |||
| + | * Prettier is the new standard JavaScript formatter | ||
| + | * https:// | ||
| + | * Svelte is a competitor to React | ||
| + | * https:// | ||
| + | * Uses its own language that observes values directly instead of using hooks like useState | ||
simon_space/frontend_dev.1691253041.txt.gz · Last modified: by loqui
