Challenges I have faced learning React
2020-07-04
I faced many challenges when learning React which I had to learn starting a new job that I started in 2018. I wanted to go over my learning experience, and I tried to review commit logs to get an accurate timeline, instead of relying solely on my memory of the timeline.
TLDR: If I were to take away anything from this
- "pairing" (not strictly pair programming, just meeting with other people at structured times during the week) was useful especially as a remote worker. My coworkers may not have truly known how many misunderstandings I had, but it still helped me feel less aliented.
- reading the book "Learning React" was very helpful, it helped provide some mental structure that reading blog posts on the internet could not.
Also stay patient, stay thankful, and try to focus while you learn
#Introduction to me
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.
#My new job!
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. I fly into Berkeley for a single day to sign HR paperwork!
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.
I was also working on some 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 nothing sunk in.
Sidenote: I had actually tried out React in 2016 and was very confused at that time too, I had a bad taste in my mouth about React entirely! See Footnote 1.
#I am floundering...not understanding what's going on with the rewrite
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.
#I try and make an honest attempt to get involved in the project
On January 10th 2019, I make my first commit to the rewrite by doing some monkey-see monkey-do type coding. 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.
I also suggested that we start doing pair-programming sessions. Once I started doing this, meeting weekly with my coworkers, it made a huge difference for me in learning how to code. The things we discussed in these sessions often still went way over my head due to how my coworkers presented stuff or how much they assumed I understood. Nevertheless, these were extremely helpful for me to help get caught up.
#Reading "Learning React"
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). Also, with the book, I could focus, not have distractions, etc. My eyes would just glaze over every time I clicked on internet tutorials. I did not try to live code any of the examples of "Learning React", I just read it as is before bed.
#Applying lessons to work is still a slow going process
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.
#Trying out Typescript
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".
#Using React hooks
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 had examples of pure function components, but was written pre-hooks. With hooks added in React 16.8, it took a little brain exercising, but I understood how hooks can be applied to function components.
#Using react-testing-library
In 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.
#Conclusions
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.
#Footnote 1
I also 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 code and 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. TLDR: I was not aware of what a controlled component was.
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.
#Footnote 2
Why did I have such a poor grasp on React? 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". EDIT: 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
#Footnote 3
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. EDIT: the new beta.reactjs.org might be useful, but again, the book is what really helped me as it was less ADHD-inducing than the web