Echo JS 0.11.0

https://react-bootstrap.github.io/

#1 portions are dated and overly simplified, the browser DOM has seen a lot of significant improvements, and so has React...

#5-4 JSX is *not* complex at all imho... some developers don't like it, and there's a heavy overlap with developers who don't like JavaScript in general, or like tech in different files or prefer general templating DSL.

#9 part is demonstrating CommonJS vs ESM ... the other is React's legacy interface VS class based inheritance, which is supported natively in all modern browsers (though JSX isn't without transformation).

#10-2 React supports both SSR and client

#12 ignores functional components

#13 doesn't explain functional components

#16.1 is wrong, state isn't received from the parent (not to be confused with state initialized from prop, or context)

#16.5 likewise with 16.1

#16.6 both no, you can send a function/event handler for child to bubble out, or use context.

#18 fat-arrow is a JavaScript thing as of ES6, not specific to react.  It is a context bound lambda expression.

#21 neglects functional component hooks.

#23 unbound function

#25 example is just plain *WRONG*

#27 demo is wrong

#28 demo is wrong

... not reading beyond #28 ...

I've seen good, bad and ugly via dev.to, similar to medium.

Thin wrapper around puppeteer.

Changed URL to link to library directly.

TFA uses Contentful, a commercial service.  Which is against the rules, strictly speaking, but the content in the article is useful, so I added a [PAID SERVICE] tag in the title instead of outright deleting the post.

Additional reading "The 12 factor app" https://12factor.net/ part 3.

Beyond this, TFA fails to mention you should have `.env` in your .gitignore file and *NOT* check this into source control.  Generally speaking, I will create defaults that will work without a .env file locally if possible.  I will, however, create `.env.template.env` and `.env.dev.env` files.. the prefix is to keep them together, the suffix is for my editor's plugins.  The template version, I have setup for string replacement for CI/CD integration in a non-container environment... the dev version is for local development, with non-secure resources/passwords etc that are only for local dev.

Here's some boilerplate that I am using.

https://gist.github.com/tracker1/7fd48e818f3b80c8266f04029e989f59

Relatively thin article, mostly on how to use ServiceWorker for caching/offline use... other things to look into as a followup are online/offline detection and local-remote data sources.  May also want to look into pouchdb and other options for data syncing.

Aside: haven't looked into it... but have wanted to try to get a couchdb setup or proxy where there are read-only data sources that cache locally, and read/write data sources that sync per-user via couch/pouch.  Of course there's also other potential issues depending on use case.

#4 favor async/await and Promises in any modern codebase, this has been in Node for a while without a flag.

#5 is express specific... aside: if your API is meant explicitly for your front end, I would reverse proxy a slice for `/api` from your front end host if you can.  This does mean you won't be expressly static-only for the front end, but you do avoid a class of headaches and can do other stuff such as SSR, donut rendering and other caching or output customizations.

Still more of a fan of dokku on Digital Ocean, Linode or similar for smaller/personal projects.

Using a $15/mo droplet on DO, with a 100GB volume and backups ($28/mo) and it handles half a dozen personal projects with room for more.