Learning React: My Experience

Muhammad Yousuf
2 min readSep 5, 2023

--

Introduction

This was my first time developing a project with a frontend framework, and I had very little experience with it. I didn’t want to get stuck in tutorial hell, so I developed the app alongside what I was learning in the React Course. However, this approach had its drawbacks. A lot of times, I used an inefficient way to develop a feature, which slowed down the website, causing it to re-render multiple times due to the automatic rendering feature by React.

The Struggle

After completing the entire frontend, I had to re-code entire sections of the website until I was satisfied that I used the efficient method. This process taught me, in a practical and difficult way, the bad practices in React.

The auto re-rendering feature was very hard to wrap my head around, and it took some time before I could grasp this concept. Additionally, breaking down every component into a separate thing in React was initially very confusing. To better understand how to separate different components and not jam everything into the same file, I had to go back and draw a tree diagram. This helped me understand how the components should be structured.

It was difficult for me to understand how the virtual DOM works and how it can improve performance. I had to read many articles and watch several videos to finally understand it.

Another challenge was learning how to handle state and props. I didn’t understand the difference between them, and I didn’t know when to use one or the other. It took me some time to understand the concept, but once I did, I realized how powerful it is.

Writing JSX syntax was another challenge for me. At first, it felt like writing HTML, but then I realized that it’s not just HTML. There are some key differences, and I had to learn how to write JSX properly.

Conclusion

Overall, my experience with React was challenging but rewarding. By struggling through the difficult parts of the learning process, I gained practical knowledge that will serve me well in future projects.

--

--