Hey! Welcome to this blog series, where I introduce React for Angular Developers.

The goal of this series is to teach React (using Next.js) to developers with an Angular background: at the end of this series, you will have enough knowledge to port an Angular application to React.

Whether your goal is to expand your horizons as a developer, train for an upcoming job, or simply switch sides, this series will help you transition to React and its ecosystem as simply as possible.

This series will focus on the following topics:

1. Introduction - why React
2. Folder Structure and Conventions
3. JSX
4. Hooks
5. HTTP and Async Requests
6. Dependency Injection
7. State Management
8. Performance
9. Testing

The above is a draft and will likely change in the future. Each topic will be compared to its counterpart in Angular.

An Angular developer learns React

I've been a (primarily) Angular developer for a long time. In part because I worked in Financial Services for over 4 years - where Angular is a very widespread technology.

Angular is a framework I like for many reasons: its extensive use of well-known design-patterns, RxJS, standard and familiar codebases, etc. As a freelance contractor, it was a breeze: it was easy to get cracking quickly on any new job and get the work done well.

Despite that, I have never been a fanboy - and the desire to learn new things have always been intense.

While always fascinated by the React world, I only started seriously learning it out of need: I wanted to build a Shopify app, and as a first-class technology in the Shopify ecosystem, it was a no-brainer.

Why React?

There are many good reasons for wanting to learn a library as widespread as React, especially if you are a freelance developer, where landing new contracts is necessary.

For example, you may want to:

• Expand your knowledge as a Software Developer, learn more patterns and paradigms
• Being able to land more job opportunities
• Being able to write applications for marketplaces, such as Shopify's

Let's expand on each of them.

Expanding your knowledge as a Software Developer

Learning React can indirectly make you a better Angular developer, too. Why?

Expanding your horizons as a software developer is crucial to pushing the boundaries of your knowledge. Of course, learning a specific topic is very important - but the risk is being constrained by its echo chamber.

Maybe it's an unpopular opinion, but learning React can help you expand and add creativity to your Angular knowledge.

Discovering new patterns, techniques, best practices, and possibilities could help you grow more as a developer than keep focusing on one specific technology.

Another overlooked reason is that while React is very widespread, it's not impossible to see companies move from React to Angular or convert some code from a related codebase.

These migrations are rare but possible. I have worked on one myself. Knowing React would give you an edge in this sort of situation.

Landing more job opportunities

The React job market is vast. Like, really vast.

React is undeniably the most widespread front-end technology, and learning it can significantly expand your job opportunities outside of the Angular world.

With that said, it's also true that there are more React developers than Angular ones, so competition is also higher.

In my experience, though, employers tend to value knowledge in both languages. In fact, many software houses and large companies tend to develop some React applications, even when the primary in-house technology is Angular.

Knowing a little bit of React has helped me hot-fix legacy applications, converting code from one technology to another and ultimately helping my employer and increasing my value and reputation as an employee/contractor.

Access to growing marketplaces

This was the original reason why I decided to start learning React seriously. As I wanted to build a Shopify app - whose stack is primarily built on top of React technologies (Polaris UI, Hydrogen, etc.), it was basically a necessity.

Having access to a marketplace as thriving and growing as Shopify can help you develop your own apps and earn an income from them.

But Shopify isn't the only tech giant that made React a first-class citizen within their apps ecosystem; more recently, Stripe launched their own apps SDK, which also uses React.

It's clear that to be able to tap into these growing markets as developers or founders, knowing React is necessary.

Final Words

Knowing React today, as a front-end developer, is similar to being able to speak English.

Many other libraries unrelated to React are also adopting JSX as their syntax, such as Stencil.js, Solid.js, and so on. Learning React is a way to push your way into a much bigger family of technologies.

What's next?

In the next post, I will discuss the folder structure and conventions of large React applications. After that, we will learn about various large open-source React projects and take inspiration from them for building our application.

Additionally, we will start writing our demo application. Stay tuned!