When I started a new job in 2018, I faced a huge struggle when learning React. It was a weird time, I wanted to go over my learning experience to share with others. I tried to review commit logs to get an accurate timeline, instead of relying solely on my memory.
If there are any takeaways or TL;DR's, they might be
Also stay patient, stay thankful, and try to focus while you learn
I am maybe what you'd call a front-end engineer. I have done web development for about 7 years now. I worked on a variety of front end and back end projects, including with Ruby on Rails, PHP, Perl CGI, Java servlets, and jquery/dojo client side JS. I am pretty steeped in the "jquery spaghetti" / mutable DOM everywhere era of things in my work on the frontend.
When I got a call about a new job in 2018, I was really happy and started in June 2018. They decided they are going to do "the big rewrite" and are going to use React. I start out as a remote worker.
Soon, my coworker starts building the new React app prototype. He keeps asking me what state management library should we use, but I had no idea about React still, much less what state management even is, and basically just was like "I dunno!". I had no way to form an opinion, because I didn't know React and why state management mattered. In my previous work, I used a lot of mutable DOM and jquery-ish concepts, and passed 'state' around in a ad hoc fashion.
I was working on stuff unrelated to the rewrite as the rest of the team started prototyping in React, and I remained pretty out of the loop.
We would have weekly meetings but I just wouldn't really understand the goings-on. I saw PropTypes, and mobx-state-tree model types, and class-based React components, but the discussions went over my head
It's December 2018, I go home for Christmas and I have an honest talk with my parents and tell them "I don't get what is happening in the new codebase, I'm honestly unhappy, and it just does all this 'React' stuff" but I can't explain React to them I just say the code is automatically reacting to other things.
My parents say "well if you are unhappy, you might have to leave your job!". They were not cheering for me to leave, but they understood that this wasn't really sustainable. At this point, it really hit me that I do like this job and I decided to try to focus on work.
On January 10th 2019, I make my first commit using React by doing some monkey-see monkey-do type coding. Note: monkey-see monkey-do is really powerful sometimes! I copy a bunch of files and just put them in the right place, tweak some lines, and start to figure out how to make things run. By the end of January 2019 I get my first code change merged.
In March 2019, I got the book "Learning React" (O'Reilly2017 https://www.oreilly.com/library/view/learning-react/9781491954614/) for my kindle.
Reading this book was a big help I felt, and provided a needed "brain reset" for me. The book worked well for me, I read it each night on my kindle. The book was good at showing how things like ES6 syntax like destructuring, arrow functions, etc help fit into the React ecosystem (I was still steeped in ES5).
With the book, I could focus, not have distractions, etc. When I would read internet tutorials, my eyes would just glaze over and I'd only vaguely absorb some terminology.
Note: I did not try to implement any of the examples of "Learning React", I just read it as-is before bed.
So anyways, work goes on, and I'm learning, but our codebase still feels pretty complicated and alien. React is one thing, but mobx is another.
I tried downloading the mobx-state-tree book but it goes over my head (https://subscription.packtpub.com/book/web-development/9781789344837/8/ch08lvl1sec47/an-opinionated-mobx-with-mobx-state-tree) and the way mobx is glued to React via mobx-react doesn't really click.
I remember asking my coworkers why my component was not updating and they eventually find out it's because I keep not using the observer() wrapper around my components, which is obvious when you understand the system but it stumped me as a learner.
In April 2019, I start to experiment with Typescript and release a Typescript version of some data parsing code. I start by explicitly specifying a lot of types but I eventually start getting into the zen of "type inference".
In May 2019, I try out my first React hook, a useState. It worked well. I couldn't really figure out why I would use it instead of using mobx for state management we used elsewhere, but the example was that it was a click-and-drag and it made sense to keep that click-and-drag mouse position state local to the component rather than the "app".
The book "Learning React" also helped me to understand hooks but only indirectly. The book, as I read it, didn't have hooks since it was written pre-hooks, but it did have examples of pure function components.
With hooks added in React 16.8 (released Feb 2019), it took a little brain exercising, but I quickly understood how hooks can be applied to function components.
react-testing-libraryIn June 2019, I was tasked with creating "integration test" level tests for our
app. We had none before this. I had used react-testing-library for some
components before this, but the integration level test I used
react-testing-library to render the entire "app level" component. I was happy
to pioneer this and try this out, and I think this has worked out well.
Some caveats: I got very caught up with trying to do canvas tests initially. I
really wanted to use jest-mock-canvas but we were using OffscreenCanvas via
a pretty complicated string of things, so I don't make progress here, and I also
got confused about the relationship between node-canvas and jest-mock-canvas
(they are basically totally different approaches). Later on, I find using
jest-image-snapshot of the canvas contents works nice (ref
https://stackoverflow.com/questions/33269093/how-to-add-canvas-support-to-my-tests-in-jest)
Other random note: when building out the integration tests, we got a lot of "act warnings" which were confusing. These were fixed in React 16.9 (released August 2019), but we had to ignore them while we developed on 16.8 and the warnings basically just confused me a lot and made it feel like I was battling a very complex system rather than a nice simple one.
Overall, I just wanted to write up my whole experience. It felt really difficult for me to make these changes. I also went through a breakup during this time, had a bad living situation, etc. so things were a struggle. If anyone else has had struggles learning React, tell your story, and let me know. I'd like to also thank everyone who helped me along the way. I feel like a much better coder now, yet, I should always keep growing. The feeling of uncomfortableness could be a growing experience.
Random aside but I had tried using React in 2016... but it was unsuccessful, but maybe for interesting reasons?
I was tasked with making a normal form with text input elements, and I wanted to try using React. I tried importing React via a CDN and gave it a shot, and it seemed simple enough, but I kept getting really confused about how to even read and initialize the value of a textbox for example properly. The idea of controlled components (not a word in my vocabulary at the time) was quite unintuitive and instead, I kept googling weird things like "two way data binding react" and variants of this. I had never used Angular but I heard of two-way data binding from Angular, and I just felt like it was what I needed. I even posted about my frustrations about this on the React subreddit and was downvoted. Felt bad. I was just really confused. I abandoned the project in React and just used our normal jqueryish thing.
TL;DR: I was not aware of what a controlled component was.
I can't exactly say. I feel like I was a competent developer, but I had some severe mental barriers to understanding the way React worked. I wish someone would have just told me something like "React is basically like functions that can return HTML".
I am not sure if I would recommend Learning React to all learners. I think it helped me, but there may be other options that work better for you. Look around and find what what looks right.
The new docs https://react.dev/ might be useful, but again, I think reading a book can be way less ADHD-inducing than the web.
I also recommend just trying out a fresh "vite" app rather than trying to bolt your React learning process onto any legacy code. You might struggle by bringing a lot of mental baggage along to your React learning process...start with a hello world example.
I wrote https://cmdcolin.github.io/posts/2022-11-20-the-react-tutorial-i-wish-i-had to try to explain some of the basics that I feel like could have been helpful for me