This will be a short article highlighting my experience as an Angular developer tasking himself with learning React in a month.
In June of 2017, I was laid off from what until then had been my dream job working as a UI engineer for Tesla. I don’t want to focus on that, but it should be noted that this is why I had some time on my hands and the need to further my skills by learning another framework.
Why did I feel the need to learn React?
I had made a list of all of the companies I could see myself working for. All of them, FTMP, used React. I had done my homework and the way I saw it was that if I limited my interviews to only those looking for Angular developers I would be removing many of the companies I wanted to work at from my list. I wanted to be able to apply as a front end engineer, not as an Angular or React developer. When it came time to talk about what they would be using (in almost every case it was one or the other) I knew that I could intelligently hold a conversation about each framework and work in either framework.
Being in the San Francisco Bay area, I am close to all of the good meetups and events, so I attended more React meetups and started working from home to learn React from the ground up. I wanted to push myself to learn React as well as I knew Angular. I was amazed at how easy and approachable React was. I also understood within a short time that React was going through some growing pains and on the horizon would be some changes that would not only change the way React developers write their components, but these changes would be a major evolution in the framework.
I wanted to start by learning the basics of React, from a test-driven perspective, for this reason, I started my learning of React with Test-driven Development Using React by Chris Minnick. Since I had the time, I thought it was super important to learn React from a test-driven perspective or at least try. It was easy to follow this course along and afterward, I feel confident that I could implement unit and integration tests into most of my React code. I also think it’s important to be comfortable with whatever the default testing patterns are for each framework from the beginning.
The two frameworks do differ from each other, but also from a UI perspective, they have a lot in common, most of the things Angular gave me as a UI engineer, React also allowed me to do, just differently.
In Angular, if you have the CLI installed, Jasmine and Karma are used respectively for out of the box testing. In React our equal to the CLI is create-react-app and the easiest way I found to get started testing and what most people used was is Enzyme and Jest. So this course was helpful in explaining the installation and use of those tools in React.
I was well on my way to feeling great about learning React, so eager and confident that I wanted to make Redux the next thing I learned. As an Angular developer working for several large companies and seeing how they fell into bad practices often by not managing state correctly I wanted to put this as top priority, but I knew it would not be as easy as just jumping into Redux. I forced myself to learn a bit of reactive programming first, working with filter, map and reduce. I practiced these concepts in vanilla JavaScript just the same as when I learned how to implement the Flux and Redux patterns.
Using plain JavaScript to learn these concepts I think is the most important thing you can do when learning state management. Because the patterns you learn should be able to be taken to Angular, React or Vue or any other framework or library. having an understanding of these concepts outside of your framework of choice ensures that your understanding of the technology is not confined to one way of doing things.
With all that being said, I’m not sure if I would take Redux to Angular, because I think it’s easy to translate what I know about Redux into working with technologies like Ngrx/Store and I think that there are huge benefits to using that in Angular, but I definitely realized that it would be totally OK to use Redux with Angular and knowing that I could decide one or the other because of my new-found knowledge of Redux empowered me as a developer.
To be honest, I am still very much in the middle of learning state management and figuring out how to best use Redux and React together, I know this will be a long journey that will take some time to get better at, but I found great courses to get me started at Egghead.io and Pluralsight:
Getting Started with Redux Redux Fundamentals Advanced Redux
If I had to recommend one of these courses for someone beginning their journey into React and Redux, it would be the “Getting Started with Redux” course linked above by Dan Abramov (the author of Redux). In fact, I would recommend the courses above in the order that I listed them and I would also note that there are other really good Redux courses outside of Pluralsight, but I also know that a lot of people have access to Pluralsight through their companies by way of a free subscription.
I also want to note a few free courses for Redux, I’m a huge fan of Traversy Media’s YouTube Channel and his Redux course is FREE.
In fact this guy has a lot of great content on YouTube and a cool Boston accent to boot.
I would also recommend Free Code Camp as they have a tonne of free web content including lots of stuff on React. I know there is so much out there, some if it may be better who knows, but at least you have some ideas of where to start looking for paid and free courses.
So with more work to do on the Redux side, I still wanted to learn one other subject to ensure I could get started in React building my own applications. I was going to need to learn routing, luckily Egghead.io had a great course on that.
Add Routing to React apps using React Router v4
This is a great React Router 4 starter course and his teaching style is on point and fast-paced, super concise at the same time. I love the way that he takes you step-by-step through all of the different variations of Links, NavLinks and Router configurations you will need to know.
It’s great to have knowledge of how to work with other JavaScript frameworks. Who knows you may actually get converted in the process. Especially for me as I interviewed for jobs this summer, I needed to know that if I had a good job opportunity working with React, that I was just as up to date with it as I was with Angular. In the meantime, I have also learned a great deal about JavaScript and new features that React takes advantage of when creating components and how easy this makes it to work with the router and just getting a basic app off the ground with minimal code.
I have created a repo that uses react-router-dom if you would like to clone it and see how easy it is to use.
https://github.com/httpJunkie/create-react-app-with-routing
In the end, I not only found a job working with React, but for a company that was also new to the React space and I would be able to join up with them and create content around using React from a beginners level perspective and to grow as a React developer and teach their customers how to use React and their React related component libraries. So I get to continue that learning (which does not feel like work to me), take time to learn the bleeding edge of React and also build cool demos and web applications to help others learn and promote our products. This company is Progress and I work for their Telerik Team to advocate on behalf of the React community and their KendoReact component library.
One of the areas I would focus on in the Telerik blog posts I started writing was React Hooks. I started writing on the subject and it’s really a feature that I believe and so does the React team, that Hooks will usher in a new way of building components and composing them together in a more functional way.
Fast Forward a few more months into my journey into React and I would also go on to take another React Fundamentals course React Fundamentals by Tyler McGinnis which I’m still working through, you see I went back to the fundamentals after I had started learning about Hooks, the reason is because I was learning much about the new way of doing things and my new job would require me to teach these concepts, but I didn’t want to put myself in a position teaching about Hooks if I didn’t fully understand what it was Hooks was replacing. If I was going to make an argument about why Hooks were amazing and wonderful I needed to be able to explain in detail why the new way was the same or better than the previous ways of doing things.
Have a great 2019 and keep learning about JavaScript, we all know that to stay relevant we have to keep learning constantly, so find a way to make that fun and enjoying!
