Easy Type Checking & Validating props in ReactJS | Proptypes | React JS Tutorial

Type Checking is a method to validate data type that you pass through different child components. The component that is receiving the data validates whether it is receiving valid data type or not. Proptypes is a package that allows you to easily check data type for props. Type checking is always a good idea. It ensures maintainable code that can be confidently shared with other software developers to work on. Software engineering is done in teams so you want to make sure that everybody is on same page. Type checking adds check point in components that throw warning or error in case invalid data of wrong type is being passed through a component.

As your app grows, you will have a lot of components that will take and pass properties / props in between each other and it's easy to lost track of what type of data a component requires and so you can pass, lets say, string data where a component required a number value. You can catch a lot of bugs with type checking. To avoid such mistakes, you need some mechanism to check type for your data. To answer this issue, there are several tools and techniques that are available, like Flow, TypeScript and propTypes. We will explore PropTypes in this RectJS tutorial. You can define which type of data you are passing through components and it will warn you if the data type is wrong or in case you just forgot to send a required value as prop to a child component.

PropTypes

► https://reactjs.org/docs/typechecking-with-proptypes.html
► https://www.npmjs.com/package/prop-types

✅ Display Data From JSON File in React
https://youtu.be/4fCr1IepJRw
✅ Display Icons / Images from JSON File in React JS
https://youtu.be/NWG1Ygt1k1k
✅ Fetch All Types of Data from JSON File in React JS
https://youtu.be/8nkVXiGH-7I
✅ 7 Ways to use Images in React JS
https://youtu.be/U07wzhfu66M
✅ Easy Way to use Images in React JS
https://youtu.be/0EtYzQn-Scw
✅ Require Image Not Working in React JS
https://www.youtube.com/watch?v=ay6id01369s
✅ Multiple Images in One Import
https://www.youtube.com/watch?v=gEMAZSO85KY
✅ Multiple Sets of Images from One Import in React JS
https://www.youtube.com/watch?v=SpjzhwcMcbs
✅ Default Map is not a Function in React JS
https://www.youtube.com/watch?v=XMm12Dw_Kpw
✅ Async Await Fetch in React JS
https://www.youtube.com/watch?v=9fr7ytpvybY
✅ Assigned a Value but Never Used
https://youtu.be/3_4QlPxuEK4
✅ Easily Sort Before Displaying Records in React JS
https://youtu.be/zZzcnmU_LoU
✅ Responsive Image Gallery from Scratch in React JS
https://youtu.be/J1dg4WXr3cg

✅ ReactJS Playground
https://youtube.com/playlist?list=PL1w28LzkbaQEdqbLVVGuR46lriyR_Ifiy
✅ JavaScript Problem Solving:
http://bit.ly/JavsScriptProblemSolving
✅ Web Development Essentials:
http://bit.ly/WebDevEssentials
✅ Crash Courses:
http://bit.ly/WSPCrashCourses

Channel: https://www.youtube.com/webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress/
Twitter: https://twitter.com/webstylepress
Instagram: https://www.instagram.com/webstylepress
LinkedIn: https://www.linkedin.com/company/webstylepress
GitHub: https://github.com/webstylepress
#reactjs #javascript #js #webdevelopment #webstylepress #javascripttraining #react