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!
Top comments (5)
The best way to find out if they use the sloppy module pattern or if they have banana monkey jungle package bloat, is to npm install them yourself and take for instance the input component out for a spin.
Try the switch, here is the documentation:
telerik.com/kendo-react-ui/compone...
I would love to hear any feedback here or you can reach me at @httpjunkie , and I can't do my job which is give feedback from the community directly to our engineers unless I actually get some feedback.
I hope you don't see any monkey business going on. But if so, please report it directly to the Head Chimp in charge, ... or me!
Cheers, Eric, always good to get some insight into transitions like these. While reading, though, I was surprised you didn't mention Mobx-state-tree, which I understand to be better than Redux. I've read this so many times now, it seems like fact (my friend just wrote a Chrome plugin and used this, coincidentally). Have you looked at this at all? If you decided not to use it, could you give some insight?
Here's a couple of links I just googled for anyone who needs a quick overview:
reddit.com/r/reactjs/comments/79kn...
news.ycombinator.com/item?id=16918675
The reason I didn't mention Mobx is not because I think one is better than the other.
Here is what's important when writing for beginner level audiences. In technologies like React, where I'm trying to advocate for patterns and practices usage, I need to talk about Redux. It's the most widely used and in fact Hooks are directly related to how things are done in Redux. Now my mom has her own fork of Redux, so does Bob down the street, but I didn't mention their forks of Redux.
As well, there is a library called MobX which you mentioned, that is an alternative to Redux, in fact, it's like Redux, but better, I know because you showed me the proof on Reddit.
The average reader especially if not up on all the latest technology will be confused, stressed or maybe even turned off if I mention too many different ways to manage state.
Redux and now hooks are a gateway drug into the state management world. let's let them get their feet wet here and then we will do the "But what else is out there" blog post. As I don't even think I am ready for it yet.
BTW, my mom doesn't really have a fork of Redux. But my friend Bob does. And I hope me being cheeky didn't come off as rude, but I do believe that MobX vs Redux is really a personal or team preference and I feel it complicates an already complicated task of learning the basics of React.
I did the same with react and vue when I was out of work. Learned both In 6 months and wrote a few projects. No company wanted to hear that I learned it on my own and didn’t have at least 3 years production experience in it, even though I’ve been writing javascript for 18 years. I even had one ask for a senior vue dev. When I asked why constitutes a senior vue dev the answer was someone who had been working with vue for 7+ years. I said vue was released in 2014, 7 years have not passed yet! I’m not saying don’t learn. I’m saying expectations are less than sane!
Thanks a lot, it will help me too !!