React PropTypes vs. Angular Bindings
Tags: javascript, beginners
Published: 2019-12-09 07:40:02

What are PropTypes in React? Well for starters, let's remind ourselves of what props are in the first place. The term props in React is short for "properties". Properties in React are passed from component to component, so that those components may inherit the same qualities. This reduces code reuse throughout our app, while maintaining the integrity of our MVC format! Here, we have a simple example of how props are used in React:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rot3lfn3f2ldg9z2lqfh.png)

When rendering DOM elements to the page of a component, we can use props. Notice within the render function, we're passing {this.props.name}. Although at the time of it's declaration it has no value, when creating another element, props.name's value would then get set to whatever we choose. In this example, the variable "element" inherited the props from our "Welcome" class, and set the value of the name (attached to props) to "Sara". Now, when passing properties to certain components, the simple rule of thumb is that those properties should never change in order to maintain our functionality. However, with react, there's a slight drawback due to it being an un-opinionated framework. Let's investigate.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kh8mmn4rscs61i33c0gx.png)

Here we have a salary Component written in es6 that uses react’s defaultProps method to set the default return of "props" to 0 if no argument is given. With that said, let's assume that this component successfully renders the annual and monthly salary.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/97qkzm8lenq9akenzs2n.png)

Upon it's completion, we see how simple it is to pass values to props. Now, let's try adding another component that simply views the current salary. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9kglubimjmgle79i22hp.png)

Remember how easy it is to pass props right? Well here, we notice within the render of our ViewSalary Component, that the annualSalary property that we created within "Welcome" has been set from 0, to an empty object. Our output now becomes:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sh092vjqmrjuykkn94g2.png)

This is the downfall with props. There is nothing stopping me, or anyone else for that matter, from changing the value of props to whatever I want! Switching the prop's datatype to an object caused an emotional wreck in our salary! Here's where propTypes come in. Proptypes are React’s way of typeChecking, but for props. Meaning, that it is a built in, react method used to check the datatype of our expected output, against our actual output to ensure it matches. All it takes is a simple assignment! Take a look:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i7lfh9p4x94921ldf9k4.png)

Notice what happened under our defaultProps. In order to prevent our props from being altered, we've allowed for strict type-checking by setting the datatype of our annualSalary to a number. Now, we don't have the stress of wondering whether our data will come back the way we expect. Although this is effective, it is technically an extra step the developer has to account for if he chooses to use react. Enter Bindings in Angularjs.

Now unlike React, Angularjs is considered an opinionated framework. Meaning, if you're gonna code, you're coding Angular's way. Angular also maintains the integrity of MVC format. With that said, it shares the same capabilities in terms of passing information (or properties) to components! Angular utilizes a strict syntax when passing those props. This syntax is known as bindings. Let's examine a video-list entry component in Angularjs.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2ubdtj7htoos6eaitha4.png)

Data binding in AngularJS is the synchronization between the model and the view. Here, we're passing the videos from the parent component to our video-list entry. How you might ask? You see where we added "bindings"? The "<" symbol is performing all the magic. That symbol passes data dynamically! Crazy right? Also, notice the keyname "video". What is that? Well that video actually references the video from the parent. The symbol itself just performs a specific binding. Since there are different types of bindings, Angular uses different symbols to represent them such as the "&", "=", and "@". Although this syntax may seem confusing at first, it has it's perks. For one, no one will be able directly alter the value of our properties if they are bound correctly. The usage of this strict syntax makes it harder for attackers to understand what's pointing to what. Not only that, but knowing all it takes to pass data along is a binding is quite handy. This strict syntax also performs the type-checking for us. However, some programmers find it difficult to adjust and stick with React's relatively "easy" approach at rendering. To each their own!