#+TITLE: React

React is made by facebook or something.

* My development practices
Program as functionally as possible!
- Always use functional components. Never classes.
- Never use 'let' or 'var'; only 'const'.

* Hook Tips
- useMemo for expensive computations. It's magic
- useHook is a replacement for most UX logic
- useEffect is used to replace any rerendering in response to dependency changes; this is primarily useful for making requests when the user takes an action (thus changing props)
* Tips
[[https://m.youtube.com/watch?v=O8d_42Wc-po][sharing code between react and react native]]

- Always use capital letters for React components, and always use React component syntax to call them. It's okay if this means declaring a constant with a capital letter; that's expected and idiomatic in this case, even if it feels inconsistent.
* Tools
[[https://github.com/preactjs/preact][3kb React alternative: Preact]]
[[https://github.com/purescript-contrib/purescript-react][React bindings for Purescript]]
[[https://github.com/facebookexperimental/Recoil][Experimental state management for React]]
[[https://github.com/strateos/react-map-interaction][Interact with any react component like a map]]
[[https://github.com/danbovey/react-infinite-scroller][easy infinite scroll]]
- [[https://github.com/pmndrs/jotai][Jotai]] :: Primitive React state management
* UI
- [[https://github.com/urbit/indigo-react][Indigo]] :: Tlon's React components; [[file:web_design.org][Web Design]]
- [[https://github.com/jpzk/chopchop][Chopchop]] :: Mouseless paged reader for the browser
- [[https://github.com/uber/react-view][React specific component playground]]
- [[https://github.com/microsoft/fluentui][Fluent UI]] :: Microsoft's UI Framework
-- [[https://github.com/rhysd/react-vim-wasm][react vim wasm]] :: [[file:vim.org][Vim]] editor embedded in React code
* Learning
[[https://pomb.us/build-your-own-react/][build your own react]]
[[https://mmhaskell.com/blog/2018/10/29/purescript-iii-web-pages-with-react][making wbepage with purescript and react]]
[[https://pomb.us/build-your-own-react/][build react from scratch]]
[[https://github.com/pmndrs/react-spring][️ A spring physics based React animation library]]

[[https://nitter.net/soapdog/status/1306187476969705473#m][soapdog (mastodon: @soapdog@toot.cafe) (@soapdog): "my wish for the 2020 #web: ✨ MOAR BROWSERS: I want new smaller beskpoke user agents. Stuff that puts out innovative UX and pushes the web forward. ✨ VANILLA IS THE NEW REACT: fuck frameworks. Lets go back to basics. JS is pretty capable and all that most webapps need. 1/" | nitter]]

[[https://mobile.twitter.com/0xca0a/status/1315217887305621504][Paul Henschel on Twitter: "the flower offering of spains zaragoza festival has been recreated online for safety reasons. this was made in react, react-three-fiber, gltfjsx (declarative assets) and use-cannon (physics). congrats to whoever made it, sad cause, but you can be proud of yourselves! https://t.co/33A2fq31zu" / Twitter]]

[[https://joshwcomeau.com/performance/embracing-modern-image-formats/][Using WebP images with React · Josh W Comeau]]

the best way to handle react forms: https://react-hook-form.com/get-started
https://usehooks.com/: react hook recipes!!
https://github.com/ruvkr/react-components-by-ruvkr: mobile responsive react components!
https://github.com/DustinBrett/x: react based desktop environment in the browser
* Demos
https://www.reddit.com/r/reactjs/comments/k4u4fj/demo_of_morphing_talking_bubble_on_codepen_built/: morphing designs on codepen!
https://www.reddit.com/r/reactjs/comments/i2t2ww/pull_to_refresh_velocitybased_morphing_svgs_with/: velocity svg manipulation
https://www.reddit.com/r/reactjs/comments/ixjngh/trying_something_different_for_my_portfolio_what/: portfolio chat bot!