Shekinah Tshiokufila
Shekinah TSHIOKUFILA

Shekinah TSHIOKUFILA

How to Move from Angular to React Smoothly

Photo by Juanjo Jaramillo on Unsplash

How to Move from Angular to React Smoothly

The guide for users coming from Angular who want to use React.

Shekinah Tshiokufila's photo
Shekinah Tshiokufila
·Feb 26, 2022·

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • 1. Use TypeScript
  • 2. Free in the discipline
  • References

When you have been using Angular for a long time, you have the impression that putting your feet in React would be like accepting to live in the jungle. I repeat that this an impression 😅, at least it was mine.

This impression was driven by the fact that good practices vary from person to person and most good practices are driven only by the experiences of others. I had the impression, and it wasn’t just an impression, that each person organized things in their own way and that there was no common guideline to make sure that a new developer could organize their growth in React well.

This way of doing things allows you to do something quickly but not in a sustainable way. After this long secret experiment, I decided to write an article that will give those who are new to React an easier path to follow, especially those coming from Angular.

At the end of this article, you will find a link to a demo project that will help you to see more clearly the tips that are stated here.

photo.png

Let’s go!

1. Use TypeScript

Using TypeScript facilitates your migration to React because you keep the set of good practices acquired while using Angular. And this would allow you to be safe from many bad practices.

Although the use of TypeScript is decried by many React lovers who find that it is one more element to learn, it remains in my eyes the right way to use the power of JavaScript properly.

You can create your React application with TypeScript via this command :

npx create-react-app name-of-app --template typescript

And for those who are still hesitating to learn Typescript, I let you link to the official website. Enjoy TypeScript!

2. Free in the discipline

We must admit that the freedom that React offers makes it an essential element in front-end development. This same freedom makes its learning curve lower compared to Angular. One thing remains important, you must not abuse it!

Even if React resembles the No Rules Rules book by Reed Hastings, we should admit that establishing good practices would give ease in using this freedom.

We’ll see in the following lines some best practices that I copied from proven React users that I found in my early days and those that I imported from Angular.

a. Components

React is component-oriented as is Angular. In its organization, it is more flexible because it does not require to link components to modules as its competitor does. So the reuse of its components is easier and without many twists.

a. 1. Understand JSX

JSX is a syntax extension to JavaScript

JSX is the new way to define the user interface in React components, it is not HTML even if it looks like it in the syntax even less Javascript, but rather an extension to javascript that allows writing HTML in JavaScript.

Familiarize yourself with this syntax and its applications via the link below.

a. 2 Declaration of components

React gives two ways to declare components, which in my opinion still makes it very interesting.

a. 2. 1 Component as Class

You can define the component as a class, for that you should master the notion of using states and the life cycle of a React component.

To deepen the subject, you can follow the documentation at these two links.

a. 2. 2 Component as Function

React provided a powerful and compelling way to define components via functions. This is the most common method of defining components in the React universe.

To succeed in this component definition, React offers hooks that allow using the component defined as a function in the same way as a component of type class.

For a good understanding of Hooks, their utilities and their use, React gives excellent documentation via the following link.

b. Services

Use services for the business logic of your application, services will represent the actions that are not linked to a component directly but that can be used in a component.

Do not couple the business logic of your application with a component, this would lead to redundancy in several of your components which is opposed to the DRY (Don’t Repeat Yourself) logic.

To this recommendation, apply the code splitting logic advised by React in its documentation to make your application less heavy.

Service is only the name I took from the Angular organization, you can name this part as you like.

c. Structure your ./src folder

Although structuring can be varied at times, it is important to define good practices within your organization to avoid getting lost in the ./src folder.

A good organization would require, for example, that :

  • the components have their own folder in which they are grouped according to common missions or not (depending on whether you are building a large application or a small one)
  • the pages are grouped according to whether the routing will send users to one page or another. (a page can be made of one or more components) -the services are in their folder, a folder made of files containing the business logic of the application. (example: file subscriber.service.tsx containing all the necessary actions -crud- for a subscriber).

In short, enjoying the freedom of React in the discipline will allow one organization or another to do its job better. Especially give these engineers the productivity they need to evolve.

Learning React when you come from Angular is not weird. Mastering both environments allows you to be more open to the market demand. After all, you are the boss, you will see what is good for you.

This article wants to help those who want to try React but who have a lot of prejudices from the Angular fans club. I hope to have provided you with a guide in your learning path.

Discover the demo project here 👇

And via the deployed application, if possible, play with a friend because it’s more fun 😊.

References

Videos :

1️⃣ React Crash Course for Beginner in 2021

2️⃣ Learn React from Scrimba

3️⃣ TypeScript for React Components From Beginners to Masters

 
Share this