Understanding React Using Your Angular Knowledge

After about six years of working in different web apps with Angular (My first app was with Angular.js), I finally had the opportunity to add to my professional portfolio a couple of React apps. Adapting my brain to the “React Style” to do things required me a significant amount of time. In this post, I’ll cover some of my experiences switching from Angular to React.

This article is not a React vs. Angular comparison but a guide to switching between these tools with less effort. You have to understand that having in-depth knowledge of both frameworks is a must.

My First Advice

I highly recommend stopping trying to solve problems in React using the Angular approach :D Happy coding!

Before starting, let’s talk the same language

To refresh your Angular vocabulary, please take a quick look at the official documentation here.

The React most used terms are:

  1. Compilers: The tools that allow us to work using the last features of JavaScript.

  2. Bundlers: Most of the time refers to Webpack. These tools map the files to work in development and create the production bundle using JavaScript optimization techniques, including support of legacy browsers.

  3. Package managers: The library manager for our apps. Before the package-lock.json appears, people prefer to use Yarn. These days, There is not a big difference to pick between NPM or Yarn.

  4. JSX: The React template system. Go here for a basic introduction or go to the official documentation to find a complete tutorial.

This transforms:

<MyHair color="blue">
  My Head
</MyHair>

Into this:

React.createElement(
  MyHair,
  {color: 'blue'},
  'My Head'
)

5. Elements: Code that represents what you want to see in the screen. const element = <h1>Hello, world </h1>.

6. Components: Functions/Classes with the behavior of each Element.

// Functions Mode looks like:
function MyHair(props) {
  return <h1>My hair is, {props.color}</h1>;
}

// Class Mode looks like:
class MyHair extends React.Component {
  render() {
    return <h1>My hair is, {props.color}</h1>;
  }
}

7. props: The @inputs of React component. The props represent the communication channel from the parent to the children.

8. props.children: Reserved prop who contains the content between the opening and closing tags: <myHair>{/* props.children */}</myHair>.

9. state: Variables managed by the Component that could trigger UI updates.

10. Events: Functions executed by the Components. The React Events could be associeted with HTML Events.

Getting started

Angular is a JavaScript framework created by Google. It includes a complete ecosystem that allows you to create dynamic web apps. It consists of a module and template system, a way to manage forms, an HTTP library, a route system, and so on. That’s why we’re allowed to create apps without thinking on extra packages. Most of the Angular developers start creating their apps using the command line interface tool included in the Angular ecosystem.

React is a JavaScript library which allows us to create web components. When creating dynamic web apps, React needs to interact with different libraries. The most typical setup includes integration with a way to manage forms, an HTTP library, a route system, and so. There is no right answer about which library combo is the best. Most of the React developers start with “Create React App” or “React Slingshot”. I recommended start with the official documentation and pick the starter kit according to each project’s needs.

The code structure

Angular has a clear code structure. You have the template, the styles, and the JavaScript file. Each file has its domain and preserved the native langue. The template uses HTML, the styles use CSS/SCSS/SASS, and the JavaScript file uses Typescript. This structure allows Backend developers to generate users interfaces with code that is familiar for theirs.

In React, the scenario is different. Some developers feel like they are the Kings because they have total control of the project. It means the developer can use separate files like Angular does or go with a single JavaScript file that includes the template, the styles, and the behavior.

Enough theory, Let’s see some real code

One of the recommendations to begin getting pro with new technology is to start with the official documentation. Let’s build together the “Getting Started with Angular: Your First App” using React. I’ll follow the same approach but a bit different.

Create a new project

In the same way as the official documentation, I prepare a StackBlitz repo.

Go here and fork the project to start.

Keep reading on Medium: https://hackernoon.com/understanding-react-using-your-angular-knowledge-5b0cd0ca4d9