Upskilling to React

Getting a good grasp of TypeScript (JavaScript ES6+) fundamentals

React is more a library than a batteries-included framework such as Angular - with all it’s Angular magic!
It’s just a load of functions within functions - plus a bit of JSX (JavaScript XML - a JS extension that allows you to write JS and what-looks-like HTML in the same file). A glorified templating engine written by FB/Meta. As such, knowing your way around JS (ES6+) really helps.

Resources

• ES6 for Everyone (This one is the best I’ve found so far and is recommended by one of the bods at the core React team/ inventor of Redux (for his sins!), Dan Abramov).

• I’m yet to find a TypeScript tutorial that hasn’t put me to sleep.

• JavaScript With Syntax For Types. is the go to place for info - it has a “playground” too. Yay!
  Because TS is a MS thing, VS Code editor is particularly good at helping with types so I tend to rely on this and Google while I’m working on TSS. I’ll try and dig out any other resources I use.

Learning React core fundamentals (without all the other additional libraries)

The new React docs are great introduction to React without worrying about all the additional libraries we bring in to TSS to complicate things!

Resources

1. Quick Start – React (still in beta but completely rewritten and covers most things we’ll need to worry about re TSS)

Tackle other libraries in isolation (where possible)

Aside from my lack of JavaScript fundamentals knowledge and TypeScript shortcomings, most of the issues I have with React are not with the library itself but the interaction with the libraries we bring in to do certain tasks (e.g. AWS Amplify for Auth, Formik to handle form composition/state etc., Redux (Redux Toolkit) for global state, Axios for API calls, React Router for page routing etc, etc., Material UI for components such as Autocomplete).

When trying to get a better understanding of React + another library, I either add a temp component to TSS or spin-up another https://create-react-app.dev/ to play around with things.

Resources (docs- which tend to be the best resource. Each library’s GitHub issues section is also a good resource for real-life dev angst/ solutions)

• AWS Amplify (Auth comps) - Authenticator | Amplify UI for React , Amplify JS API Documentation

• Formik (forms) - Formik

• Redux (state management) - Redux Toolkit | Redux Toolkit

• Axios (HTTP client) - npm: axios

• React Router (page routing) - React Router Official Documentation

NOTE: No particular order to the above. The only advice I can offer is that the more comfortable I’ve become with JS/ TS the easier I’ve found working with the React library.