16
votes
React: Some comments from a beginner
New job. I've been wanting to learn something new for a while, so I took a project where a lot of React is done. I'm learning it from scratch while I work with React.
I have some comments about it.
- React makes front end work a lot more like programming -- I like that!
- Javascript has changed a lot, and for the better, since I last used it over a decade ago.
- The React-Redux tool kit is the bomb. It should be integrated/absorbed into React. I can't see any reason not to use it, even for small applications as it is less wordy wherever you use it.
- The updating of state values should be more automatic, especially for flag variables not tied to GUI components. It is the major source of hassles with React
- Udemy React videos. My company makes them available free of charge to employees. I've sampled videos from a number of courses. I'm not a fan of the instructors showing you how to do things in older, less efficient ways first in a learning/demo project, the ERASING that code to do it a better way. The should include copies of the project at each stage if they do that. I finally figured out that the best way to take notes I can use later is to comment out the old code and put the new more efficient next stage stuff on top.
- React tests really need to improve. They are often more time consuming than the code itself. The tests have forced me to change my code or do needless testing to get the tests to pass. I had one situation where no matter what I did React test said I didn't cover the code until I broke an else clause off into it's one if clause. Blech.
All in all I've been enjoying learning React. It is neat new ( to me ) thing.
I feel sad that I will likely forget it all when I go back to my specialty language.
Just curious, what rendering library are you using for React tests? If it's Enzyme, consider switching to React Testing Library instead as Enzyme is basically unsupported/unmaintained at this point. I also find RTL's test assertions and getByText utils very handy.
I've been using the react testing library. I haven't had time to learn other things.
I dread writing the tests! :-)
More complicated and more work than my projects.
I test what I code and I have the QA team to do that as well. The react tests seem kind of pointless to me at this point which would be bad enough if they weren't also a burden.
Writing frontend/UI tests is more of an art than a science. The thing to ask is: what is your goal with the test? Is it to catch UI regressions, or test conditional logic/rendering, or test click UX, or something else? That determines what kind of assertions you need to write and why.
If you just want a basic "something rendered", you can simply use snapshots. I'm not a huge fan of snapshots as they're typically brittle and frequently not actually looked at by devs, but they're not bad to have for a basic "it renders" test.
To be honest, if you're doing heavy UI or pattern testing (e.g. this style rendered with this prop) you're better off with Storybook or visual regression screenshots, but I doubt you need that level of fidelity or confidence this early on :)
Josh Comeau's Joy of React class is amazing. If your work will cover it you should absolutely do that!
Can you explain this a little bit more? What exactly does not feel like "programming" about frontend? (If you mean framesets and tables for layouting then I agree...)
What is your specialty language?
As a somewhat beginner with React, I agree with almost everything you've said, especially with javascript changing a lot over the years. My last usage of javascript before learning React and Vue was also about a decade ago, where I was just use jQuery.
I think the only thing you said that I felt differently about is that I like the hooks model a little better than Redux, at least for smaller applications. I'm actually surprised you found it to be less wordy. I found Redux to be far more verbose than hooks, and didn't really see a great use for it for my use case.
I think the Redux toolkit is less verbose, less unweildy, than the React context and native reducers.
I like having a global state ( sounds fascist, hah hah ), the sort of equivalent of a "session variable" in web language to just put things in and the React toolkit, so far, seems to make that more straightforward.
Just clarifying what I meant.
Maybe take a look at Zustand. I've been using Redux for years before I discovered that one, and now there's no going back. For me at least, it hits that sweet spot between being lightweight, flexible and intuitive.
I find that you don’t need much manual state management for apps if you use a good HTTP caching library like SWR.
Agreed that I've found Redux overly verbose, but I'm not often working in very complex app-wide state. For those who are, check out Kea.js, which is a nice layer on top of redux that makes reading and writing it far more hook-like!