How I learned ReactJS

About me

My name is Ome Sanni and I live in Lagos, Nigeria. I am Full Stack Software Developer and I primary use Javascript. I enjoy web development and I have extensive experience in using javascript and frameworks like AngularJS and ReacJS to build web internal and customer-facing web application

Why I wanted to learn ReactJS

As at 2016, I was still using Angular 1 but I had been reading articles on ReactJS. I decided to learn it because it seemed much simpler and lightweight when compared to angular and I loved that React made use of components which made code more reusable. I also loved React because it forced me to write pure javascript whereas with angular sometimes it felt like I wasn't writing javascript. Angular had its own custom API for most things you can do in javascript e.g. $timeout, $http etc. If felt like Angular sheltered me from core javascript but with React I find myself exposed more to core javascript.

One of the issues I had with Angular was that as applications grew in the features, I noticed that the app UI got slower due to the digest cycle that is always watching for change in scope variables. With React this is not the case as it makes use of virtual DOM that makes updating the UI pretty fast.

I chose to focus on React over other frameworks like Vue.js, Aurelia et. al, because I found it much easier to understand and there were lots of resources I could use to figure out problems when I ran into any as the react community is pretty large. I also decided to focus on React because the job prospects just seemed far more than other framework .

How I approached learning ReactJS

I started learning React back in 2016. I started by using articles like scotch.io and codementor to learn the basics. I also used PluralSight to watch videos and I took beginner, intermediate and advanced courses on their platform.

My approach to learning React was to first focus on learning react without using some other architecture with it and then I proceeded to learn the flux architecture and after that I learnt other architectures like Redux and NuclearJS. I eventually settled on Redux as it was the most popular and I found it more easier to to comprehend. The last thing i focused on was tests.

Learning React wasn't hard but I found out while doing some job interviews that I wasn't able to explain some of React/Redux concepts and terminologies and so I had to brush up on that. During some job interviews, I also found out I wasn't following some React/Redux best practices. For example, I would call browserHistory push function in the actions file and I would call the dispatch function in my component. Through job interviews and talking with colleagues who were React experts I was able to brush up on a lot of the things I was doing wrong.

Challenges I faced

When I started learning React, I wanted to know what were the best practices in terms of structuring the app repository and just writing react code. The authors of the articles and videos I used did things differently and because the code they were writing was just practice code, they weren't really adhering to best practices. So, when I did job interviews I would follow the styles they used and my code was always getting scrutinized by the interviewer.

I knew then that I need to find a real react app to work on as this would help the understand how to architect a react app and just the overall best practices for writing react code. This what I need and slowly but surely I leveled up on these things.

Key takeaways

From this entire process, I learnt that I should have done my due diligence by looking for a real React project to contribute to or study so I can get a better and professional understanding of how React code is structured and written as well as the skills required of a React developer in the workforce.

Tips and advice

For those that want to start learning React, I would say start by going through the tutorial and documentation on reactjs.org. This will help you get an understanding of things like JSX, component and props, component life cycles etc.

You can proceed to use resources like scotch.io and PluralSight to learn architectures like flux and redux. You should look to learn about stateless components, actions, reducers, middleware, containers, webpack etc.