Share in a reply what concepts you had to work on to get them to stick and what resources helped you get over the hump!
This isn’t technically React, and, standard disclaimer - I highly recommend learning React on its own before learning Redux! - but Redux was a struggle for me at first. I wasn’t great a functional programming stuff before I got into React, since I really had no opportunity or reason to use it outside of school… and Redux was very FP-oriented, with the reducers and the emphasis on immutability.
I used Dan Abramov’s Redux tutorial and approached it in phases.
I watched the lessons, sorta-kinda got it, and then stepped away for a few days. When I came back, I re-watched the lessons and coded along, and it started to click, but I still had no idea how or why it paired with React.
I remember spending a few days mulling over the concepts, which I thought I understood at this point. I’d get excited at possibilities of how it could help in a React app, try to reason through how it would fit together, and then I’d just kinda lose the trail. All the moving parts… it took some time for my mind to make sense of it. After a couple more false starts, and building a couple tiny apps that used React + Redux, eventually it clicked for good.
I’ve had a lot of problems with effectively testing my React applications.
In most of the apps I ended up writing unit tests that were mostly checking whether React works properly and guess what - React has its own unit tests, I don’t have to do that
Refactoring components was a hassle. Ideally your tests shouldn’t be affected AT ALL if you modify your component (while keeping the same API and the rendered UI).
That’s why I’m a huge fan of the courses and lessons that egghead has on both React Testing Library and cypress.io, they helped me A LOT.
I wouldn’t call myself a React Developer because I still struggle with the concept of nested components and having to pass data through multiple layers to a inner component. It feels alien and unnecessary.
Its odd because I don’t struggle with the same concept in Vue - partly because Vue is much more prescriptive about its structure and approach and Vuex makes state management easy.
And then there is the multitude of extras that seem to go along with React, partly because React doesn’t have a standard for Router, State Management etc from what I understand.
Shall we talk about webpack? No let’s not talk about Webpack
Ok enough moaning - what for me personally would be ideal - a basic CRUD application with a simple login thats hitting REST API for data. Be realistic with the example but not overwhelming, be opinionated with any extra libraries but in the end if I can build a secure CRUD app then I have a foundation to build on.
One of the big struggles for me was when to use state vs when to use props. I found myself passing in props to a component and directly converting those props to state. This makes it so you have to keep props and state synced which can be a real head ache.
Understanding component composition really helped me solve this problem:
Another big one was learning react hooks. They are conceptually different than class life cycle methods and you’ll get into some trouble if you try to map the lifecycle methods directly to hooks.
egghead has quite a few courses on hooks