react recommendations for new users

react-recommendations-for-new-users.md

Do you have any good react start up guides you recommend?

My take,

The documentation on hooks is very helpful

• the fact that it is not the default when you go through the react docs is kind of frustrating.

https://reactjs.org/docs/hooks-intro.html

^ I would read through 1-8

Resources that I use regularly:

blog-posts from:
log-rocket, kent c dodds, or tweets from dan abrimov.

The only thing that is super helpful to know with react class components is
an understanding of the lifecycle methods and how rendering works in react:
https://reactjs.org/docs/react-component.html

Which has this document:
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

For the most part with react hooks the most used hooks in a project are often
useState, useEffect and useRef

Good kent c Dodds articles

The virtual dom diffs the actual dom and determines what needs to be committed

https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render
The "render" phase: create React elements React.createElement (learn more)
The "reconciliation" phase: compare previous elements with the new ones (learn more)
The "commit" phase: update the DOM (if needed).

https://kentcdodds.com/blog/react-hooks-pitfalls

Regarding the front end framework landscape:

React is definitely a good language to start with,

Even though it is like the wild wild west
everyone does their own thing.

React is simple, but here are some helpful patterns to use:
https://gist.github.com/MichaelDimmitt/3755fc011e4404411b02d0c17cb029d6
https://gist.github.com/MichaelDimmitt/6534f9e91183dba9825ede604e064394

Testing

logic tests, (often these are unit tests)

• testing functions with different inputs and expecting certain outputs.

Render tests:

• Rendering component trees in a simplified test environment and asserting on their output.
  https://reactjs.org/docs/testing.html

Some example tests that I reference:

https://gist.github.com/MichaelDimmitt/6a6bb229b6b4295dd29afe57749dbd93
^ most of the tests I write are very similar to this template.

helpful intro talk:

https://youtu.be/eg_TFYF_cKM?t=122

currently I am looking at testing with time zones:

https://bengry.medium.com/testing-dates-and-timezones-using-jest-10a6a6ecf375

Part 2

Conceptual javascript video, event loop

• promises + async side effects. https://www.youtube.com/watch?v=8aGhZQkoFbQ

Some links / videos

https://www.youtube.com/watch?v=Wm_xI7KntDs&ab_channel=uidotdev
https://kentcdodds.com/blog/react-hooks-pitfalls
https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render
https://www.youtube.com/watch?v=KWh-9-JIUAQ&ab_channel=KentC.Dodds

The kent react performance workshop

Touches on a lot of items we consider when building a react app
https://youtu.be/aXVpX7eRRd8?t=349

Warning webpack zone: feel free to ignore

Javascript performance considerations (addy osmani)
https://www.youtube.com/watch?v=X9eRLElSW1c

10k or bust talk (from 2018)
https://www.youtube.com/watch?v=7OcYgDmrJd4

Stuff covered in 10k or bust talk:

1. bundle size configuration
2. network throttling
3. babel preset configs
4. lazy loading / tree shaking, back when lazy loading was new 😄
5. more stuff

some slides on css that people enjoy
https://docs.google.com/presentation/d/1-cCZS6v54BGjq9vzvo3gWuH3UOQvi9AB1ewXoosVxj8/edit?usp=sharing