A Tale of a React Newbie

When I first started working, I was almost completely new to React. I had only attended a few half-day courses during my years as a student and I was now assigned to a complex project written in React. However, some parts were written with modern React using Hooks and some parts were written with an older version of React.

I had no idea what Hooks were when I started out, and it didn't help that I couldn't tell the new and old React code apart. But, with a guiding hand from my colleague, we jumped right into it and started pair-programming on smaller tasks such as “Add a new button” or “Create a new filter”. These tasks were easy to start with, because I could study similar code from other places in the application and try to replicate the logic. Along the way, my colleague and mentor explained concepts such as hooks and components. I also used the React docs actively to better understand the theoretical concepts that were introduced to me and wrote down key takeaways from our solutions.

Next, we began refactoring older React into modern React. This helped me understand how Hooks work, and how they are actually used. It was mind-blowing to see how many lines of code that could now be replaced with a simple Hook. My experience with this approach was good. Because, after spending some time coding new functionality and at the same time trying to learn a new language, it was nice to focus more on syntax and understanding the different versions of React.

So far, my approach has been to dive right into a problem and use React to solve it. However, it is also possible to start with a beginner’s course, such as this workshop (in Norwegian). Here, you will work through different topics and solve small tasks related to that specific topic. This approach might give you a better theoretical understanding of what it is you are actually coding.

Online courses and workshops usually present the theory behind a concept before you’re supposed to implement it. This differs from my experience at work. Sometimes I didn’t understand that I had learned about certain React concepts already, simply because we had not discussed the concept of what we were implementing. For instance, my colleague and I would write a Hook to store some component specific state, without ever mentioning the word "hook". I knew what we were trying to achieve, but I didn’t understand at the time that useState was the Hook that I had read about earlier. An online course would probably present the theory before inviting me to try to implement the Hook.

Personally, I learn best by reading and writing, and not just by viewing and listening to other people explain things to me. I have previously tried lectures and online courses with other technologies, but my experience is that I generally don’t really learn what I am supposed to because of the lack of repetition and experience. So, pair-programming with a more experienced colleague has been great. I feel that I can challenge myself and try what I think is a possible solution. At the same time I have my colleague beside me who can give me small hints and explain when I stumble across something new.

As with anything that you are trying to learn, I recommend that you reflect on which learning style suits you best. If you would like to just dive right into a project like me, but you’re unsure of where to start, this page can be useful. And if you’re the type that likes to start from scratch and have small explanations for everything you do, maybe some of these workshops can be useful:

• React and TypeScript
• Animations in React
• Testing React apps

So, am I a professional React coder now? Absolutely not. But I do know what a component is, I am more comfortable with using Hooks, and I am not completely lost when I have to solve a problem on my own in a never-before seen file in our project.

Going forwards, I would like to focus on better understanding the theoretical concepts behind my code, so that I can make more conscious decisions when developing. I also hope that I will feel confident enough in React to be able to help my new colleagues that will join our project next year! Maybe one day I will even understand what the ReactDOM really is 🤷‍♀️