From Angular zero to React hero in 3 days
This post’s title is tough, I know. And it’s been years since I wrote a blog post. But after the transition I made in the past month, I felt that the things I learned and the conclusions I came up with could benefit other developers as well.
So, if you’re an Angular developer, and feel a bit frustrated since Angular 2 and above released, this one is for YOU!
Some background & context
It‘s been more than 6 years since I started to work with Angular, writing more than 15 different projects in all scales and usages. From internal utils for the company I worked for, through Common Ninja’s apps, and Chrome extensions, to Chatbot search engine.
Angular (1.x) was my favorite framework and it was a must dependency on every project I’ve been working on.
When people mentioned React, my comment was always like:
In the other hand, I knew the downsides of using Angular 1.x rather than React (TL;DR scopes, search engine indexability, performance).
Angular 2 realeased with new concepts. In fact, it was so new, that as an experienced Angular developer, I needed to learn Angular from scratch. But it’s ok, learning new stuff is my thing…
I took an idea of developing an open source tools for managing RESTful APIs as an opportunity to learn and adopt Angular 2 as my default framework in new projects. However, in Angular 2 the learning curve is extremely shallow— so slow, that after mastering Angular CLI, and components, I learned about input->output, dependency injection, ReactiveX, and more — and it made me forgot what I learn about components, and CLI so far.
The fact that this was a side project didn’t help, since the timeframes I had while developing it was 2–3 weeks. So every time I had to develop it, I needed at least 30 minutes, give or take, to get use to the code and start writing some new one.
And then came React
A month ago, I started a new job at Microsoft. My first assignment was to learn React for a project we’re developing.
It took me less than 3 days to start writing production code with React, and here’s how I felt afterward:
For all of you who still afraid to make this transition, here are all the tutorials, videos, articles, and resources I used to learn React in 3 days.
Day 1 — Core
Not surprisingly I dedicated the first day to learn React basics. Here are a few resources that helped me. Personally, I really like Egghead’s video tutorials, and learned Angular there as well.
- Start using react to build web apps
- Build you first production quality react app
- Add routing to react apps using React router v4
Day 2 — Dig deeper
In the 2nd day, I wanted to understand how React works, my project’s structuring options, and how to write good, reusable, and performance oriented React code.
- How to better organize your React applications
- Understanding React component lifecycle
- How Virtual-DOM and diffing works in React
- ReactJS: Props vs. State
- Presentational and Container Components
Day 3 — Redux, debug, test.
I heard so much about Redux, and almost all tutorial/article I read people mentioned Redux as a must have in a React project. In addition, I wanted to finally start developing. So the next resources I looked for was about debugging and testing.
It’s pretty much it. I found those resources enough for starting developing with React.
Obviously, there are plenty of other resources out there. If you have some specific recommendations, be sure to share in comments!
Bonus: Here are a few epic React/Redux resources repositories I found, with anything you could think of (and even more):
- https://github.com/enaqx/awesome-react
- https://github.com/markerikson/react-redux-links
- https://github.com/ericdouglas/react-learning
Happy Reacting! :)
EDIT: More resources for beginners — added by this article’s readers:
- Reduce React App Size in Production https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a
- List of React UI Frameworks
https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651 - Long list of components for react
https://github.com/brillout/awesome-react-component - Organizing Redux applications
https://jaysoo.ca/2016/02/28/organizing-redux-application/
