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:
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.
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.
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.
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:
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:
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.
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 "
Top comments (0)